Sticky Note Utilizing CSS3, Sans Images
Posted on March 23rd, 2010 by Dustin Hansen
Hey, can you take a note?
We've all seen the sticky notes on websites used for notices, call to actions, and normal UI type information. Usually these sticky notes are composed of images, and maybe even a simple CSS3 rotate transform. But we can achieve a quite similar looking sticky note sans images all together.
It took quite a bit of playing around with transform and gradients, and it doesn't quite look as good as it could, but I believe I've come up with something that could easily be incorporated into a Mootools or JQuery class to generate just such an effect on the fly. Lets have a look, shall we?
Stick it to me, note-boy.
First, lets see a few examples for inspiration, just to get an idea of what sort of result we're looking for, yea?
What now, sticky-stickerton?
So what characteristics are we looking for? To make the sticky note realistic, we need to give hints of being 3D. We need to create gradients and perspective for a sense of depth, and a shadow. Easy enough, right? We'll start with a plain HTML div element and some text to see how it looks.
The HTML
<div class="sticky-box">
<div class="sticky-note">
<p style="margin-bottom:0.8em;font-size:1.4em">Dear Milky-Tits,</p>
<p style="margin-bottom:1.2em">Please remember to pick up the milk from the corner supermarket, sunshine-butt!</p>
<em>Thanks,<br>Mr. The Milk Requester</em>
</div>
<div class="sticky-shadow"></div>
</div>
The CSS
.sticky-note {
position: absolute;
left: 0;
top: 0;
font: 25px/1.3em JournalRegular,sans-serif;
color: #333;
letter-spacing: 0.1em;
font-weight: bold;
z-index: 2;
margin: 0;
width: 290px;
height: 290px;
padding: 60px 30px 0 40px;
-moz-border-radius-topleft: 155px 2px;
-moz-border-radius-topright: 5px 11px;
-moz-border-radius-bottomleft: 85px 10px;
-moz-border-radius-bottomright: 75px 5px;
-webkit-border-top-left-radius: 9px 81px;
-webkit-border-top-right-radius: 5px 11px;
-webkit-border-bottom-left-radius: 85px 10px;
-webkit-border-bottom-right-radius: 75px 5px;
-moz-transform: skew(5deg, -5deg) rotate(14deg) translate(-30px);
-webkit-transform: skew(5deg, -5deg) rotate(14deg) translate(-30px);
background-color: #fff;
background-image:
-moz-linear-gradient(100% 0 235deg, rgba(10,10,10,0.3), rgba(70,70,70,0.1), rgba(255,255,255,0) 65px),
-moz-linear-gradient(0 0 -45deg, rgba(255,255,255,1), rgba(255,255,255,0) 65px),
-moz-linear-gradient(100% 100% -235deg, rgba(10,10,10,0.3), rgba(70,70,70,0.1), rgba(255,255,255,0) 55px),
-moz-linear-gradient(0 100% 40deg, rgba(10,10,10,0.3), rgba(70,70,70,0.1), rgba(255,255,255,0) 65px),
-moz-linear-gradient(top, #f1f1f1, #ccc 100px, #bbb);
-moz-box-shadow:
-5px 5px 2px -1px rgba(30,30,30,0.2),
5px 5px 2px -1px rgba(30,30,30,0.5),
0 0 95px 4px rgba(255,255,255,0.4);
-webkit-box-shadow:
-5px 5px 2px rgba(30,30,30,0.2),
5px 5px 2px rgba(30,30,30,0.5),
0 0 95px rgba(255,255,255,0.4);
border-top: 1px solid rgba(200,200,200,0.8);
border-left: 1px solid rgba(255,255,255,0.7);
border-bottom: 2px solid rgba(100,100,100,0.5);
border-right: 2px solid rgba(145,145,145,0.6);
}
.sticky-shadow {
position: absolute;
left: 0;
top: 3px;
width: 362px;
height: 353px;
-moz-transform: skew(5deg, -5deg) rotate(14deg) translate(-30px);
-webkit-transform: skew(5deg, -5deg) rotate(14deg) translate(-30px);
-moz-box-shadow: 0 0 6px rgba(0,0,0,1);
background: #000;
opacity: 0.5;
z-index: 1;
}
.sticky-box {
position: relative;
width: 300px;
margin: 120px auto;
}