In this article, I will explain to you how you can make a RSS in every colour using just one image. The trick is a div with a partially transparent icon and the background color you like.
The Idea
The idea is a <div> with a specified width and height (the same as the icon). This icon (you might not see something, because it’s white) is set as the background image of the <div>. You’ll also have to set a background color, that will fill the RSS icon. If you don’t really get it, see this explaining illustration I made.
The Code
For this icon you’ll need the image and some CSS and HTML code:
CSS:
.rssicon32 {
width:32px;
height:32px;
background-image:url(rss32.png);
background-color:red;
}
HTML:
<div class="rssicon32"></div>
I’ve have made an extensive EXAMPLE PAGE, where you can see some of the icons. The image i linked to previously is used on this in three different sizes (16×16, 32×32 and 64×64).
Improving the technique
This technique has a lot of benefits, like you can use the same image for a hover effect, only changing the background color, which makes it quick and light weight. Another benefit is that you don’t need to change the image if you want a new colour. But there are also some disadvantages: this image works only on white and you can say that this technique is less SEO friendly than a regular image.
Making it SEO friendly with CSS image replacement
There is however a simple way to make this technique more SEO friendly. I will be using CSS image replacement. CSS image replacement is a technique often used to display images instead of text in a SEO friendly way. If you, for example use a header image instead of a <h1>-tag, that’s not very good for SEO, but if you replace the <h1>-tag with an image, you’ll have a SEO friendly and nice header. There are several techniques for CSS images replacement and a good overview can be found on CSS Tricks. You can choose the technique which you think is best, but in this case, I’ll go for the negative text-indent. I have added some text inside the div, which is hidden, because of the negative text-indent.
HTML:
<div class="rssicon32">Subsribe my RSS feed</div>
Making it compatible for every background
There is a way to make this RSS icon compatible with every background, but you’ll loose the rounded corners that way. So there are two options: change the colour of the rounded corners manually with photo editing software or drop the rounded corners. Both ways are displayed on the EXAMPLE PAGE.
Conclusion
I really like this technique and the opportunities of it. You make nice visual effects and still it’s very light weight and it will save you bandwidth. If you have something to say about this article, please share your thoughts and place a comment.
- Webmaster Libre | Iconos multicolor con una imagen y CSS
- Iconos multicolor con una sola imagen - Guia Breve
- Блог для вебмастеров » Как сделать RSS иконку любого цвета, используя одну картинку
- farik.in.ua » Blog Archive » Как сделать RSS иконку любого цвета, используя одну картинку
- Cosas pa` decir » Blog Archive » Iconos multicolor con una imagen y CSS
- CSS Tricks und Tutorials | Photoclinique
1
Nice trick, you’ve used some good CSS techniques. But, there’s this little problem… A RSS-Feed icon is supposed to be orange. This is a usability thing: the orange RSS-icon gets recognized immediately, a RSS-icon with a different color takes more time to recognize.
This trick would work perfectly with other kinds of images, but I think it isn’t that useful for RSS-icons.
2
@Bas, thanks for your comment. I think you have made a good point there. I shouldn’t have used to trick for a RSS icon, but it’s about the technique, you can use it for any icon with just one color.
3
Am I also right in saying that IE6 doesn’t support PNG transparency so this technique is not compatible?
4
@ Tim Wardle,
You’re right that IE6 doesn’t support transparent PNG, but there are some fixes for that. For example: http://homepage.ntlworld.com/bobosola/index.htm
You can also choose to use transparent GIF’s instead of PNG.
5
I think I agree with Bas that RSS icons should be orange, but it’s a clever technique nonetheless. You could probably also combine it with any one of the numerous rounded corner techniques to get rid of the background-colored rounding on the image. Specifically the technique at http://blog.yosle.com/2007/09/20/css-round-corners/ . A little dirty semantically-speaking, but it doesn’t require any more images, and it works well for smaller icons.
6
Yeah I would suggest keeping the RSS icon orange but I dont see anything wrong with changing the way it looks slightly to be more appealing to the design.
I have a few examples (Links removed, please don’t post irrelevant links to your own website.)
I do like the technique though as it can really be useful when you have a website with different colours etc and I would not worry about IE 6 too much.
7
@Andrew, Thanks for the idea of using a rounded corners technique to round the borders of the div. I am not going to use the link you gave me though. I think using another image is better than using a bunch of extra code.
8
I really enjoyed your article and the examples. I’m with you it’s better to use another image than all this extra code. I love this kind of solutions because they are pretty simple and clear, adding several non-semantical elements just for rounding some icon’s corners seems a waste of time to me.