The other day I was thinking that I quite liked these little ribbon things that people add to their images, so I put together this little tutorial on how to make your own. I came up with a few ideas, but they honestly didn’t look right without the use of images. This CSS only ribbon fits on most images and can be integrated easily into existing code.
Usage
Often these are used for when you want to identify something as ‘new’ or ‘popular’, and they can just clip straight onto most images. All we have to do is create one block for the text, rotate it, and then use two triangle borders to create the clip on effect. This will all take place within a div
.
HTML
So this is what the code is going to look like. It’s not that hard, so it shouldn’t be difficult to implement.
<div class="side-corner-tag"> <img src="1.jpg" alt="" /> <p><span>newest</span></p> </div>
Pretty simple. It’s best to keep markup to a minimum when creating these CSS effects, because it can be ever so complicated otherwise. We can usually fill in the gaps with :before
and :after
anyway. Lets take a look at the CSS.
The CSS
So we want to remove any overflow and add some padding to our main div. This is the crux of our effect. We also need to add some font properties, and change the display to inline-block
.
.side-corner-tag { position: relative; color: #fff; display: inline-block; padding: 5px; overflow: hidden; font-family: Arial, sans-serif; font-weight: 900; } .side-corner-tag p { display: inline; }
Then we need to style the p
element. This will act as the text area for our tag. We define a width and rotate. 2D Rotates work in the latest versions of all browsers, so support shouldn’t be an issue so roughly 75% of people should be able to view it fine. If you are considering using this you might want to make it display: none
using Javascript or IE specific stylesheets. Then we have to add some padding for room and a little box shadow to give a gradient effect. Don’t forget to position it on the correct side.
.side-corner-tag p span { position: absolute; display: inline-block; right: -25px; box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2); text-align: center; text-transform: uppercase; top: 22px; background: #d93131; width: 100px; padding: 3px 10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); }
Finally add some border triangles using before and after, and position them correctly to create the effect that the tag is being folded over the image. Oh and don’t forget to change the z-index
.
.side-corner-tag p:before { content: ""; width: 0; height: 0; position: absolute; top: -17px; right: 69px; z-index: -1; border: 17px solid; border-color: transparent transparent #662121 transparent; } .side-corner-tag p:after { content: ""; width: 0; height: 0; position: absolute; top: 74px; z-index: -1; right: -10px; border: 17px solid; border-color: #662121 transparent transparent transparent; }
Voila! We’re done. Here’s the combined CSS for those of you who are a little bit lazier than most:
.side-corner-tag { position: relative; color: #fff; display: inline-block; padding: 5px; overflow: hidden; font-family: Arial, sans-serif; font-weight: 900; } .side-corner-tag span p { position: absolute; display: inline-block; right: -25px; box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2); text-align: center; text-transform: uppercase; top: 6px; background: #d93131; width: 100px; padding: 3px 10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); } .side-corner-tag span:before { content: ""; width: 0; height: 0; position: absolute; top: -17px; right: 69px; z-index: -1; border: 17px solid; border-color: transparent transparent #662121 transparent; } .side-corner-tag span:after { content: ""; width: 0; height: 0; position: absolute; top: 74px; z-index: -1; right: -10px; border: 17px solid; border-color: #662121 transparent transparent transparent; }
Comments
Great tutorial. I can’t wait until all browsers support css like this.
very nice i’ll try it on my other blog
Thank you, I didn’t know about :after and :before options.
You suggest using display:none for old IE versions, but if you’re prepared to use IE’s old filter style, 2D rotate can be made to work even in IE6.
http://css3please.com/ has the CSS code you’ll need to make it work in IE8.
The wrap-around effect won’t work in IE6/IE7 because they don’t support :before and :after, but with a bit of work you should be able to get it working fully in IE8, which will be a big plus.
It is possible to achieve a similar visual look without CSS3. Still, nice post, very interesting.
.png position:absolute. Done.
use this little CSS3 magic for browsers that support these styles and a .png as fallback solution for browsers that don’t. If you can reduce another http request for the modern browsers, that’s all that matters.
Woha mate, this site is wide as hell..lol btw I think the menu doesn’t look good when you contract the window. Thanks for the tutorial btw and will use it!!!
I happen to take the lazy route and realized you had switched the p and span from the earlier styles and hence it didn’t work for newest. I flipped it and it works now! Thanks so much for the css!
Same here, took me half an hour to track down the issue :]
Nice !
thank you …