<h1 class="ribbon">
<strong class="ribbon-content">Everybody loves ribbons</strong>
</h1>.ribbon {
font-size: 16px !important;
/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
width: 50%;
position: relative;
background: #ba89b6;
color: #fff;
text-align: center;
padding: 1em 2em; /* Adjust to suit */
margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #986794;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #804f7c transparent transparent transparent;
bottom: -1em;
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}Protector
This technique uses negative z-index values on some of the pseudo elements. That means that they can go behind other elements that have opaque backgrounds, which ruins the effect. To fix this, you’ll need to make sure the immediate parent of the ribbons does not have a background applied and has relative postioning with positive z-index. Use an additional wrapper if needed.
<div class="non-semantic-protector">
<!-- ribbons and other content in here -->
</div>.non-semantic-protector { position: relative; z-index: 1; }
good1… i personally dont know anyone who doesnt love ribbons :)
I hate ribbons . Never ever seen them done right. E.g. In this example, where’s the shadow cast by the ribbon?
improvise dude… the tutorial is to show you how to make a ribbon in CSS, not to trick it all out for you. Read into the abilities of the webkit because drop shadowing does not work in all browsers.
add this to your ribbon, it will work in Firefox.. Also, you can change the opacity by adjusting the alpha levels of in the hex.
-moz-box-shadow: 3px 3px 4px #999;
-webkit-box-shadow: 3px 3px 4px #999;
Next time don’t be so quick to run your mouth, this guy is doing all of us web designers a favor by making a nice place for us to reference while developing. Nobody is going to hold your hand while your learning all of these different languages so don’t be so quick to bad mouth the ones trying to help out in the first place.
I love this!!!!
@Chris Howard: This is 7 years too late, but here, a ribbon with shadow. What’s not to love? https://codepen.io/anon/pen/pKpBvr
I absolutly Love this!!
i was having a hard time doing this in photoshop the other week. and im glad there’s a css way too! it is quite a few lines of code. but thank you so much thinking of all this. you really do put a lot of time and effory in your tuts, and screen casts! im truly grateful for everything you’ve done Chris. Thank you
– Attila
Is there a way to make this work in IE 8 and below?
I’m running IE8 and the example here doesn’t work but James’ Reference URL works great…
http://jameskoster.co.uk/blog/pure-css-3d-ribbon/
I quickly compared the CSS but didn’t find anything different…but the solution is there somewhere.
I like this ribbon, sharp edges but the fact that it doesn’t use a graphic is somewhat inspiring. Thanks for sharing.
You can make this work in IE 8 using html5shiv
Wow, thanks for sharing, very interesting to know.. This is really great!
I love the use of the pseudo elements – can’t wait to try and thanks for sharing.
Thanks man,I love it!!
Thanks for sharing.
I’ve tried to do this a few times and wonder how it works in a nav menu as the bar.
Works very well, just implemented the code in a responsive navigation menu made with bootstrap! :D
Hi there,
Love this tutorial. Only thing I can’t figure out is how I can implement it with my wordpress menu?
The menu is build with the following code:
‘header’, ‘container’ => ” ) ); ?>
What I don’t understand is how I can create extra classes to add the css code to?
Greetings,
Jonas
Something went wrong with the presentation of the code. I’ve made a topic in the css forum about this.
Hope someone can help me out?
https://css-tricks.com/forums/discussion/13611/my-wordpress-menu-with-a-ribbon
Jonas Smets
this one works for adding class in wordpress menu
wp_nav_menu( array( ‘container_class’ => ‘menu-header’ etc
tried some other modification for a logo overlapping the ribbon (with navigation) somehow not working for other browser except for Firefox .(without css hacks)
I’m still working on a project with ribbon nav and this tutorial is really helpful.
Credits to the author!
Very cool, didn’t know I could do this in CSS.
But does anyone have a hack for this effect in IE8 and below? Because it isn’t working in those browsers, which means I can only use this on personal projects and not for anything else.
Using this trick to target IE8 and below that I found here:
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
I got rid of the borders that form the points of the ribbon:
border: 0\9; /* IE8 and below */
So now older versions of IE show a plain rectangle, instead of a dismembered pseudo-ribbon. The ribbon still displays as above in all other browsers. It may be boring, but at least it doesn’t look broken.
@Chrizzi That is very helpful, thanks! Good to know this effect can gracefully fall back. Sweet!
Really love this trick!
However I wonder how to create this type of ribbon using CSS:
http://img822.imageshack.us/img822/4185/ribboni.jpg
And could we automatically adjust the ribbon height so that I can type longer/shorter text content without even re-adjusting the css height parameter manually?
http://codepen.io/kayandrae/full/hquJL
I gave your ribbon label a try :)
http://jsfiddle.net/y0ehvok6/
I believe the IE8 problem can’t be fixed, but one thing we can do is set up the ribon the other way, i.e. as if the sides were before the content, not behind.
You can achieve this by simply removing the z-index:-1; line, and replacing
border-color: #804f7c transparent transparent transparent;
bottom: -1em;
with
border-color: #804f7c transparent #804f7c transparent;
top:0;
in the .ribbon .ribbon-content:before, .ribbon .ribbon-content:after {…} declaration
You may also want to set top:1em; on .ribbon:before, .ribbon:after {…}
This way the things doesn’t break if your content goes on two lines
So how would I make a ribbon without the “folds”? I thought of doing a sidebar with a ribbon background for the active page’s link. Something like this shape:
http://www.photoshopstar.com/wp-content/uploads/2008/03/ribbon-filled-yellow.jpg
Or.. how would you make a ribbon with both sides with the same triangular cut?
I’d like to do this with list items, not divs, though. Any ideas?
take a look at jacklmoore site
That’s amazing…I was actually looking for it since two days…couldn’t figure it out with Photoshop..!!!
Thank You..!
Yes i think everybody love ribbon, including me. I wonder How to make this ribbon as a html menu? is it only use href? Thanks.
If you want to use it as an html menu, just embed a
<ul>of your nav inside .ribbon-content. Anyone else having issues with this in mobile? Specifically, thez-indexseems to get ignored, bringing the ends of the banner above the main ribbon. It works great on desktop browsers, but in chrome on my android phone, the corners are on top.Thanks for providing this. I would like to modify this result, but do not understand how it works. A step by step commenting of the css and what each part of it does would be very helpful. Has anyone created those type of comments?
I’m especially confused about the ribbon:before, ribbon-content:before and :after lines in the CSS
thanks
Nice tutorial – I’ve actually created a similar walk-through on my site. However, my ribbon wraps around a box element and has a drop shadow as well. Uses the same :before and :after technique. http://www.designcouch.com/demos/pure-css-ribbon-banner.html
I am new to create ribbon designs in my web pages and this tutorial helped me a lot! Thank you so much! How wonderful your tutorials you are! I salute you!
Smashing! Just the little touch my project needs.
nice article!
I have also written article on ribbons
http://techisquest.blogspot.com/2013/09/css-3d-ribbons-and-stitched-effect.html
Pseudo code e.g (after and before) is not working ie7 and ie8
That non-semantic protector code just fixed an issue I’m having with fancy box-shadows (i.e. lifted corners) using pseudo elements with Foundation 4. They weren’t appearing unless the
<body>and parent container tags both hadbackground:none. Adding{ position: relative; z-index: 1; }to the parent div fixed it. Awesome!For people who still need to target IE8 there is a slightly less semantic approach that will work:
Add a .ribbon-style element before .ribbon-content
Move the styles from .ribbon :before and :after to .ribbon > .ribbon-style:before and :after
Remove padding and background-color from .ribbon and apply them to .ribbon-content
Here is a demo fiddle: http://jsfiddle.net/Sly_cardinal/m8U2t/1/
HTML:
CSS:
Great Article!
I’d like to adjust this example to work with a tables head. Could you help me?
http://jsfiddle.net/qU7Ba/1/
suberb Bro!!!!!!
I see your neat ribbon, I raise you mine : http://cybernext.in/
Check out the ribbon at the bottom.
Because of using
z-index:-1;it neatly fits in below the box-shadow of the parent div.Here’s the code:
Meh. No offense, but there’s a lot of over-design going on there.
None taken. I’ve got a lot to learn..
PS: It’s funny how your comment goes with your picture
Rather I’ll appreciate if you’ve got any tips for that
Vin – nice to see someone open to critique! I tend to not give it unsolicited, as a lot of folks take it personally.
A few tips:
Don’t style the cursor. It’s un-necessary and disruptive to the UX
Avoid un-necessary borders and boxes. Separation of content should be implied by things like white space and content placement, not a literal border
Decoration for the sake of decoration (like the dashed border on your ribbon) is bad design
You’re over-using drop shadows
Don’t center un-ordered lists; bullets should always line up
Learn about and use white space correctly
Your 3d interface is actually quite intriguing, and if done well could be really nice
These are just a few starting points, and are not criticism at all; they’re critique. Wrote an article a while back about this.
Thanks buddy! I’ll take a note of these n definitely update the site whenever I get the time to.
Is there a way to make this ribbon a hyperlink?
I changed:
To:
But this doesn’t work
Just kidding!
Marz, it’s easy:
Put the
<a>tag before the parent element.Change this
to this:
Thanks Chris.
I personally hate ribbons, but clients do love them :)
Easy way to create ribbon, http://codepen.io/jeffpowrs/pen/oaLul
Not bad. Forked yours, and simplified the code quite a bit. I eliminated your span, and the extra associated pseudo-elements by utilizing the content area of the remaining pseudo elements.
Very great tip! Thanks for sharing :) !
This is great! Thanks so much! I was hoping you could help with an issue I’m having animating this ribbon’s position. See my JSFiddle: http://jsfiddle.net/vf75sbgm/
Thanks again!
If I want to use multiples ribbons with different colors, how to switch the colors to each ribbon?
How can I move it down? I want to place it underneath this box but when I try it just disappears.
Screenshot: http://i.imgur.com/lTtuuMa.png
It’s a Z-index (layering) issue, the edges that disappear(go underneath) have a z-index value of -1 and your div box has a greater z-index value. Play around with the z-index and you should get it right. More on z-index: https://developer.mozilla.org/en/docs/Web/CSS/z-index
yupp !! its great
Great Ribbon code. I don’t know if you still check your old articles, but I noticed that when you put the ribbon over a transparent image(regardless of whether you added transparency on the image with CSS or not) The ribbon edges becomes semi-transparent. This happened in the latest chrome version at the time I wrote this
I answered my own question above, its a because of how I set the z-index,.
This code and the mentioned variations can not be used in emails. See: https://www.xc.hu/tmp/ribbon.html
In general, email applications support fewer CSS properties than the average web browser. Here’s a good reference I keep in my back back when building emails: https://www.campaignmonitor.com/css/
Simple, cute, we love it
It’s Awesome…Thank you so much for this example…it helps me a lotttt..
One small thing I didn’t get is by doing border-left-color: transparent; how the shape become triangle?
Hello, Is there an example fo this with an extra div or container that the ribbon ‘wraps’ around so this secondary div can have a background color or image and then the ribbon sits ‘on top’ with the sides overhanging the second div?
Hey! You may need to fiddle with this a bit, but here’s one possible approach: