If you need to put a quick note on a website, why not use a Post-it note? There’s no need to use any images now that we have CSS3. We can use some nice handwritten text, skew the note to the side, even add a shadow.
Here’s the CSS used for the Post-it in the demo (which is a div with class “post-it”).
.post-it {
background:#fefabc;
padding:15px;
font-family: 'Gloria Hallelujah', cursive;
font-size:15px;
color: #000;
width:200px;
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;
}
You can customize your CSS Post-it note by changing the background color, changing how much the note is rotated, or changing the font. Here is the font I used for the demo: Gloria Hallelujah
