Jun 11, 2012

Free Social Network Icons CSS Sprites

Using icons, rollovers in website if a very common practice and it makes the content visually pleasing and at the same time improving the usability of the website. But more the number of pics of icons or rollovers
more the http request. That means with every seprate pic you use, your site makes http request for every pic which in turns affect the performance of the site everytime it loads.
Css provides a clever way out of this situation in form of Css sprites. Css sprite is a single pic made of many pics that you are using across your website. For example the image below :

Css rollover image 1
(7kb) Before rollover
Before you hover mouse on it :
 What CSS code looks like -
Css rollover image 2
(8kb) After rollover




 
#div img
{ background : url( path to image) ;
  background-position : 0(left), 0(top); }

After you hover mouse :
What CSS code looks like  :

#div img:hover
{ background : url( path to image);
  background-position : 0%, 100%;}


Css rollover image Overview
But in reality the 2 images are in the end one pic only. The position of images is calculated as shown in fig. Thus using one single image instead of 2 images and this in turn reduces the number of http requests and the size of bigger image is smaller than the size of two seprate images combined. In this case size of image1 and image2 sums up to 15kb whereas size of the bigger image came to be 12kb. So CSS Sprites are very helpful when it comes to website optimization.




Free Social Icons CSS Sprites


See CSS Sprite in a Action  :

flanker.mindwars.in

Free Download                     :-    Socialsprites

                                   
Note : Click on the LINK at the bottom of download page.
              


Included  resolutions

128x128                64x64                    32x32

Don't have any idea how to use it ?
Don't worry    1. Download the zip file and unzip it
                      2. All the CSS and HTML code with explanation is included so all you
                          have to  do is  COPY and PASTE only.


Made simple CSS sprite of Social Network Icons hope it helps someone :)

4 comments:

  1. glad that you found it useful, happy to help :)

    ReplyDelete
  2. ill replace my social icons with these.

    thanks.

    ReplyDelete
  3. Thx for sharing this one. ;)

    ReplyDelete

Real Time Web Analytics