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.
- BROWSE / IN TIMELINE
- « Make your site cross browser compatible in 5 steps
- » Nice Drop caps with CSS
- BROWSE / IN CSS Featured
- « Make your site cross browser compatible in 5 steps
- » Nice Drop caps with CSS
