How To Create Depth And Nice 3D Ribbons Only Using CSS3

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 (438)»

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

How To Create Depth And A Nice 3D Ribbon Only Using CSS3

Blogof.FrancescoMugnai.com

How To Create Depth And A Nice 3D Ribbon Only Using CSS3

Yoast.com

How To Create Depth And A Nice 3D Ribbon Only Using CSS3

From-The-Couch.com

How To Create Depth And A Nice 3D Ribbon Only Using CSS3

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.
How To Create Depth And A Nice 3D Ribbon Only Using CSS3

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 Create Depth And A Nice 3D Ribbon Only Using CSS3

Download Source
Download Source

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.
How To Create Depth And A Nice 3D Ribbon Only Using CSS3

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.
How To Create Depth And A Nice 3D Ribbon Only Using CSS3

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.
How To Create Depth And A Nice 3D Ribbon Only Using CSS3

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.
How To Create Depth And A Nice 3D Ribbon Only Using CSS3

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).
How To Create Depth And A Nice 3D Ribbon Only Using CSS3

How To Create Depth And A Nice 3D Ribbon Only Using CSS3

How To Create Depth And A Nice 3D Ribbon Only Using CSS3

How To Create Depth And A Nice 3D Ribbon Only Using CSS3

How To Create Depth And A Nice 3D Ribbon Only Using CSS3

Finally, it’s a good idea to validate the code.

W3C Validation

Response: “This document was successfully checked as XHTML 1.0 Strict!”
How To Create Depth And A Nice 3D Ribbon Only Using CSS3

Author: Piervincenzo Madeo

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development.

website design and development

438 Comments

  1. Liam McCabe

    Wow awesome article Piervix, thanks for comparing the effect between browsers, I’m always too lazy to do that :)

  2. amy

    This is an awesome article.. unique! Thanks for sharing great stuff!!!

  3. Smashing Share

    Great tutorial piervix. I always feel to move forward but these older browsers doesn’t allow me :)

  4. Rahul - Web Guru

    These ribbons looks quite nice. I used to do it in my own ways. This looks cool.

  5. lukyzade

    Lol, brilliant, but how exactly did you make the menu links rotated???

  6. Shurandy Thode

    CSS is getting even better! I like the new features I hope other browsers add support asap!

    Voted! Thanks for this brilliant article Pierevix =)

  7. parvez

    WOW Great tutorial!
    thanks man

  8. kennedy

    I never thought of doing it this way. One of the more original articles I have read lately.

  9. Design Informer

    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) :)

  10. Lam Nguyen

    Great tutorial you have here!

    Thumbs-up and more than a digg :))

  11. HB

    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.

  12. Pol

    Love this tut. bookmarked and super useful. thanks for sharing.

  13. Sir Tyler

    Love your website! Everything so so clean and beautiful!

  14. sriganesh

    have to implement this one soon, good article, learnt something new today

  15. Ryan Florence

    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.

  16. Callum Chapman

    Superb post! Bookmarked this for a future post. :)

  17. cchana

    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!

  18. designfollow

    thank for the info.

  19. Anna CNA

    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.

  20. Cool Backgrounds

    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.

  21. Maverick

    wow, this is just brilliant. thanks for this trick.

  22. Dan

    “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.

    • piervix

      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.

      • Johan de Jong

        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? ;)

      • Tung

        Good!!!!

  23. Steve

    SO psyched to finally find a tutorial on how to do this!!

  24. upix

    wow…!
    realy great trick…thanks for share

  25. Vikas ghodke

    Nice tutorial mate. Very well written.

  26. Jacob Rask

    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.

  27. Jordan Walker

    Great tutorial about CSS3 with an elegant solution.

  28. bloglarr

    Great tutorial piervix.

  29. e11world

    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!

  30. tibalt

    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)

  31. web design kent

    Great tutorial / article! Many thanks

  32. Deepu Balan

    Beautiful post piervix. Very interesting, Thanks for sharing…

    -Deepu

  33. lucideer

    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).

  34. sonichtml

    Very Cool
    Thank you for shared..

  35. Xavier

    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;}

    • Rene

      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!)

    • Robbie Deol

      Try this

      .info {padding-top: 60px;}
      .triangle-l {position: absolute;}
      .triangle-r {position: absolute;top: 65px;}

  36. jakob

    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.

  37. Mark James

    Nice post, never seen it done that way before!

  38. Munki

    Awesome article. Quality. Saved to Stumbleupon and hope to use it in my next design. Thank you.

  39. Firdouss

    That triangle trick is awesome!

    Thank you!

  40. Web Design

    Great tutorial nice explanation
    Thanks for sharing your skills

  41. Kristelvdakker

    hihi IE sucks :P
    But really nice tutorial though!

  42. Malisa

    thnx a lot for sharing this…helped a lot…. :)

  43. Adikara Putra

    Great tutorial… thanks :)

  44. Amy

    its not a good idea to put in empty div tags just for the rendering of triangles…. XHTML-wise, it semantically makes no sense =(

    • oka prinarjaya

      [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.

  45. zsameer

    great information. thanks for sharing.

  46. Avery

    Great tutorial you have here!

  47. Emad Rashad

    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

  48. tdblanchard

    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

  49. Pouya Saadeghi

    Nice trick! &)

  50. Sivaranjan

    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. :)

  51. oka prinarjaya

    [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.

  52. Felix Hirschfeld

    Awesome tutorial man!

    triangle made of borders… *clapping hands*

    BIG THANX!

  53. Rodrigo Gregorio

    add css rules default

    border-radius:…
    box-shadow:…

    and its work fine on Opera 10.6

  54. Deko Web

    realy nice article thank you very much …

  55. louis gubitosi

    very cool tutorial, thanks for sharing!

  56. Steo

    Great job myfriend ;)

  57. Mike

    You don’t need to use the rotate tags… it can still work in IE:
    http://vartandesign.us.to/ribbon/

  58. Graphik Design

    Awesome tips! Thanks for sharing it ;)

  59. apple

    this is very creative tutorial tanks

  60. flying sheep

    if you use css transforms, why don’t you use them for the triangles, too?

    you would get the ability to add shadows:

    look:
    http://red-sheep.de/webdesign/bubble.xhtml

  61. Aj

    Wow this is a super nice tutorial. And it even works in IE8! Awesome job. CSS3 is sooo much fun.

  62. Michael Somerville

    Awesome, I just spent 2 hrs looking around the web for a how to and shambambo your site pop’d up! Awesome .. thanks again for the information ..

  63. Suklang Malayon

    Love it, simple and effective!
    Super thanks.

  64. kenichifc

    thanks for tutorial. Love it, simple and effective :D

  65. UPS

    i found out:) Thank you for your article.

  66. Brick making machine

    Thanks for sharing your article. I really enjoyed it.

  67. Rahmat

    really really nice!
    but some features are easier in css3

  68. Yashwanth

    cool……thanks for sharing.

  69. Cgbaran

    Great tutorial thanks

  70. Rapidshare Videos

    doors.txt;5;10

  71. Jennifer Neuenswander

    wow, great site, will be returning for much further reading to gain more info on this subject. Thanks – keep up the great work!

  72. Buy Links

    This Blog is going places, the people, the layout, amazing to see such dedication and focus.

  73. Verla Servidio

    Thanks for the excellent writing. It is nice to finally read someone that can entertain with words.

  74. fab

    Thanks a lot! Inspired by this article I wrote a generator for CSS ribbons like this that might be of interest:

    http://www.css3d.net/ribbon-generator/

  75. Kathy Renner

    Good tips about dogs. I have an 8 yr old golden retriever and I love him to death. Will come back for sure! .

  76. earn money through internet

    Super-Duper website! I am loving it!! Will come back again. I am taking your feeds also

  77. Block machine

    Thanks for you to share this.

  78. http://www.webdesignerwall.com/page/7/?option=com_weblinks&Itemid=23

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  79. http://vectortuts.com/articles/web-roundups/60-free-vector-graphics-for-digital-art-pros/

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  80. Comment Maigrir

    I’ve regularly believed that the best approach to loose weight rapidly would be to just simply reprogram your diet and lifestyle. What I really mean is, should you actually want or must eliminate several pounds, then you’ve to make one fundamental decision – am I going to do this or aren’t I? Once you’ve made your mind up, and you are entirely commited to your success, then next to nothing can stop you.

  81. tipLeteOpebrA

    Directory of restaurants organized by states Bonefish Grill – South Tampa

  82. general car insurance

    After study just a few of the weblog posts in your web site now, and I actually like your method of blogging. I bookmarked it to my bookmark website record and will be checking back soon. Pls take a look at my website as nicely and let me know what you think.

  83. Victoria

    Thank you for a great tutorial.
    The comments got me curious,
    I’m guessing that the “Emad Rashad” comment is spam, and now I just have to see if you accept all comments or actually check them all.

    Any chance you’de let out this tutorial under CC for educational purposes? :D

  84. car insurance in florida

    This website is really a stroll-through for all of the data you wished about this and didn’t know who to ask. Glimpse here, and you’ll definitely discover it.

  85. Misael Juvenal

    very nice

  86. Cristin Hahne

    thanks a lot man

  87. acheter duphaston en ligne

    You catch more flies with honey than with vinegar

  88. wva

    Very nice effect, would be even better if you can use a shade for the ribbon

  89. Maria Jukes

    The new Zune browser is surprisingly good, but not as good as the iPod’s. It works well, but isn’t as fast as Safari, and has a clunkier interface. If you occasionally plan on using the web browser that’s not an issue, but if you’re planning to browse the web alot from your PMP then the iPod’s larger screen and better browser may be important.

  90. xbox 360 destravado venda

    Pretty section of content. I just stumbled upon your blog and in accession capital to assert that I get in fact enjoyed account your blog posts. Any way I’ll be subscribing to your augment and even I achievement you access consistently quickly.

  91. minnie

    another Facebook co-founder, have donated $170,000 in support of California Proposition 19, a pro-pot measure.flat die pellet mills
    small pellet mill
    hammermill supplier

  92. Dan Voshell

    thats a good article. Thank you i wish your article will be continue.

  93. hebegubele

    I appreciate the info shared here. Please keep up the good work. Best wishes to you..

  94. e-cigarette + 7 cartridge pack

    Love thy neighbour as thy self

  95. alldeals

    i can recommend that too

  96. Tyson F. Gautreaux

    Hey There. I found your blog using msn. This is an extremely well written article. I will be sure to bookmark it and come back to read more of your useful information. Thanks for the post. I’ll certainly comeback.

  97. cheapest-oem-software

    All you need is love

  98. Mora Manche

    hi, good post. Pleas comment my paypal poker www.

  99. zero friction marketing

    All I can state is, I’m not sure what to comment! Except certainly, for the amazing tips that are shared on this blog. I can think of a trillion fun approaches to read the posts on this site. I think I will at last take a step utilizing your tips on those issues I could not have been able to take care of alone. You are so considerate to let me be one of those to benefit from your useful information. Please realize how considerably I am thankful.

  100. comprar caneta espiã

    Hello There. I found your blog using msn. This is a very well written article. I will make sure to bookmark it and come back to read more of your useful info. Thanks for the post. I will certainly return.

  101. kann man filme downloaden

    Love is blind

  102. Look At TV Online

    Can I just say what a reduction to search out somebody who truly knows what theyre talking about on the internet. You positively know the right way to carry an issue to light and make it important. Extra people must read this and perceive this side of the story. I cant imagine youre no more popular because you definitely have the gift.

  103. Problems During Pregnancy

    how to get pregnant fast?

  104. free sex videos

    awesome, just pure awesome

  105. EzineArticles

    Wow! Thank you. I always wanted to write in my site something like that. Can I take part of your post to my blog?

  106. Apple iPod shuffle 2 GB Blue

    I found your blog website on google and verify a number of of your early posts. Proceed to maintain up the excellent operate. I just additional up your RSS feed to my MSN Information Reader. Searching for forward to studying extra from you afterward!…

  107. Minky fabric

    It’s a really good article from you

  108. Minky dot fabric

    It’s a really good article from you

  109. how will clomid affect normal ovulation

    You sure do know what youre talking about. Man, this blog is just great! I cant wait to read more of what youve got to say. Im really happy that I came across this when I did because I was really starting to get bored with the whole blogging scene. Youve turned me around, man!

  110. Common Symptoms Experienced During Pregnancy

    there is something wrong here right now

  111. belly bands for pregnancy

    lazy boy, lazy lady, lazy girls, lazy men

  112. scrapebox

    There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM

  113. Monica Atee

    An interesting discussion is worth comment. I think that you should write more on this topic, it might not be a taboo subject but generally people are not enough to speak on such topics. To the next. Cheers

  114. tankyek

    Your house is valueble for me. Thanks!…

  115. indo online

    After examine a number of of the weblog posts on your web site now, and I really like your manner of blogging. I bookmarked it to my bookmark web site checklist and will probably be checking back soon. Pls try my site as properly and let me know what you think.

  116. mariage civil

    We would like to thank you again for the wonderful ideas you gave Jesse when preparing her post-graduate research in addition to, most importantly, regarding providing the many ideas in a single blog post. If we had been aware of your web page a year ago, we may have been saved the useless measures we were having to take. Thanks to you.

  117. Best Way to Lose Weight

    I think your post was interesting. I will visit often!!! I am going to visit again later.

  118. Luigi Fulk

    This blog post receives a thumbs up from me.

  119. Monica

    This web site is really a walk-through for all of the info you wanted about this and didn’t know who to ask. Glimpse here, and you’ll definitely discover it.

  120. Free professional website builder

    interesting technique, thanks for the detailed lesson

  121. berita

    I am usually to running a blog and i actually recognize your content. The article has actually peaks my interest. I’m going to bookmark your website and preserve checking for brand new information.

  122. ikan

    There are some attention-grabbing time limits on this article however I don’t know if I see all of them center to heart. There may be some validity however I’ll take maintain opinion till I look into it further. Good article , thanks and we wish more! Added to FeedBurner as effectively

  123. bridesmaiddresses

    Being a bridesmaid is an honor and a responsibility. Bridesmaids support the bride emotionally, help with wedding planning tasks of all sorts, and can bear a significant financial burden.

  124. porno

    Hi all, I am a frequent user of your site and I love it. I decided to start your website and would like to commend powiekszanie penisa . I hope you too… tony

  125. scrapebox list

    Thank you for taking the time to write this!

  126. Bao Barbini

    How often are you updating your posts lately? Do you stick to a pretty good blogging schedule?

  127. Marlyn launch x431

    Greetings! This is my first visit to your blog! We are a team of volunteers and starting a new initiative in a community in the same niche. Your blog provided us useful information to work on. You have done a marvellous job!

  128. Agripina Krallis

    Wow great post I love it.

  129. Deane Mcfall

    Wow great post I love it.

  130. googlepeoplesearch

    Thanks for the info on style.css 3D, this is not easy, I just did it on text editor and it works, thanks, I will try it live.

  131. Discount Gucci Sneakers

    Great article. I particularly like the giant facemask, and I’m surprised that Belichek hasn’t tried it already.

  132. Manny

    nice one thanks for sharing.

  133. Bronx Bankruptcy Lawyers

    I’m always looking for these kinds of posts but its not easy to find such good information.

  134. biomass boiler steam

    How does biomass work?

    biomass boilers and stoves work simply by burning renewable sources of fuel like wood to produce heat that can heat either a single room or a whole building. biomass boilers are totally carbon neutral, as long as the fuel is sourced from sustainable forests, because the CO2 given off by the burning of wood is equal to that of the CO2 absorbed from the atmosphere by the tree over its lifetime.

  135. yiğit

    thank you admin I love you blog

  136. monico

    We would like to thank you again for the wonderful ideas you gave Jesse when preparing her post-graduate research in addition to, most importantly, regarding providing the many ideas in a single blog post. If we had been aware of your web page a year ago, we may have been saved the useless measures we were having to take. Thanks to you.

  137. monico

    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. Thanks to you.

  138. monico

    Hmmm… Nice informations.. But i have some questions. But i cannot want to ask it you because i dont know so good everything. Anyway the world is beatiful. People is beatiful everyone is beatiful for me thanks..

  139. Brett Widmann

    I really enjoyed this article. Thanks for the help. I really like how the ribbons look.

  140. Carteras

    I seem to be having a bit of an issue. I’ve managed to get the tooltip to sit where I want it to in most browsers other then IE9!!

  141. sildenafil citrate softsules

    viagra zoloft

  142. search engine optimization specialist

    great article -enjoyed ita lot – thanks

  143. Assasins Creed

    A very helpful post. Favourited for future reference

  144. puma

    Fantastic text message as well as great blog.

  145. miss facebook

    Hmm it looks like your website ate my first comment (it was extremely long) so I guess I’ll just sum it up what I wrote and say, I’m thoroughly enjoying your blog. I too am an aspiring blog writer but I’m still new to the whole thing. Do you have any helpful hints for novice blog writers? I’d really appreciate it.

  146. memurlar

    really good and usefull article. thanks man

  147. georgetown youth baseball

    this site can make anybody as a pro

  148. Anonymous

    Thank you for this tutorial!

  149. karen

    Thanks so much for sharing this post. I like it very much.
    http://www.pelletmill.com

  150. pelletmill

    It’s very glad to read that,thanks.

  151. yiwu sleepwear

    In a letter to the nation’s promotional products second-largest cigarette maker, promotional items the group said Reynolds’ “Break Free Adventure” campaign has substantial youth appeal and may encourage underage tobacco use.

  152. yiwu puppets

    For over 8 years I practice daily reading, I love to read blogs or articles like this, with issues of public concern and a very effective and accurate information. I would say goodbye by making clear that section is spectacular and I would like to receive much more information.

  153. Stephen

    Superb tip! Am developing my site to have a single graphic (the logo) only, so this is a great way to add some style without extra overhead.

    Note it is possible to implement this using the :before and :after styles like as :

    .rectangle:before {
    content: ‘.’;
    text-indent: -9999px;
    … …
    }

    Then you don’t even need to modify the markup.

    Awesome!

  154. Stephen

    … which doesnt work very well in IE.. Even IE 8..

    grrr..

  155. Aaron

    Genius!

    Thanks for sharing this fine piece of work.

  156. Andrew

    This is a really lovely tutorial, but I had a question about box-shadow. Is it just me or your browser really lags when scrolling websites which use box-shadow heavily? For example ,there’s this new skin on Blogger which uses box-shadow around the whole content container. When I scroll there, especially if the blog has a photo background, it gets really really slow.

    Due to this reason I’m hesitant to use the fancier CSS3 features since using a .png image seems to render way faster than using box-shadow.

  157. Website Design Buffalo

    The catchy blog with the interesting contents. You give the nice information. most of your contents are make me have more knowledge. it is very different. I was impressed with your blog. Never be bored to visit your website again. Have the nice day. Keep enjoyed your blogging.

  158. memur alımı

    thanks a lot for this article, it is very good

  159. Article Directoy

    This is a really good idea and tutorial. It is a very good way to remind site visitors of some important ways to stay connected, or to simply give out information that demands attention.

  160. ishaan

    nice tutorial, thanks for sharing it and i like your style.

  161. Sebastian Hall

    I used some of these things on my site.

    However, the border (triangle classes) are in different places in Firefox, Opera, Chrome etc.

    I used this to target Firefox specifically. Is there a way to do the same with Opera? Chrome looks fine.

    @-moz-document url-prefix() {
    .triangle-r
    {
    code
    }
    .triangle-l {
    code
    }
    }

    • Armin

      The answer of your question is already in the comments

      lg

  162. ash pumps

    I love your blog.. very nice colors & theme. Did you make this website yourself or did you hire someone to do it for you? Plz reply as I’m looking to create my own blog and would like to find out where u got this from. many thanks.

  163. porno

    thanks nice pictures

  164. molle pack

    I do accept as true with all the ideas you have offered to your post. They are really convincing and can certainly work. Nonetheless, the posts are very quick for newbies. May just you please extend them a bit from next time? Thanks for the post.

  165. facebook

    However, the border (triangle classes) are in different places in Firefox, Opera, Chrome etc.

  166. yiwu

    I seem to be having a bit of an issue. I’ve managed to get the tooltip to sit where I want it to in most browsers other then IE9!!

  167. Adidas Originals shoes

    Close your eyes, I see my future……

  168. fieldrunners hd

    Thanks i love your article about 301 Moved Permanently

  169. Air Max 180

    Abundant site! I light on here all of the rhythm! Hoard up up the terrific urge a exercise!

  170. Evangeline Kreck

    This is a really good read for me. I don’t really have a bunch to say in response. I just wanted to comment to reply “well done”. It seems like you’ve put a ton of effort into your blog, and I thank you for that.

  171. Misha Moravick

    A lot of my stress comes from money and credit reports, just use this site for unlimited access to your credit report http://bit.ly/qJztzn

  172. weddings

    I will be back soon and follow up with a response.

Trackbacks

  1. R

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US