How to Create a Sticky Note Using CSS

Make a beautiful sticky note without a single image

In this tutorial, you will learn how to create a sticky note for your website. The effect is built of five simple steps, the first step simply adds the text you want to use, as well as creating the square that in essence becomes the sticky note. Step two focuses on the getting the font right as well as adding a drop shadow effect. Step three focuses on tilting the notes so they don’t look as boring as if they were all lined up. The fourth step allows the sticky notes to zoom when you move your mouse over them. The fifth and final step adds a smooth effect and allows you to change the colors of the sticky notes.


Step 1
In the first step, the DeveloperDrive Team make a basic HTML5 code that will later become your sticky notes, remember to add the code between <body> and </body>. They made the text links in case you want to use the sticky notes as such in the future. As you can see, the text currently looks really bland and boring, that is what the CSS is going to change, pretty much all is does right now is add a yellow square around our text, remember to add your <style type="”text/css”>" in your header, then insert the code below before closing with a </style>.


Be the first to write a comment

You must me logged in to write a comment.