A few days ago, I showed you how to design a beautiful and clean paper sticky note in Photoshop. We created then some effects like paper, paper lines, sticky tape and shadows and guess what, we`re going to move one step further and will implement all these effects in a webpage using only HTML and CSS3.

Note: The demo looks perfect in browsers like Safari, Google Chrome, Mozilla Firefox and Opera. For a better experience, I strongly recommend to install one of the browsers mentioned.

Believe it or not, using only CSS, we can replicate objects like sticky tapes and shadows, elements which are supposed to be images to implement them in a website.

Take a look at how the sticky note will look at the end of the tutorial. Notice that the final image is slightly different from the original tutorial and I`m referring to the sticky tape which hasn`t the same lateral margins. Well, at this time, this is the best we can do with it using only CSS.

Ok, let`s get started. Prepare a folder and put in it 2 files: index.html and style.css . This is all we need.

Prepare the HTML document:

The structure will be very simple, with suggestive classes and ids. Take a look at the following image to understand the structure.

As seen in the image, we need a big container on which all the elements will stay.. Then, for each element, we`ll create a specific class. Here`s the HTML code which forms the structure of the page:

With no element styled, the page looks like this:

Now let`s stylize some elements. We`ll start with the paper, lines and text.

/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, font, img, ul, li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ul {
list-style-type:none;
}
/* Content */
body {
background:url(bg.jpg) repeat scroll 0 0;
}
#container {
width:320px;
margin:0 auto;
padding-top:200px;

}
.paper {
position:relative;
width:300px;
height:250px;
background-color:#faf8e5;
border:1px solid #e3e3e3;
}
.red-line {
height:250px;
width:1px;
background-color:#ef8b8b;
float:left;
margin-left:4px;
}
.first {
margin-left:40px;
}
ul#lines {
margin-top:40px;
}
ul#lines li {
height:28px;
line-height:28px;
color:#4d84c8;
font-family:Georgia;
font-style:italic;
font-size:16px;
width:225px;
border-top:1px solid #f2f0df;
padding-left:75px;
}

These styles are not so different from what you know. The style is simple CSS, nothing fancy, no CSS3 yet, only basic CSS. And after these styles, the image looks like this:

Now create the sticky tape by adding the next css code. Notice that among normal CSS styles, we`re using “transform” and “box-shadow” properties which are specific to CSS3 markup :

.tape{
position:absolute;
top:-15px; right:80px;
width: 130px;
height: 35px;
background-color:#fff;
opacity:0.6;
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 1px 0px #cccccc;
-moz-box-shadow: 0px 0px 1px 0px #cccccc;
box-shadow: 0px 0px 1px 0px #cccccc;
-webkit-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
-moz-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
-o-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
}

The tape is added:

Now add the styles for the shdows:

.left-shadow{
width: 140px;
height: 140px;
bottom:-5px; left:-12px;
position:absolute;
z-index:-6;
display: inline-block;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);
box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);
-moz-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);
-webkit-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);
-o-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);
-ms-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);
transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);
}
.right-shadow{
width: 140px;
height: 140px;
bottom:-13px; right:-4px;
position:absolute;
z-index:-6;
display: inline-block;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);
box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);
-moz-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);
-webkit-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);
-o-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);
-ms-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);
transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);
}

Now the design is complete and looks like we wanted to be:

Conclusions:

Many objects can be made using only CSS, but the main issue comes when things doesn`t look so good in all browsers, especially InternetExplorer. For example, take a look at how our design looks in IE8. The sticky tape is just a white rectangle and the drop shadows doesn`t exist. That`s because IE8 doesn`t support CSS3 markup. Starting with IE9, the things are changing in good and CSS3 is finally supported my Microsoft`s internet browser.

In conclusion, the decision is yours. Is your call to be up do date with these awesome effects implemented in more and more websites or to stick with the old internet browsers like IE8.

I thank you for following me trough the tutorial and if you have any questions, drop us a line in the comments`s section.

Related posts:

1. Fundamental CSS3 Resources for Designers
2. How to Create a Grunge Letterpress Text Effect In Photoshop
3. How to create a clean and design portfolio layout using Photoshop