CSS Sprites is actually for making less request to server. Think your site load with 30 small images when it open in a browser. For this small 30 images (png/jpg) your hosting server will receive 30 requests. Here css sprite rocks, we will put all images in a file and just add the file url in background css with background position. The background file can be like below,
This is a example of background file, tuteplus is using this background.
I have created a background image, this below
I have create the button with CSS Sprites and transition effect.
- Just create a navigation with basic css
- Set the background image for each navigation item
- Now add an extra statement for positioning background
[css]background-position: 0 37px;[/css]
- Make hover event for the nav items and when user hover on it then the background will be changed as hover item.
- Now we will see that the background is changing while hovering on the social nav but it is changing at once not smoth as the preview!
- Lets apply a transition css property to make it smooth. on hover and normal event add transition delay time like below.
[css] .social:hover { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; }
.social { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; } [/css]
- Now you are done adjust the delay time while changing background of the social nav.
My Creation is below and it’s live,
[button link=”http://asifsaho.me-content/uploads/download/social-icon/socialbtn.zip” size=”large” color=”teal”]Download Source[/button]