Create a sticky note using CSS3
Friday, October 7, 2011 EDT
by: Eric Potvin
Tags:css
CSS3 brought to Web 2.0 an entire new way to use visual effects and finally stop using images. One of the great CSS3 features are definitely, shadows, rotation and transparency. By simply using these three effects you can create almost anything that requires images.
Here's a quick example for sticky notes:
Call Mom!
In order to create this realistic sticky note, you will need this simple CSS3 code:
CSS
.stickynotes {
position: relative;
width: 300px;
min-height: 100px;
margin: 25px auto;
padding: 35px 15px 15px 15px
background: #F8EFA2;
-webkit-transform: rotate(-.8deg);
-moz-transform: rotate(-.8deg);
-o-transform: rotate(-.8deg);
-webkit-box-shadow: 0 2px 12px rgba(0,0,0,.5);
-moz-box-shadow: 0 2px 12px (rgba(0,0,0.5));
box-shadow: 0 1px 2px #000;
}
.stickynotes span {
display: block;
text-align: center;
font: normal 36px Tahoma;
color: #000;
text-shadow: white 1px 1px 0px;
overflow:hidden;
}
.stickynotes span::before {
content: ' ';
display: block;
position: absolute;
left: 115px;
top: -15px;
width: 75px;
height: 25px;
z-index: 2;
background: rgba(245,245,245,0.5);
border: 2px solid rgba(255,255,255,0.5);
-webkit-box-shadow: 0 0 5px #888;
-moz-box-shadow: 0 0 5px #888;
box-shadow: 2px 2px 2px #000;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-o-transform: rotate(6deg);
}
HTML
<div class="stickynotes"><span>Call Mom!</span></div>
Way easier than creating images right?
Link to this Article
To link directly to this article from your web site, use one of the following snippets below.
Create a sticky note using CSS3 | Book Of Zeus<a href="http://www.bookofzeus.com/articles/create-a-sticky-note-with-css3/" title="Create a sticky note using CSS3">Create a sticky note using CSS3 | Book Of Zeus</a>
Short URL:
Create a sticky note using CSS3 | Book Of Zeus<a href="http://s.bookofzeus.com/RRoZs" title="Create a sticky note using CSS3 Short URL">Create a sticky note using CSS3 | Book Of Zeus</a>