How to Create a Paper Sticky Note Using Only CSS3
|
| ||||||||
| Compare: | Web Design Calculator | Web Design Cost Guidelines |
Are you an E-Commerce Web Designer? Add a Free Listing
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Sticky Paper</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <!--paper note code--> </body> </html>
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:
<body> <div id="container"> <div class="paper"> <div class="tape"></div> <div class="red-line first"></div> <div class="red-line"></div> <ul id="lines"> <li></li> <li>Please don`t forget to</li> <li>buy some food</li> <li></li> <li>Thanks</li> <li></li> <li></li> </ul> <div class="left-shadow"></div> <div class="right-shadow"></div> </div><!--end paper--> </div><!--end container--> </body>
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:
- Fundamental CSS3 Resources for Designers
- How to Create a Grunge Letterpress Text Effect In Photoshop
- How to create a clean and design portfolio layout using Photoshop
Tue, 19 Jul 2011 18:35:25 GMT
Tags: Tutorials,
New Port Richey E-Commerce | Scottsbluff E-Commerce | Navi Mumbai E-Commerce | Roanoke E-Commerce | Montgomery E-Commerce | Hampton E-Commerce | Johnstown E-Commerce | Hemlock E-Commerce | Wilmington E-Commerce | Houston E-Commerce |
Tutorials
Embed Custom Fonts with Cufón Font Replacement and Google Fonts
Embedding custom fonts on a website has always been a problem, but thanks to Javascript and especially jQuery, things are getting solved one at a time. Cufón Font Replacement is now the most popular way to use custom fonts and appeared as a very efficient
A Set of 10 best Photoshop tutorials for Rock & Stone effects !
I go ahead again with the selection of some of the best tutorials. The three last recent articles published on 2experts, about fire, water and nature got a really good success and it gives me the motivation to continue in this way! Today, you can find a s
5 Things To Consider When You Install a SATA Hard Drive
Hard drives with a Serial ATA (SATA) connector were introduced to replace IDE and Enhanced IDE (Parallel ATA) drives. SATA removes the master-slave relationship between hard drives (parallel), as each drive connects directly to a SATA host adapter or port
Need E-commerce Design? Check out our member profiles:
Easy Low-Cost Web Site Solutions. ANY web site, quick and fast! Turn your dream into reality today! I'M THE HOUSE M.D. OF WEB DESIGN AND DEVELOPMENT.
Rancho Cucamonga, California US
Freelance Graphics and Web Design. I make it simple, easy, and low cost to make your Web site fantastic. Just see for yourself by clicking on. I promise you'll love it.
Largo, Florida US
Web design, Web development, Ecommerce, Website maintenance, Hosting and Business Software.
Alphen aan den Rijn, Zuid-Holland NL
Our professionals specialize in Zen Cart and will help you eStart your business today. From installation and design to upgrade, we are your eCommerce professionals.
Coolidge, Arizona US
CNB Web Solutions provides all of our clients with unique, top-of-the line, web designs with eye-catching graphics and photos as well as numerous site features.
Houston, Texas US
White Ivy Design & Marketing: graphic designers & web programmers in Minnesota, transforming your ideas into powerful communications... Grand Rapids, Hibbing, Brainerd, Duluth, all of MN.
Coleraine, Minnesota US
We are an up and coming creative design group based out of Austin, Texas. We specialize in eco-friendly, contemporary, creative design.
Austin, Texas US
High Time Design provides affordable web design and copy writing to small business and the artistic community. Full service packages designed to suit your business requirements.
Lorain, Ohio US
PaintShop Pro X4: A Powerful Photo Editor For The Rest Of Us [Giveaway]
This week we re giving away 25 free copies of PaintShop Pro X4 worth 2475 in total Let s take a q
Cool Websites and Tools [January 20th 2012]
Check out some of the latest MakeUseOf discoveries Most of the listed websites are FREE or come wit
OnLive Comes To Phones & Tablets, Offers Universal Controller [News]
Cloud gaming service OnLive originally debuted on the PC little more than a year ago but the compan
PC Gaming: Making it Easier to Find, Try, Buy, and Play Titles
Gamers know what titles they want to buy and are willing to jump through hoo
9 Of The Strangest Things Found On Craigslist
You see a lot of strange tidbits if you care to put in the time to browse through them Craigslist i
Evernote Releases New Android Version, Complete Redesign [Updates]
Evernote has just released a new version of their excellent and free Android client introducing inn
Cool Websites and Tools [November 21st 2011]
Check out some of the latest MakeUseOf discoveries Most of the listed websites are FREE or come wit
Article Tags
E-commerce Design Articles
Web Apps & Internet (374)
News (291)
Web Apps (129)
Inspiration (128)
Music (119)
iPhone / iPad / iPod (116)
cool web apps (108)
Google Android (101)
Mobile Tips (100)
Announcements (99)
deals (88)
Games & Gaming Tips (84)
Tech Deals (82)
Opinion & Polls (76)
Cool Software Apps (76)
Social Media (66)
iOS (66)
Browser Tips & Tricks (66)
iPhone Apps (59)
Freebies (58)
geeky fun (58)
Photography (58)
iphone (55)
Google (53)
troubleshoot (53)
android (52)
Photoshop (52)
Graphics (51)
facebook (50)
How-To Articles (50)
Friends:
E-Commerce Website Pricing
Web Design Quote
Website Design
Graphic Designers
