◄ Min  Size Fonts: + | - | ± Color: Max ►

Make Social Network With Animation CSS

Bingung juga tidak ada bahan ngepost nih :d Berbicara artikel bertemakan share / berbagi di blog keren ini sudah ada beberapa. Disamping sudah keren punya, dalam pemasangan diperlukan skill mumpuni ;)) Mari berjalan-jalan ria dolo:Nemu tema serupa, dan memang belum pernah gue postingkan membuat link share (berbagi) full pakai CSS dengan gaya hover muncul-hilang! Original title Social network with animation CSS.
Pada demo sumber efek animasi tidak berkerja! Mungkin ada yg salah atribut pada kode .smedia Saya jg tidak tahu sih :p Tapi saya ganti, eh jalan tuh :-"
#sociales {
width: 64px;
height: 64px;
border-radius: 50%;
border: 5px solid #fff;
background: url(http://4.bp.blogspot.com/-gKMIOgeaEBY/UWHsOA382oI/AAAAAAAABpI/5GdyRTAeKII/s1600/share_core_square.jpg);
}
.smedia {
position: absolute;
display: inline;
opacity: 0;
width: 46px;
height: 46px;
z-index: 100;
text-indent: -999px;
margin: 10px 0px 0px 10px;
-webkit-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#sociales:hover .smedia {
opacity: 1;
transform: translate(0px,0);
-webkit-transform: translate(0px,0);
-o-transform: translate(0px,0);
-moz-transform: translate(0px,0);
margin: 10px 0px 0px 20px;
}
#sociales:hover .smedia:nth-child(1) {
position: absolute;
left: 65px;
}
#sociales:hover .smedia:nth-child(2) {
position: absolute;
left: 110px;
}
#sociales:hover .smedia:nth-child(3) {
position: absolute;
left: 155px;
}
#sociales:hover .smedia:nth-child(4) {
position: absolute;
left: 200px;
}
#sociales:hover .smedia:nth-child(5) {
position: absolute;
left: 245px;
}
#sociales:hover .smedia:nth-child(6) {
position: absolute;
left: 290px;
}
.smedia.facebook {
background: url(http://4.bp.blogspot.com/-49s_0_9mdVo/UWHsMIvJBNI/AAAAAAAABn8/6bVMlN4Qz7Y/s1600/facebook.png);
}
.smedia.twitter {
background: url(http://4.bp.blogspot.com/-3r8sHe1Qy5M/UWHsNMDDzHI/AAAAAAAABog/q3V7mYirmOY/s1600/twitter.png);
}
.smedia.email {
background: url(http://4.bp.blogspot.com/-ZhFqBhp79cA/UWHsMBmPxsI/AAAAAAAABn4/O8k_pGf1oCU/s1600/email.png);
}
.smedia.instagram {
background: url(http://4.bp.blogspot.com/-FSkby0cXU_8/UWHsMis8c2I/AAAAAAAABoQ/y8coyc5ystc/s1600/instagram.png);
}
.smedia.youtube {
background: url(http://4.bp.blogspot.com/-x2oyT1dBzwA/UWHsNtcWXVI/AAAAAAAABo8/8kCXTVMbM6Y/s1600/youtube.png);
}
.smedia.vimeo {
background: url(http://4.bp.blogspot.com/-01SWPeX-584/UWHsNim9CAI/AAAAAAAABo4/Z9jMox_9UrE/s1600/vimeo.png);
}
.smedia:hover {
background-position: 0 -46px;
}
Markup HTML<div id="sociales">
<a class="smedia facebook" href="https://www.facebook.com/pages/Tutorial-Blog-for-Stylish-Blogger/122292581115426"></a>
<a class="smedia twitter" href="http://www.twitter.com/bebenkoben"></a>
<a class="smedia instagram" href="#"></a>
<a class="smedia youtube" href="#"></a>
<a class="smedia vimeo" href="#"></a>
<a class="smedia email" href="#"></a>
</div>
DEMO
http://jsbin.com/emaket/1
Happy coding \m/
Loading...
XMake Social Network With Animation CSS
Membuat link berbagi (social network) dengan efek animation full memakai CSS
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE