Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5: "
In this tutorial, you’ll learn how to transform an HTML list into a wall of “sticky notes” that look and work like the following…
The effect is built up gradually and works on the latest Webkit browsers (Safari, Chrome), Firefox and Opera. Other browsers simply get some yellow squares.
Step 1: The HTML and Basic Squares
Let’s start
with the simplest version that works across all browsers. As we are using HTML5 for the effect, the basic HTML of our sticky notes is an unordered list with a link containing all the other elements in each list item:
<ul>
<li>
<a href="#">
<h2>Title #1</h2>
<p>Text Content #1</p>
</a>
</li>
<li>
<a href="#">
<h2>Title #2</h2>
<p>Text Content #2</p>
</a>
</li>
[…]
</ul>
Notice that each note is surrounded by a link which is always a good element to use as it automatically means that our notes become keyboard accessible. If we used the list item for the effect we’d need to set a
tabindex property to get the same access.
The CSS to turn this into the yellow squares is simple:
*{
margin:0;
padding:0;
}
body{
font-family:arial,sans-serif;
font-size:100%;
margin:3em;
background:#666;
color:#fff;
}
h2,p{
font-size:100%;
font-weight:normal;
}
ul,li{
list-style:none;
}
ul{
overflow:hidden;
padding:3em;
}
ul li a{
text-decoration:none;
color:#000;
background:#ffc;
display:block;
height:10em;
width:10em;
padding:1em;
}
ul li{
margin:1em;
float:left;
}
We reset things the browser normally gives us like margins and paddings and the list style to get rid of the bullets of the list.
We then give the UL element some padding and set its
overflow property to hidden – this makes sure that when we float the list items later on they are contained in the list and the following elements in the document automatically clear the float.
We style the link as a yellow rectangle and float all of the list items to the left. The result is a series of yellow boxes for our list:
This works for every browser out there – including IE6. This is also where we end supporting this browser as we should not shoe-horn visual effects supported by modern technology into outdated one.
Step 2: Drop Shadows and Scribbly Font
Now it is time to add a drop shadow to the notes to make them stand out and to use a scribbly, hand-written font as the note font. For this we use the
Google Fonts API and the font they provide us with, called “Reenie Beanie”. The easiest way to use this API is to play with the
Google font previewer:
Using this, we get a simple line of HTML to include this new font into the page. This is supported by all modern browsers.
<link href="http://fonts.googleapis.com/css?
family=Reenie+Beanie:regular"
rel="stylesheet"
type="text/css">
We then can set some padding to the headings in the sticky notes, and set the font of the paragraphs to the new font we included. Notice that Reenie Beanie needs to be big to be readable:
ul li h2{
font-size:140%;
font-weight:bold;
padding-bottom:10px;
}
ul li p{
font-family:'Reenie Beanie',arial,sans-serif;
font-size:180%;
}
In order to give the sticky notes a shadow to make them stand out from the page, we need to apply a
box-shadow. For this, we must add a line for each of the different browsers we want to support to the style of the links:
ul li a{
text-decoration:none;
color:#000;
background:#ffc;
display:block;
height:10em;
width:10em;
padding:1em;
/* Firefox */
-moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
/* Safari+Chrome */
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
/* Opera */
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
}
The syntax is luckily the same for each: offset, spread and colour – in this case a dark grey with an opacity of 70%. Together with the new font our sticky notes now
look like this:
Step 3: Tilting the Notes
Disclaimer: Both the tilting of the notes and the zooming we’ll add in the next step were already explained in the past,
in this article by Zurb, but lacked the support for other browsers, as they weren’t out at the time of writing. So big thanks to them for publishing this trick.
In order to tilt an element you use the
transform:rotate property of CSS3, again adding the prefix for each of the browsers:
ul li a{
-webkit-transform:rotate(-6deg);
-o-transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
}
This tilts all the links by six degrees to the left. Now to make the sticky notes appear to be randomly tilted, we can
use the nth-child property of CSS3:
ul li:nth-child(even) a{
-o-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
position:relative;
top:5px;
}
ul li:nth-child(3n) a{
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
position:relative;
top:-5px;
}
ul li:nth-child(5n) a{
-o-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
position:relative;
top:-10px;
}
This tilts every second link four degrees to the right, and offsets it a bit by five pixels from the top. Every third link gets tilted by three degrees to the left and pushed up five pixels. And every fifth link gets rotated five degrees to the right and offset ten pixels from the bottom. All in all this gives the
impression of random sticky notes:
Step 4: Zooming the Sticky Notes on Hover and Focus
To make a sticky note stand out we use a larger drop shadow and the
scale transformation of CSS3. Again, we need to define these for each of the browsers:
ul li a:hover,ul li a:focus{
-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
box-shadow:10px 10px 7px rgba(0,0,0,.7);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
position:relative;
z-index:5;
}
We also add a higher
z-index to ensure that the enlarged sticky note covers the others. As we apply this on hover and focus,it means that moving the mouse over or tabbing to a link now makes it stand out:
Step 5: Adding Smooth Transitions and Colors
The last step is to make the change from tilted to zoomed smooth and appealing rather than sudden. For this we use the
CSS3 transition module in its different browser vendor implementations:
ul li a{
text-decoration:none;
color:#000;
background:#ffc;
display:block;
height:10em;
width:10em;
padding:1em;
-moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;
-webkit-transition:-webkit-transform .15s linear;
}
In essence this says: if something is to change to this element, do not just switch to that other definition but do it gradually during a quarter of a second. As another extra, let’s add some colour into the mix by making every second sticky note green and every third light blue:
ul li:nth-child(even) a{
-o-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
position:relative;
top:5px;
background:#cfc;
}
ul li:nth-child(3n) a{
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
position:relative;
top:-5px;
background:#ccf;
}
In order to see the difference to the last step, you’d need
to try the last demo out in a browser.
Summary and Download
There you have it – smoothly animating and tilted sticky notes without any use of images or JavaScript – supported by Firefox, Opera, Safari and Chrome and falling back to a set of yellow boxes in older browsers. By clever use of the
nth-child selector and CSS transformations and transitions, we saved ourselves some scripting. Further, Google’s Web Font API made it easy to use a custom font. Using both hover and focus for the effect also means that keyboard users can observe the results as well.
Download the sticky notes example as a zip.
About the Author
Christian Heilmann is an international Developer Evangelist who works for the Yahoo Developer Network in the lovely town of London, England. He’s written two books: “Beginning JavaScript with DOM Scripting and AJAX“, and “Web Development Solutions.”
"
Posted in: 
