CSS3 3D Ribbons using 2D Transforms
On This Page:
<> It's a 'trend' of the moment which seems to be fading slightly but you probably won't be able to go a day, let alone an hour, without seeing some form of 'ribbon' being employed in the design of a website.
These are usually created with graphics software such as Photoshop or Fireworks but with the modern browsers of today and the great tools that we can use within the CSS3 spec we are able to create this effect using just the code.
I got inspired to try this out by two things. First was a post from PVM Garage showing you how to add a nice 3D ribbon to your page using CSS3. I thought this was really good but I wasn't happy with the 'tag soup' that was being used to get the effect working. I then, through Twitter saw that Matt Hamm had created some cool CSS3 box-shadow page curls and seeing that he was using the :before and :after elements attempted to recreate the 3D ribbon with just one DIV.
I posted a whole page in my back stage area where I will be putting all of my 'experiments' in the future (note, this whole site is a in current state of 'work in progress').
Then the latest copy of .net (issue 212) and there was a tutorial for 3D ribbons using CSS like the PVM Garage example I thought I'd better create a 'proper post' on what I did just after Christmas 2010.
The code below would create something along the lines of what is shown in the image above. As you can see on the backstage page there are some more examples of what is possible using CSS3 2D transforms, box-shadow, rounded corners and CSS :before and :after elements.
HTML
<!doctype html>
CSS
#ribbon {
position: relative;
top:40px;
left:-20px;
width: 960px;
height:100px;
background-color: #999;
float: left;
-webkit-box-shadow: 0px 0px 2px #000;
-moz-box-shadow: 0px 0px 2px #000;
box-shadow: 0px 0px 2px #000;
border-bottom: 1px solid #000;
}
#ribbon:before {
z-index: -1;
position: absolute;
top:10px;
left:0;
width: 20px;
height: 101px;
content: '';
background-color: #444;
-webkit-transform: skewY(45deg);
-moz-transform: skewY(45deg);
-o-transform: skewY(45deg);
transform: skewY(45deg);
-webkit-box-shadow: inset 1px -1px 3px #000, 1px 1px 3px #000;
-moz-box-shadow: inset 1px -1px 3px #000, 1px 1px 3px #000;
box-shadow: inset 1px -1px 3px #000, 1px 1px 3px #000;
}
#ribbon:after {
z-index: -2;
position: absolute;
top:10px;
right:0;
width: 20px;
height: 101px;
content: '';
background-color: #444;
-webkit-transform: skewY(-45deg);
-moz-transform: skewY(-45deg);
-o-transform: skewY(-45deg);
transform: skewY(-45deg);
-webkit-box-shadow: inset 1px -1px 3px #000, 1px 1px 3px #000;
-moz-box-shadow: inset 1px -1px 3px #000, 1px 1px 3px #000;
box-shadow: inset 1px -1px 3px #000, 1px 1px 3px #000;
}
