We, web developers and designers, now have access to a plethora of new tools thanks to HTML5 and CSS3. Combining these two languages can help us to create awesome effects, build stunning interfaces, or, with the help of JavaScript, full- fledged programs. Today, we’ll see how to make some very cool looking sticky notes in a web browser using only HTML5, and CSS3. Ready? Let’s go.

STEP ONE:

The Basic Sticky Note

We’ll start by building some basic squares onto our page that will eventually become our sticky notes. Our framework for the notes is a simple unordered list containing 6 list items, each wrapped up into a link. Here’s what our simple HTML code looks like:

It’s simple to make our list items look more like sticky notes:

We first reset the margin and padding of all of the elements to avoid cross-browser headaches, and took away any styling of our list items such as bullets. We’ve also changed the background color so that the list items look a little bit more like sticky notes. Now if you load up the HTML file into your browser, you’ll already have some pretty good looking sticky notes:
Step One

Let’s make them even more impressive shall we?

STEP TWO:

Shadow and Fonts

We want our sticky notes to stand out from the page, so we’re going to add some drop shadows, and make our fonts look like real handwriting. The Google Fonts API provides a very simple way to implement fonts that you wouldn’t normally see in a web page, and is completely standards compliant. We’ll be using a font called “Reenie Beanie”, which looks a lot like my handwriting to be honest. Using it is just like using a style sheet. We simply need to add the following line into the head of our HTML file:

Now, we can call this font from anywhere we’d like to within our CSS file. We’ll go ahead and add this font to our list items like so:

This new styling will make our notes look more realistic, and as you can see we’ve made the text large and easily readable:
Step Two A

The next piece of the magic will be the CSS3 drop shadow. This will help our notes to stand out from the page, and give a bit of depth to our project:

So you can see that we’ve added the box-shadow declarations for all of the major browsers. If you refresh your page now, you’ll see some rather outstanding looking sticky notes:
Step Two B

STEP THREE:

Rotation

Next, we’ll give our sticky notes a bit of rotation. CSS3 provides us with a transform declaration that can do things like scale an element’s size, rotate an element, and much more. Here’s the code that we’ll add to our CSS file in order to make give our sticky notes some tilt:

Although this does look pretty cool, we’d rather have our sticky notes look randomly placed. In order to do this, we’ll use the nth-child selector provided by CSS. This selector allows us to select things like only even numbered children, only odd numbered children, etc. We’ll target our list’s even elements, 3rd element, and 5th element to get the desired random effect:

STEP FOUR:

Zoom

When we hover over our sticky notes, we’d like them to appear as if we’ve zoomed in on them some. To achieve this effect, we’ll need to use the CSS transform scale property. Scale is simply the overall height and width of an element. It’s used just like the rotate property, only we pass in a value for how many times we’d like to multiply the original height and width. We’ll add this to our hover and focus selector:

You’ll see that we’ve also added the z-index property to make sure our zoomed in sticky note hovers above the rest of them. Now, if you load the page up in your browser and hover over a sticky note, you’ll see it rotate back to the original position, grow in size, and appear to hover.
Step Four

STEP FIVE:

Transitions

The last step will be to add a CSS transition to our page. A transition basically says “Hey CSS don’t just switch to my hover styling immediately. Bring it in gradually, and make it look smooth!” This allows for an animation-like effect to take place when we hover instead of an instant switch. Here, we’ll add a CSS transition for each browser:

That does it for our tutorial today! You now have 100% sexy sticky notes done in only CSS3 and HTML. We’ve even got a zoom effect implemented with no JavaScript required. There are several ways that CSS3 can spruce up a page and make our sites and applications look far better. Get used to the transforms and transitions, as we move into the future of the web I’m sure you’ll be seeing a lot more sites using these techniques.

Download Source Files