<div class="wrapper">
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
FF10 shows the top ribbon-fold encroaching about 1px on top of the wrapper, but I can’t seem to figure out why… Seems like adding
bottom: -2px;
to the.ribbon-green:before
declaration makes it mostly look right, but I can’t quite tell..Me too. Go reference URL. You gonna see it.
So much more flexible than using a static image. Super handy for such a commonly used design element. Very cool!
Very nice approach. I despise having to use images for things like this. Hopefully MS kills off everything pre IE9 soon so we can more effectively use things like this.
Very nice approach. Thank you.
@jordan
I get the px encroach too – in IE9, Chrome 17 & FF 11.
To get rid of the top pixel encroach – here’s what worked for me:
.ribbon-wrapper-green
Change top: -3px; to top: -5px;
Pixel begone!!
this looks very bad in IE. doesn’t look like a ribbon. it’s a square and it moves down my entire page (nav menu, feature box, etc) 3/4 of the way down the page. looks good in ff and chrome though.
thats very nice, thanks !
Thanks Its Amzing
Looks verry nice in all newer Webkit Browser and IE 9. All the other IE Versions doesn’t support this script. =( IE is such a bad thing -.-
This is really nice. I’ll use it soon, who cares about the IE-User :-)
This is a cool effect and anything with no images is your friend!
Eh, who cares about IE anyways? M$ should just suffer for thinking it’s the only entity in the whole universe when its not!
One thing in the example that would be nice is if the math could have been included. I can wiggle it around and get the right settings using firebug but would much rather busting out a calculator and getting the exacts!
Please? b^.^d
beautiful, that was what I needed :)
How can I make the ribbon an active link?
The easiest way to do that would be just to add an `` tag to the ribon. Like this:
`NEWS`
Sorr about that. View it Here.
thanks.. it is very easy to implement :)
Just implimented this today in an e-commerce store project. Depending on the ribbon class, the colors change: RENTAL, ON SALE, NEW, etc. Once again, thanks, Chris!
Hello,
How to adapt it on each corners ? I tried to modify the CSS to put the ribbon on top left corner but without any results :(
Any idea ?
Thanks for this nice CSS.
Fab
@Fab: Did you work this out? If so, please share your code. I would also like to know how to put it in the top left corner.
Any luck?
.ribbon-wrapper-green
change right to left.
.ribbon-green
add float: right;
change left to right
change rotation to -45degrees
That worked, thanks!
Thanks for this Chris.. Much appreciated..
WOAH!! thats almighty Lovely..Thanx
How do you go about making it bigger?
How to make the ribbon on top left corner?
where to set the html in wordpress?*new in wordpress
You can add the css within your WordPress admin area, under Appearance -> Editor, then drop in the HTML directly in your page or post using the HTML tab in the WYSIWYG editor.
I was looking for a clean way of doing something like this without images and works well as a basis for what I need, so thanks!
I use the style like this to set it to the left
I made a smaller sale version in red that is left-aligned. Enjoy :)
This is insane. I know how to use pseudo classess, gradient, opacity, shadow… and thought I knew css3.
Now looking at your code, I know that I know nothing.
Thanks for sharing!!!
Thanks a lot for you piece of code ! It really helped me ! I started making a ribbon with image, but when I saw your code and tried it, I changed my mind !
Thanks again !
Great stuff!
For more smoothing of elements in Webkit-based browsers add this:
Awesome article. You are good.
this is exactly what i am looking for!! it worked for me! thanks!!!!
Bottom-left version
Is there any wordpress plugins that will produce this? What I am looking for is a way to add this into a blog page where the ribbon shows up only on the post excerpts page, where a shortcode can be added when creating the post that would generate the ribbon and text. If anyone knows of this please let me know.
Doesn’t work in IE 8
:(
Only reason to use IE 8 is to download latest Firefox
The ribbon tends to cover up the content under it – Is there a fix for this? Also, it would be great if the code could be cleaned up a little (use only 1 div to display the ribbon instead of 2.)
Does anyone have a link to an example of this being used?
Thanks
Worked like a charm in Rapidweaver 6
Thanks a lot! Works great!
Saved time and lot’s of energy.
@Rafael, @Andrea D
For this to work on IE you’ll also have to include the
-ms-
prefixAll I see is a trapeze polygon rotated at 45 degrees.
That’s 10 seconds of labour using this:
http://www.thebequertools.com/
Thanks.
The ribbon is gone once I resize the browser to a smaller size :( I placed the ribbon inside a div. Any one knows how to fix this?
Thank you, this helped me a lot !
how to add post level(category) as corner ribbon to every post in home page of blogger?
It is really cool. Thank you, it helped me a lot.
Great code. What part do I change to make the ribbons thinner? I’ve tried changing some things here and there but nothing seems to be getting me a thinner ribbon. Thanks.
look for ‘padding’ and reduce the value
eg.
padding: 16px 0;
change to padding: 8px 0;
Woah how the hell did I miss this one?
Thanks a lot :)
Thank you very much. It saved me a lot.
Hi chris i need to display slider image in the static web page please provide me a css code for it..
i am a beginner
Love this you are the best!
I have been trying for awhile to bring this further out thus making the ribbon longer. Any thoughts? I really want to use this! Thanks!