For a Kanban board I needed to create a virtual card on the board which would look like the post-its which are used on analog boards. Here is how to do it very easily with CSS just using a few steps.
First we need a card:
<html> <body> <div>Buy some milk</div> </body> </html>
It looks like this:
The first step is obvious: a post-it should be yellow, so we’ll start with the following CSS:
background:#ffffa5;
It now looks like this:
Then we need to actually give it the form of a post-it using the following:
width:250px; height:150px;
Now it looks like a yellow rectangular card: 
Now we need to fix the position of the next: it’s much too close to the border of the card:
padding:15px;
It slowly does look like a real post-it…
So that it looks like the cards on the current board, you need to actually have them look handwritten. Let’s change the font:
font-family: "Lucida Handwriting", cursive; font-size:15px;
There are many other handwriting fonts available but this one is pretty much available on all modern PCs.
It does already look quite good, but it still doesn’t feel like a paper card… Maybe with some shadow:
box-shadow: 2px 4px 6px #444; -moz-box-shadow: 2px 4px 6px #444; -webkit-box-shadow: 2px 4px 6px #444;
This handles the following browsers:
- Internet Explorer 9.0 and higher
- Firefox 3.5 and higher
- Opera 10.5 and higher
- Safari 3.0 and higher
- Chrome 1.0 and higher
It then looks like this:
Now this looks good ! The only thing which still looks very computer like and less human like is that the card is perfectly horizontal. This is probably never the case when you stick something on a board. This can be done with some CSS:
transform: rotate(-3deg); -moz-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg);
And looks like this:
We’re done ! Now you can still improve it by looking at different shadow effects, increasing or decreasing the angle…
3 thoughts on “Post-it cards with CSS”