E Online Support - Free Software Download
How to use social media icons using css?
How can i use css for making social media icon.
Shruti
Answer
1

We use css image sprites 1 : To lower down the bandwidth used to load multiple images in a webpage. 2 : To decrease the page loading time.
<html>
<head>
<style>
/* first */

.first{
width: 440px;
height: 100px;
}

.sprite_face_shift {
background: url('imgs/image_sprites.png');
background-position:0 0;
width: 50px;
height: 50px;
float:left;
display: inline-block;
margin-right: 10px;
transform: perspective(1000);
transform-style: preserve-3d;
transition: all 400ms ease;
}
.sprite_face_shift:hover {
background: url('imgs/image_sprites.png');
background-position: -1px -64px;
width: 50px;
height: 50px;
transform: rotate(-90deg);
}

.sprite_rss_shift {
background: url('imgs/image_sprites.png');
background-position:-57px 0;
width: 50px;
height: 50px;
float:left;
display: inline-block;
margin-right: 10px;
transform: perspective(1000);
transform-style: preserve-3d;
transition: all 400ms ease;
}
.sprite_rss_shift:hover {
background: url('imgs/image_sprites.png');
background-position:-57px -64px;
width: 50px;
height: 50px;
transform: rotate(-90deg);
}

.sprite_linked_shift {
background: url('imgs/image_sprites.png');
background-position: -114px 0;
width: 50px;
height: 50px;
float:left;
margin-right: 10px;
display: inline-block;
transform: perspective(1000);
transform-style: preserve-3d;
transition: all 400ms ease;
}
.sprite_linked_shift:hover {
background: url('imgs/image_sprites.png');
background-position: -114px -64px;
width: 50px;
height: 50px;
transform: rotate(-90deg);
}

.sprite_pint_shift {
background: url('imgs/image_sprites.png') ;
background-position: -171px 0;
width: 50px;
height: 50px;
float:left;
margin-right: 10px;
display: inline-block;
transform: perspective(1000);
transform-style: preserve-3d;
transition: all 400ms ease;
}
.sprite_pint_shift:hover {
background: url('imgs/image_sprites.png');
background-position: -171px -64px;
width: 50px;
height: 50px;
transform: rotate(-90deg);
}

.sprite_share_shift {
background: url('imgs/image_sprites.png');
background-position:-227px 0;
width: 50px;
height: 50px;
float:left;
display: inline-block;
margin-right: 10px;
transform: perspective(1000);
transform-style: preserve-3d;
transition: all 400ms ease;
}
.sprite_share_shift:hover {
background: url('imgs/image_sprites.png');
background-position: -227px -64px;
width: 50px;
height: 50px;
transform: rotate(-90deg);
}
.sprite_youtube_shift {
background: url('imgs/image_sprites.png');
background-position: -282px -1px;
width: 50px;
height: 50px;
float:left;
display: inline-block;
margin-right: 10px;
transform: perspective(1000);
transform-style: preserve-3d;
transition: all 400ms ease;
}
.sprite_youtube_shift:hover {
background: url('imgs/image_sprites.png');
background-position: -282px -64px;
width: 50px;
height: 50px;
transform: rotate(-90deg);
}

.sprite_twitter_shift {
background: url('imgs/image_sprites.png');
background-position: -337px -1px;
width: 50px;
height: 50px;
float:left;
display: inline-block;
transform: perspective(1000);
transform-style: preserve-3d;
transition: all 400ms ease;
}
.sprite_twitter_shift:hover {
background: url('imgs/image_sprites.png');
background-position:-337px -64px;
width: 50px;
height: 50px;
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div class="first">
<a href="#">
<div class="sprite_face_shift">
</div>
</a>
<a href="#">
<div class="sprite_rss_shift">
</div>
</a>
<a href="#">
<div class="sprite_linked_shift">
</div>
</a>
<a href="#">
<div class="sprite_pint_shift">
</div>
</a>
<a href="#">
<div class="sprite_share_shift">
</div>
</a>
<a href="#">
<div class="sprite_youtube_shift">
</div>
</a>
<a href="#">
<div class="sprite_twitter_shift">
</div>
</a>
</div>
</body>
</html>
Question*:
Description*:
Script:
Related To:
 PHP    HTML    CSS    JAVASCRIPT    JQUERY   
 AJAX    WINDOWS    GAMES    DRIVERS    MAC   
 LINUX    MOBILE    GADGETS   
Security Code:
6091
Enter Security Code:
 
Facebook   Linkedin   Skype   Twitter