How To Create Depth And Nice 3D Ribbons Only Using CSS3
- 10 January 2010
- Tutorials, Web Design
- This post was written exclusively for PV.M Garage by Piervincenzo Madeo
- Comments (179)»
In this last period on PV.M Garage we have described many trends of the modern Web Design and many techniques for creating stunning and impressive web sites.
In one of our tutorials we learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout. This is a widespread trends in recent web design: creating a 3D perception in a website and simulating a “world” in three dimensions are two great ways for the designers to play with their skills.
Thanks to useful graphic softwares (2D) we can easily create 3D elements, like ribbons and shadows, but we can also reproduce 3D scene using perspective, focus, color shading and opacity. There is also the possibility of using 3D softwares, like Blender, to create some 3D objects and images that we can use in our designs. There is an interesting article on CreativityDen about the fundamental ways of adding depth in web design works; it explains six basic techniques to simulate the 3D perception in our works and I suggest an attentive reading.
Many beautiful web sites have a wonderful, balanced, three-dimensional perception and it’s clear that this kind of layouts use, in a clever way, images (generally in the background property), lines and some CSS techniques to create the illusion of depth (there is a brilliant post, by Henry Jones on Web Design Ledger, about the use of 1px line to simulate the depth). Below some examples.
DesignM.ag
Blogof.FrancescoMugnai.com
Yoast.com
From-The-Couch.com
Wait, wait, wait. We are web designers, right? We have two great allies to realize our daily projects: HTML and CSS.
The improvements for these languages have been considerable and now the question in my mind is: could we build 3D elements and create depth only using HTML and CSS?
Barack Obama could say “Yes, we can!”
Sure? Yes, it’s possible to create a simple and nice (3D) layout playing with some CSS3 properties, only using code and without the help of Photoshop.
We Want to Make 3D Elements Without Images
There are some properties of the CSS3 languages that can help us to accomplish this mission.
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds.
RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.
background: rgba(196,89,30,0.65);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
Other great new property: border-radius, that allows us to add nice rounded corners on box-items.
-moz-border-radius: 10px; /*radius of 10px*/ -khtml-border-radius: 10px; -webkit-border-radius: 10px;
We will also use particular borders to create useful triangles for building a nice ribbon. Below the CSS code to draw an arrow (read Creating Triangles in CSS to know more about this techinque).
.triangle {
border-color: transparent #7d90a3 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
}
The arrow is useful to reproduce the depth for some 3D elements, like a ribbon. Box-shadow helps us to create depth through shadows. Border-radius, instead, is just to add rounded corners where we want to utilize this solution.
See the image below to deduce how we will use the CSS triangles, the shadows and the rounded corners.
We will create a simple menu, through an unordered list, using the transform property for the single items of the list to make a nice effect.
-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);
Below you can see the final result of our efforts. You can also download the archive with the source files and see the live demo.
How To Make a CSS Based 3D Layout
First of all we set up our files. We create a new folder with index.html and style.css.
We 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 Ribbon</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- 3D Stuff --> </body> </html>
Take a look at the following image to understand how we will realize the “structure” in our index.html file.
Well, as you have just seen in the picture we need a main container (centered), a bubble for the contents, and three elements for the ribbon: a rectangle and two triangles.
<div id="container"> <!-- Main Container --> <div class="bubble"> <!-- Bubble --> <div class="rectangle"><h2>3D CSS Ribbon</h2></div> <!-- Rectangle with a title --> <div class="info"> <h2>I Have Used Only CSS, friends!</h2> <p> For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />It doesn't work with IE! </p> <p> <a href="#">Go to the tutorial!</a> </p> </div> </div> </div>
The CSS code to style the basic elements (container, bubble and rectangle) is the following.
/* 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;
}
ol, ul {
list-style: none;
}
:focus {
outline: 0;
}
/* // Reset */
body {
background: url(bck.jpg); /* image for body made with Photoshop using noise filter (gaussian monochromatic) on #ccc */
font-family: Georgia, Verdana, “Lucida Sans Unicode”, sans-serif;
font-size: 12px;
color: #999;
}
h2 {
font-style: italic;
font-weight: normal;
line-height: 1.2em;
}
div#container {
margin: 50px auto 0px auto; /* centered */
width: 400px;
}
.bubble {
clear: both;
margin: 0px auto;
width: 350px;
background: #fff;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}
.rectangle {
background: #7f9db9;
height: 50px;
width: 380px;
position: relative;
left:-15px;
top: 30px;
float: left;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
z-index: 100; /* the stack order: foreground */
}
.rectangle h2 {
font-size: 30px;
color: #fff;
padding-top: 6px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
}
Below the result of these statements.
We add the two classes to make and place the triangles in style.css… and we also add the style for the content (class info).
<div id="container"> <div class="bubble"> <div class="rectangle"><h2>3D CSS Ribbon</h2></div> <div class="triangle-l"></div> <!-- Left triangle --> <div class="triangle-r"></div> <!-- Right triangle --> <div class="info"> <h2>I Have Used Only CSS, friends!</h2> <p> For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />It doesn't work with IE! </p> <p> <a href="#">Go to the tutorial!</a> </p> </div> </div> </div>
We add the two classes to make and place the triangles in style.css… and the style for the content (class info).
.triangle-l {
border-color: transparent #7d90a3 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: -30px;
top: 65px;
z-index: -1; /* displayed under bubble */
}
.triangle-r {
border-color: transparent transparent transparent #7d90a3;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: 350px;
top: 35px;
z-index: -1; /* displayed under bubble */
}
.info {
padding: 60px 25px 35px 25px;
}
.info h2 {
font-size: 20px;
}
.info p {
padding-top: 10px;
font-size: 14px;
line-height: 22px;
}
.info p a {
color: #c4591e;
text-decoration: none;
}
.info p a:hover {
text-decoration: underline;
}
Here the result.
We create a nice menu on the top. Below the markup.
<div id="container"> <div class="menu"> <ul> <li class="l1"><a href="#">CSS3</a></li> <li class="l2"><a href="#">is really</a></li> <li class="l3"><a href="#">powerful</a></li> </ul> <span>by PV.M Garage</span> </div> <div class="bubble"> <div class="rectangle"><h2>3D CSS Ribbon</h2></div> <div class="triangle-l"></div> <div class="triangle-r"></div> <div class="info"> <h2>I Have Used Only CSS, friends!</h2> <p> For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />It doesn't work with IE! </p> <p> <a href="#">Go to the tutorial!</a> </p> </div> </div> </div>
The style for our top-menu.
.menu {
position: relative;
top:3px;
left: 50px;
z-index: 80; /* the stack order: displayed under bubble (90) */
}
.menu ul li {
-webkit-transform: rotate(-45deg); /* rotate the list item */
-moz-transform: rotate(-45deg); /* rotate the list item */
width: 50px;
overflow: hidden;
margin: 10px 0px;
padding: 5px 5px 5px 18px;
float: left;
background: #7f9db9;
text-align: right;
}
.menu ul li a {
color: #fff;
text-decoration: none;
display:block;
}
.menu ul li.l1 {
background: rgba(131,178,51,0.65);
}
.menu ul li.l1:hover {
background: rgb(131,178,51);
}
.menu ul li.l2 {
background: rgba(196,89,30,0.65);
}
.menu ul li.l2:hover {
background: rgb(196,89,30);
}
.menu ul li.l3 {
background: rgba(65,117,160,0.65);
}
.menu ul li.l3:hover {
background: rgb(65,117,160);
}
.menu span {
margin: 15px 80px 0px 0px;
float:right;
}
Here you can se the simple menu.
Our 3D layout is ready. It’s so sexy, I hope you find the final result attractive and inspiring.
Conclusions
I think this kind of solution is useful to improve the performance of the website holding a great 3D effect. There is great question: Internet Explorer and Opera have some problems with CSS3. But this is not an impediment because we are looking to the future. So, if you are browsing the web with IE, please consider to install Mozilla Firefox or Google Chrome or Safari. Some screenshots from different browsers (Windows 7 OS).
Finally, it’s a good idea to validate the code.
W3C Validation
Response: “This document was successfully checked as XHTML 1.0 Strict!”
25 Great Stock Images Plus with $100 Subscription Giveaway
Entrepreneurs that inspire you to grow your internet business
Unique Handwritten Free Fonts For Your Next Designs
A Roundup of 45 Industrial Free Fonts
55 Unconventional And Original Free Fonts For An Unique Design
How to Create a Battery Icon in Photoshop
How To Create A Magnifying Glass Icon In Photoshop
Touch The Future: Create An Elegant Website With HTML 5 And CSS3
Wow awesome article Piervix, thanks for comparing the effect between browsers, I’m always too lazy to do that :)
This is an awesome article.. unique! Thanks for sharing great stuff!!!
Great tutorial piervix. I always feel to move forward but these older browsers doesn’t allow me :)
These ribbons looks quite nice. I used to do it in my own ways. This looks cool.
Lol, brilliant, but how exactly did you make the menu links rotated???
CSS is getting even better! I like the new features I hope other browsers add support asap!
Voted! Thanks for this brilliant article Pierevix =)
WOW Great tutorial!
thanks man
I never thought of doing it this way. One of the more original articles I have read lately.
Excellent article and tutorial. I just did all I can to promote it, hit all the social promotion buttons and I stumbled and retweeted it. It was worth it.
Thanks for going into detail and explaining it to us step by step and for providing the screenshots for different browsers and even the validation. (Thumbs-up) :)
Great tutorial you have here!
Thumbs-up and more than a digg :))
Very good looking and creative example. The missing border radius doesn’t even look “bad” in IE, the only thing that really doesn’t work is the rotation.
It would be interesting to see an example using IE’s matrix filters to complete the look.
Love this tut. bookmarked and super useful. thanks for sharing.
Love your website! Everything so so clean and beautiful!
have to implement this one soon, good article, learnt something new today
Great stuff. For those hesitant to use CSS3 features, check your analytics. 3% of my visitors are on IE in all of it’s silly flavors. I have no problem ignoring them :P
But for a client project it’s typically over 50%, and so, of course, images win. A real professional (or a guy with enough budget) will present CSS where he can (the good browsers) and images where he can’t.
Superb post! Bookmarked this for a future post. :)
css3 rocks! nice concept here, never really thought of having a triangle before, could be re-usable to create so many different levels of depth if done right!
thank for the info.
Great job. This is an unique article. Thanks for comparing the effect between browsers, so many people not aware about it. Keep sharing your post. Thanks.
I’m sure the effect works well in small doses – I just don’t think it works if used too much – reminds me of the early days using tables and image maps.
wow, this is just brilliant. thanks for this trick.
“it’s really fantastic.
It doesn’t work with IE!”
Hmm… Doesn’t work with the world’s most-used browser? Not really THAT fantastic then, is it?
Images & tables work in all major browsers. A semantic web is a nice idea, but so is world peace. Until then, I’ll be in the trenches.
Most used?
Browser statistics by W3C –> http://www.w3schools.com/browsers/browsers_stats.asp
This post looks to the future, and it’s clear that my goal is simply to explain how to use some new CSS3 properties… simply, my friends…
I think the experiments with new technologies help us to grow as web designers and developers.
Thanks for comment Dan.
Internet Explorer IS the most used browser, even when the statistics at W3C say different.
You also might need to read the footer note:
“W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use Internet Explorer, since it comes preinstalled with Windows. Most do not seek out other browsers.
These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users.”
About the article: great one! I didn’t knew the CSS Triangle trick.
One question though; did the CSS validate? ;)
SO psyched to finally find a tutorial on how to do this!!
wow…!
realy great trick…thanks for share
Nice tutorial mate. Very well written.
Hi, nice article and smart ideas. Since you say we’re looking to the future, I think you should add the standard properties (border-radius, box-shadow, transform) without the -moz etc prefixes as well. The pre-alpha of Opera 10.5 supports this already, and more browsers will come.
Great tutorial about CSS3 with an elegant solution.
Great tutorial piervix.
I think this is a good tutorial, however, it is a lot of css. I still prefer to do it using a couple of images and less css. Thanks for the post though. Good effort!
Just add:
border-radius: 10px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-o-transform: rotate(-45deg);
after similar -webkit- and -moz- stuff and this example will work in Opera as well)
Great tutorial / article! Many thanks
Beautiful post piervix. Very interesting, Thanks for sharing…
-Deepu
You should always always include the normal non-vendor-specific version of CSS properties, even if no browser you know supports them or you know of no plans to add support, because they will always most likely be added in future.
For example, this fails in Opera which supports border-radius and box-shadow (without and -blah- prefix).
Very Cool
Thank you for shared..
Great tutorial !
However, with Chrome and Safari, there is a right margin that appear on the triangle div that can be pretty annoying (Horizontal scrollbar).
You can remove it this way:
.info {padding-top: 120px;}
.triangle-l {position: absolute;}
.triangle-r {position: absolute;top: 65px;}
I ‘ve the same problem with the right margin, but this does not fix it for me.
I’ve no idea where this margin comes from (870px!)
Try this
.info {padding-top: 60px;}
.triangle-l {position: absolute;}
.triangle-r {position: absolute;top: 65px;}
You should always add in the non-vendor-specific attributes in case some browser (current or future) has implemented the standard.
Also, adding -o- attributes wouldn’t hurt.
Nice post, never seen it done that way before!
Awesome article. Quality. Saved to Stumbleupon and hope to use it in my next design. Thank you.
That triangle trick is awesome!
Thank you!
Great tutorial nice explanation
Thanks for sharing your skills
hihi IE sucks :P
But really nice tutorial though!
thnx a lot for sharing this…helped a lot…. :)
Great tutorial… thanks :)
its not a good idea to put in empty div tags just for the rendering of triangles…. XHTML-wise, it semantically makes no sense =(
[quote]
its not a good idea to put in empty div tags just for the rendering of triangles…. XHTML-wise, it semantically makes no sense =(
[/quote]
Yes, i agree with you amy :)
if it fixed layout type, better using background image in parent for creating the triangle. And 3D styling for using technique explained in this tutorial.
If beside fixed layout types, i think it’s better using javascript for that empty div tags.
great information. thanks for sharing.
Great tutorial you have here!
Dear Sir Web Design
Indeed, this good work
I have a problem when i recopy the code of the table ..,the tables is not one near other is come down as you see in my exaple
This is a link example
http://greencorner.us/test.html
Im really tired to try to do something like that http://osdnetwork.org/
Help me i wish you read my comment
thanks alot
I can not stress enough the importance of articles like this stating very clearly the compatibility issues with these techniques. Don’t get me wrong. I absolutely love love love CSS3 and what you can do with it, however until EVERYONE abandons IE6&7, I can’t have my designers coming across something like this and starting the ole “here’s how you do it, easy-peezy!” sentiment.
Great article, but we’re not there yet…
tdb
Nice trick! &)
This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time. I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind. :)
[quote]
its not a good idea to put in empty div tags just for the rendering of triangles…. XHTML-wise, it semantically makes no sense =(
[/quote]
Yes, i agree with you amy :)
if it fixed layout type, better using background image in ‘h2′ parent for creating the triangle. And 3D styling for ‘h2′ using technique explained in this tutorial.
If beside fixed layout types, i think it’s better using javascript for that empty div tags.
Awesome tutorial man!
triangle made of borders… *clapping hands*
BIG THANX!
add css rules default
border-radius:…
box-shadow:…
and its work fine on Opera 10.6
realy nice article thank you very much …
very cool tutorial, thanks for sharing!
Great job myfriend ;)
You don’t need to use the rotate tags… it can still work in IE:
http://vartandesign.us.to/ribbon/