Tutorial Details
- Difficulty: Beginner
- Estimated completion time: 5 mins
- Topic: CSS3
Final Product What You'll Be Creating
Take one line of markup, a couple of CSS3 rules (no images), and you can have yourself a swish folded ribbon effect in five minutes. Let’s see how..
Step 1: Markup
We’ll begin with an empty HTML document; doctype, charset declaration, head, body, the usual suspects. You’ll also notice we’re linking to the Google Web Fonts API so we can make use of the pleasantly decorative Montez typeface.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Swish CSS3 folded ribbon effect.</title> <link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'> </head> <body> </body> </html>
Now we’ll add our ribbon element. That’s right, one element, that’s all we need. In this case we’re using an h1 header:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Swish CSS3 folded ribbon effect.</title> <link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'> </head> <body> <h1 class="ribbon">Swish CSS3 folded ribbon effect.</h1> </body> </html>
Step 2: Stir in Some Style
Open up a new CSS file, link to it in the head of your document, then jump into adding some styles.
html {
background: url(black-linen.png); /* Black Linen http://subtlepatterns.com */
}
body {
margin: 0;
padding: 100px 0 0 0;
}
.ribbon {
padding: 0 25px;
height: 80px;
background: #c94700;
color: #301607;
position: relative;
float: left;
clear: left;
font-family: 'Montez', cursive;
font-size: 32px;
line-height: 80px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
We’ve started by styling the html and the body, just for the purposes of the demo (and yes, I’ve used an image for the background, but the ribbon itself is 100% image free).
Then, we turn our attention to our ribbon element. We give it some padding left and right, but we’re quite specific about the height (in this case 80px) as we’ll need to replicate that for the folded-up end later. We also specify the line-height as 80px so that the text is centered vertically on the ribbon. We float and clear it left so that we can display several along the edge of the page if we want to.
Note: If, for whatever reason, you don’t want to float your ribbon, give it a display: inline-block;. This will cause it to be handled as an inline element (it won’t fill up its parent), whilst at the same time behaving like a block-level element, allowing you to define width, height, padding, margins etc.
Looks nice enough already, eh?
Step 3: The Fold
We’re going to add the fold by targeting the ever-popular :after pseudo-selector. Here he is..
.ribbon:after {
content: "";
display: block;
width: 40px;
height: 0px;
position: absolute;
right: 0;
bottom: 0px;
z-index: 20;
border-bottom: 80px solid #de6625;
border-right: 80px solid transparent;
}
See it?
So what exactly is that odd blade-like thing we’ve just made, and how does it help us? It’s a border, the bottom border of our :after pseudo-element, which we’ve made 80px in thickness to match the height of our ribbon. We’ve sliced off the edge of it at 45° by defining the adjacent right-border and giving that a deliberate transparent background (not an uncommon trick). We’ve given it a width of 40px which determines the rectangular end. A diagram will make that clearer:
How our element is constructed
Step 4: Tables Turn
Having built our foldy-bit, we now need to pivot it on its end. To do that we’re going to employ CSS3 transform properties and rotate it, like this:
Where would the world be without diagrams?
By default, applying a rotation to the element will spin it round a central axis – we need to turn it around its bottom right point, that’s why we positioned it at the bottom right of the ribbon.
Here’s the updated syntax, with a whole pile of vendor-specific rules to make sure all possible browsers are catered for:
highlight="41-50"
.ribbon:after {
content: "";
display: block;
width: 40px;
height: 0px;
position: absolute;
right: 0;
bottom: 0px;
z-index: 20;
border-bottom: 80px solid #de6625;
border-right: 80px solid transparent;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: right bottom;
-moz-transform: rotate(90deg);
-moz-transform-origin: right bottom;
-o-transform: rotate(90deg);
-o-transform-origin: right bottom;
-ms-transform: rotate(90deg);
-ms-transform-origin: right bottom;
transform: rotate(90deg);
transform-origin: right bottom;
}
Each transform:rotate property twists our object 90°. Each transform-origin property states that it’s to be rotated around the bottom right point.
So, how’s it looking?
Sweet!
We have ourselves a simple, yet effective ribbon, which will happily render in the following browsers:
- Firefox 3.5+
- Opera 10.5
- Safari 3.1+
- Chrome
- IE9
Anything below IE9 will currently come unstuck with the CSS3 transformations we’ve applied, but there is a workaround in the form of MS filters. I’m not going to delve into filters here, but if you need to cater for IE4 or above, then check out CSS3 Please! to see a neat example of them in action.
Step 5: Dark Shadows Falling
To add some dimension to the effect, let’s place a shadow under the flap-thing (I still don’t know what to call it).
It couldn’t be easier, we’ll use the :before pseudo element of our ribbon and repeat more-or-less what we did for the :after; create a black version of the shape, rotate it slightly less, and make sure (using z-index) that it’s placed under the original.
.ribbon:before {
content: "";
display: block;
width: 40px;
height: 0px;
position: absolute;
right: 0;
bottom: 0px;
z-index: 10;
border-bottom: 80px solid #000000;
border-right: 80px solid transparent;
-webkit-transform: rotate(80deg);
-webkit-transform-origin: right bottom;
-moz-transform: rotate(80deg);
-moz-transform-origin: right bottom;
-o-transform: rotate(80deg);
-o-transform-origin: right bottom;
-ms-transform: rotate(80deg);
-ms-transform-origin: right bottom;
transform: rotate(80deg);
transform-origin: right bottom;
}
Here’s what we get:
Step 6: Subtle, Real Subtle
Probably best we tone down the effect of that shadow by shortening it and playing with its opacity.
.ribbon:before {
content: "";
display: block;
width: 20px;
height: 0px;
position: absolute;
right: 0;
bottom: 0px;
z-index: 10;
border-bottom: 80px solid rgba(0, 0, 0, 0.3);
border-right: 80px solid transparent;
We’ve swapped out the border color of #000000 for its RGBA equivalent, which (again) is fine for all aforementioned modern browsers including IE9. If you want to cater for earlier versions of IE then you’ll once again need to apply the effect using MS filters. The following snippet is an example of doing so:
/* required to trigger hasLayout for IE 5, 6, 7 */
zoom: 1;
/* and this makes the whole lot 30% opaque */
filter: alpha(opacity=30);
Let’s also add a similar drop-shadow to the ribbon itself..
.ribbon {
padding: 0 25px;
height: 80px;
background: #c94700;
color: #301607;
position: relative;
float: left;
clear: left;
font-family: 'Montez', cursive;
font-size: 32px;
line-height: 80px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-moz-box-shadow: -7px 7px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: -7px 7px 0px rgba(0, 0, 0, 0.3);
box-shadow: -7px 7px 0px rgba(0, 0, 0, 0.3);
}
..which gives us this:
Step 7: Highlight
We’ve built an effective ribbon and you may well want to use it just as it is. Before we call it a done deal, let’s just look at a couple of additional touches.
.ribbon {
padding: 0 25px;
height: 80px;
color: #301607;
background-color: #c94700;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c94700), to(#b84100));
background-image: -webkit-linear-gradient(top, #c94700, #b84100);
background-image: -moz-linear-gradient(top, #c94700, #b84100);
background-image: -ms-linear-gradient(top, #c94700, #b84100);
background-image: -o-linear-gradient(top, #c94700, #b84100);
background-image: linear-gradient(top, #c94700, #b84100);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
Here we have a subtle gradient fill on the ribbon, complete with various vendor prefixes and the background-color fallback for non-supporting (-IE10) browsers. We’ve also added a flash of highlight to the bottom of the ribbon with a light border.
.ribbon:after {
content: "";
display: block;
width: 40px;
height: 0px;
position: absolute;
right: 0;
bottom: -1px;
z-index: 20;
Having added a border, we’ve effectively made the ribbon 1px higher, so we need to bump the foldy-thing down a tad.
Step 8: Final Flourish
If you want to go really crazy, why not soften up the fold itself? It’s easily done with an uneven rounded corner and a bit of positioning adjustment.
border-bottom-right-radius: 20px 5px;
That’s the rounded corner
bottom: 4px;
bottom: 4px;
And that’s the foldy-bit, plus shadow, lifted slightly to account for the alteration.
A subtle, yet effective bend in the ribbon
Conclusion
That’s it! There’s nothing else to say – try it and let me know what you think. As always, thanks for following along!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Sign up now!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Woah, that’s just amazing.
Thank you for this tutorial, that’s simply enlightening! I think i’m going to love CSS3 :)
I don’t get why we need to rotate the :after pseudo element. Why not just use the left border and put the bottom border transparent?
That’s a very good point Ninique, and that’s actually how I did it to begin with.
My choice came as a result of the positioning – it doesn’t matter how wide or high the :after and :before pseudo elements are, my way has them always positioned bottom right. If they were built as you’ve suggested they would need a negative position value, equal to the border-width, to shove them outside the ribbon:
right: -160pxA matter of preference though – thanks for the comment!
Hallo,
thats great CSS3 rocks. Thank you :)
Great tutorial, nice mix of new CSS3 properties.
I seem to have a slight graphics error, Running Windows 7 with FireFox 6.0:
http://img192.imageshack.us/img192/4820/tutspluscss3foldedribbo.png
I know it hard to get new CSS3 designs perfect in every browser but thought it was worth mentioning.
-FireDart
Good spot @FireDart, that’s happening in FireFox once the shape is rotated (?)
To avoid this, using @Ninique’s approach would work more effectively as the shape wouldn’t need rotating. Cheers :)
I agree with Ninique!
One more thing I thought would have even added an extra awesomeness If the background would have been CSS3 too.
I have created some,
http://www.alldesignstuffs.com/wp-content/uploads/examples/Understanding_CSS3_Gradients_and_Examples_of_CSS3_Gradient_Backgrounds/Understanding_CSS3_Gradients_and_Examples_of_CSS3_Gradient_Backgrounds.html
Let me know your thoughts!
By the way awesome output!
I posted something it didnt post….
anyways here it is again in simple post…
FF6,Safari 5.1, Google 12.xxx.xxx+
there are some issues with FF6, Safari5.1
http://i218.photobucket.com/albums/cc65/crusader208/Swishribbon.png
OS:win7
Yep, FF seems to be having some rendering issues with the transform.. Not sure what you’re referring to with Safari though (?)
Anyway, I’ve updated the preview and the source to include a solution (what @Ninique was talking about). Thanks!
amazing tutorials..thanks!
Took me a moment to realize that in order to get the rounded border to work on Firefox, you had to add the line:
-moz-border-radius-bottomright: 20px 5px;
above the line:
border-bottom-right-radius: 20px 5px;
Sorry Jim, I perhaps should have mentioned that. For Firefox 3.6 and lower you’ll need the
-moz-vendor prefix. For Firefox 4+ you’ll be fine without it.It’s perhaps also worth mentioning that nearly 70% of Firefox users have already updated to v4 or above. Not bad..
IE8? Okie so we’re building for Chrome and Firefox now. Must remember to forget anyone else in the future lol. Nice tut though
Come on Alistair, do I really need to bring up the usual “push CSS3 features otherwise they will never improve, get proposed, or reach recommendation anywhere” blurb?!
thanks for the tuts, i use it in my sidebar title..looks great..but maybe i’ll change the color…it’s that okay..?
Great tut as usual, thanks!
Thats very nice indeed. Still quite annoying a few browsers don’t support html5/css3 yet (and people that still use out of dated browser versions).
great idea…
but it will not work fine with ie7 and ie8 right?
Nope – neither can deal with the transformations, though you should be able to get something that resembles the effect in step 4 if you use the secondary approach (see demo).
I used this effect on a site that I recently launched. The client loves it after installing Chrome…
Thanks for the web design tut.
That’s an awesome article I love how imaginary your mind is ! keep it up !
confusing!! making much more complication.
This is brilliant css3 and html5 is really amazing theres soooooooo much you can do but one thing that’s bothering me as a web designer is that it does not work in IE so what’s the use learning css3 and html5 if its not compatible friendly? Is there a hack you can use for every style or what?
There’s no reason whatsoever for not using HTML5 markup these days. It’s uncomplicated, more semantic than its predecessors, and clear as a bell to read in source code. Using HTML5 Shiv will get you round any issues with less-cooperative browsers (IE) being unable to process it.
As far as CSS3 techniques go, you should definitely use them! If we were all satisfied with the lowest common denominator then techniques wouldn’t be improved, developed further, or ultimately standardized. There are hacks and ways of degrading your effects gracefully to ensure that users of weaker browsers still enjoy an optimized experience.
Thanks for your comment!
very helpful.thanks a ton for sharing with us.
The web world must be in its prehistoric stage since a simple turn of a ribbon requires so much code
It was great tutorials which is explained well with an DEMO i always like your post
It was great tutorials, css3 is looking fantastic so far
Impressive css3 tutorial and technic, Thank you.