When I was reading the weekly update issue by @Ruan Yifeng, a tiny CSS component library caught my attention, PaperCSS. It’s interesting that the HTML elements can be presented just like a piece of paper, so I follow the CSS style panel in the browser developer tool and created some simple paper-like divs.
After that I still don’t get enough. How about we draw a sticky note using CSS? Let’s do it.
Firstly, let’s set up the container and the sticky note div with some random contents.
Then we format our html body to cover the full screen and centralize the sticky note div using flex layout.
After it’s done, it looks like this
Now let’s create a css class named “paper”.
Here is the magic: utilising the border top right, top left, bottom right and bottom left radius to make the edges of the sticky notes become rough. The pixel amounts can be random but have to be hugely different for every pair, such as
border-top-right-radius: 68px 2px; where top border radius is 68px and the right border raius is 2px. In this way, it looks rough but not curved. Set the 4 cornors and add a box shadow to make the sticky note looks like a paper.
Most importantly, choose a cute font so that it looks more natrual. (Comic Sans MS is lousy but it’s the cutest font I can find which is one of the browser safe fonts.)
Then let’s format the sticky notes with some height, width and background color and use flex layout to center the text both horizontally and vertically.
When you put a sticky note on the white board, it’s hard to make it align well if you do not purposedly adjust the positions. Therefore, rotating the sticky note a bit makes it look more vivid.
If you don’t put a pin on the sticky note, it falls! (Blame the gravity and poor quality of STICKY notes)
Use pseudo elements
::after to draw a big cirle and a small circle, which look like a pin.
And that’s done!!