Touch Social
Font: Calibri
Font Size: 20pt, Sharp
Image:
Creation File:
HTML
- Code:
<script type="text/javascript">
$(document).ready(function(){
$(".takip").mouseover(function(){
$(this).filter(':not(:animated)').animate({width:135},{duration:500});
});
$(".takip").mouseout(function(){
$(this).animate({width:42});
});
});
</script>
<div id="takip">
<div class="facebook takip" onclick="location.href='http://www.facebook.com/kullaniciadi'">
</div>
<div class="twitter takip" onclick="location.href='http://www.twitter.com/kullaniciadi'">
</div>
<div class="flickr takip" onclick="location.href='http://www.flickr.com/kullaniciadi'">
</div>
<div class="friendfeed takip" onclick="location.href='http://www.friendfeed.com/kullaniciadi'">
</div>
<div class="vimeo takip" onclick="location.href='http://www.vimeo.com/kullaniciadi'">
</div>
<div class="youtube takip" onclick="location.href='http://www.youtube.com/kullaniciadi'">
</div>
<div class="linkedin takip" onclick="location.href='http://www.linkedin.com/kullaniciadi'">
</div>
<div class="rss takip" onclick="location.href='/rss'">
</div>
</div>
CSS
- Code:
#takip {
position: fixed;
right: 0;
top: 250px;
z-index: 999;}
.takip {
background-image: url('http://i49.servimg.com/u/f49/16/79/78/79/social17.png');
background-repeat: no-repeat;
height: 42px;
width: 42px;
top: 100px;
margin-left: auto;
opacity:0.3;
filter:alpha(opacity=50); /* For IE8 and earlier */
}
.takip:hover {
background-image: url('http://i49.servimg.com/u/f49/16/79/78/79/social17.png');
cursor: pointer;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.facebook {
background-position: 0px 0px;
}
.twitter {
background-position: 0px -42px;
}
.flickr {
background-position: 0px -84px;
}
.friendfeed {
background-position: 0px -126px;
}
.vimeo {
background-position: 0px -168px;
}
.youtube {
background-position: 0px -210px;
}
.linkedin {
background-position: 0px -252px;
}
.rss {
background-position: 0px -294px;
}
.facebook:hover {
background-position: 0px 0px;
}
#takip a img {
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
text-align: center;
margin-top: 0px; }
#takip a img:hover {
-webkit-transform: scale(1.05); -moz-transform: scale(1.05);}
#takip a img:active {
-webkit-transform: scale(1.00); -moz-transform: scale(1.00);}