Awesome Collection of Web & Blog Icons

Here is a big collection of over 3000 Web Icons, Psd Icon Sets, Png Files, EPS Files, Web 2.0 Icons, Blog Icons, Blog Chiclets and many more…

Have a look at the screenshot of few of them.

Web and Blog Icons
Web and Blog Icons

Hope you liked this 🙂

Download Files


What is CSS Sprites?

CSS sprites is a technique to create a single image file that contains all the images laid out in a grid, requiring only a single image and only a single server call. It is a technique to decrease the number of HTTP requests made for image resources referenced by our site. It can be very effective for improving website performance, particularly in situations where many small images, such as menu icons, are used. CSS property “background-position” can be used to shift the visible area of the combined image. This technique has also been used on the Yahoo! home page.

Using CSS sprites can reduce the delay for certain events on web pages and making our website perform more efficiently and improving our visitor’s experience. On large sites, every little server call matters. This is one way to reduce server calls while maintaining separation of content from presentation, accessibility, and graceful degradation. Using CSS sprites takes a little extra care and planning. We have to keep track of the pixel position of each sprite, but that’s not much harder than keeping track of the paths for the individual image files this single file will replace.

Using CSS Sprite in web page

<title>CSS Sprite</title>
a#top-left { background: url(‘vikas_sprite.gif’) 0px 0px no-repeat; }
a#top-left:hover { background: url(‘vikas_sprite.gif’) 0px -210px no-repeat; }
a#top-left:visited { background: url(‘vikas_sprite.gif’) 0px -210px no-repeat; }

a#top-right { background: url(‘vikas_sprite.gif’) -130px 0px no-repeat; }
a#top-right:hover { background: url(‘vikas_sprite.gif’) -130px -210px no-repeat; }
a#top-right:visited { background: url(‘vikas_sprite.gif’) -130px -210px no-repeat; }

a#bottom-left { background: url(‘vikas_sprite.gif’) 0px -105px no-repeat; }
a#bottom-left:hover { background: url(‘vikas_sprite.gif’) -0px -315px no-repeat; }
a#bottom-left:visited { background: url(‘vikas_sprite.gif’) -0px -315px no-repeat; }

a#bottom-right { background: url(‘vikas_sprite.gif’) -130px -105px no-repeat; }
a#bottom-right:hover { background: url(‘vikas_sprite.gif’) -130px -315px no-repeat; }
a#bottom-right:visited { background: url(‘vikas_sprite.gif’) -130px -315px no-repeat; }
<div id=”mysprites”>
<a id=”top-left” href=”#”></a>
<a id=”top-right” href=”#”></a>
<a id=”bottom-left” href=”#”></a>
<a id=”bottom-right” href=”#”></a>