Subscribe by Email

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.

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.

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.

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.