How to make an RSS icon of any color using one image

In this article I will tell you how to make an RSS icon of any color, using just one image.

The idea is to use an element, the background of which will be a picture in .png format, and the background color of the element will be the color of our icon. We will take exactly the png image to use the property of preserving the transparency of this format.

Our icon will look like this:

I specifically made a black backing so that the picture does not merge with the white background. The original can be taken here .

HTML code:
')
CSS:

a.rssicon32 {
display:block;
width:32px;
height:32px;
background:#ff6600 url(rss32.png); /* */
}

a.rssicon32:hover {
background-color:#0096ff; /* , */
}

The result can be seen here.

The following code is used for correct display in IE6:

* html a.rssicon32 {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='rss32.png', sizingMethod='scale');
background-image:none;
}

Undoubtedly, this presentation of RSS icons will attract the user. For greater effect, you can do something similar to how the logo is illuminated on the site of the Artemy Lebedev studio - hover over the “barcode” logo on the right side of the site several times.

However, in our implementation there are downsides: search engines will not see the picture and the link does not have an anchor. Let's fix it. To do this, we will use one of the tricks for replacing an image with text , for example, use the text-indent property and set a negative value for it:

text-indent: -9999px;

Well, now the search engine will read our link with anchor, and externally, this does not harm our icon.

via Onyx Design Blog
Cross Post Blog for Webmasters