You may already know what a ribbon is and how it looks. Nowadays, the CSS ribbon effect is a web design trend. It’s cool and it can help you by adding a 3D effect to your design.
So, in this article you’ll learn how to create CSS ribbons, without any images and minimal HTML markup.
Why would I need CSS ribbons?
As a matter of fact, you could just use images for your ribbons. But, using CSS to create the ribbons has the following advantages:
- No images, no extra HTTP requests
- Easy to update: color, size, etc
- Spice up the ribbons with CSS3 and you’ll love them ;)
CSS ribbon structure
Initially, let’s say you have a wrapper with
padding: 20px. What is about with this
padding? Usually, you need a spacing for your box and you’ll see below why this matters when it’s about ribbons.
Now let’s add the element that will become our ribbon. For that, you will need just one element, like a
h1 for example:
H1 element with some styling
Remember the above
20px padding value? In order to build your ribbon, you need the heading to overcome the box sides:
Further, to add the corners, we’ll use CSS triangles made with pseudo-elements.
Using the above CSS, you will achieve something like this:
IE6 and IE7 does not support pseudo-elements but, if you need them also, just replace the
:after with HTML elements like
span. That should do it for you in this case!
IE8, IE9, IE10, Firefox, Opera, Chrome and Safari render well the ribbon. There are some minor differences, but just because of incomplete or missing CSS3 support. Guess who!?
Thanks for reading this article!
If you enjoyed this article, tweet it and/or follow me!