yks: Create Sosial Network With Animasi Bubble Tooltip CSS3

Sabtu, 02 November 2013

Create Sosial Network With Animasi Bubble Tooltip CSS3

Beberapa hari yang lalu saya juga membahas tutorial Effect Tooltips ini, dimana pada postingan saya yang lalu hanya memberikan efek tooltip pada sebuah link dan image, nah pada tutorial kali ini kita akan memberikan efek tooltip pada sebuah sosial network yang berfungsi untuk memudahkan pengunjung untuk menemukan anda, dijejaring sosial misal, difacebook,twitter, maupun jejaring sosial lainnya..!!

dan saya akan menjelaskan sedikit mengenai tooltips ini, jadi Tooltip adalah sebuah keterangan dari suatu Link, Tooltip Berguna untuk Memberi keterangan atau sedikit penjelasan tentang isi dari pada Link tersebut,ini berguna agar orang mengetahui tentang isi dari Link/keterangan object tersebut.

Dan dibawah ini saya sudah menyiapkan 4 effect tooltips, sobat bisa lihat demo dibawah dengan mengarahkan cursor anda pada setiap contoh demo berikut..!!

- DEMO Dynamic Tooltip :

Google Plus
Twitter
Dribbble
Facebook
LinkedIn
Forrst

Berikut Kode CSS dan xHTML :

- KODE CSS >>>

.tt-wrapper{
padding: 0;
width:100%;
height:50px;
margin: 80px auto 30px auto;
}
.tt-wrapper li{
list-style:none;
float:left;
}
.tt-wrapper li a{
display: block;
width:68px;
height:70px;
margin: 0 2px;
outline: none;
background: transparent url(http://picturestack.com/631/97/V8pgrowcasethMFe.png) no-repeat top left;
text-indent: -9000px;
position: relative;
}
.tt-wrapper li .tt-gplus{
background-position: 0px 0px;
}
.tt-wrapper li .tt-twitter{
background-position: -68px 0px;
}
.tt-wrapper li .tt-dribbble{
background-position: -136px 0px;
}
.tt-wrapper li .tt-facebook{
background-position: -204px 0px;
}
.tt-wrapper li .tt-linkedin{
background-position: -272px 0px;
}
.tt-wrapper li .tt-forrst{
background-position: -340px 0px;
}
.tt-wrapper li a span{
width:100px;
height:auto;
line-height: 20px;
padding: 10px;
left:50%;
margin-left: -64px;
font-family: Alegreya SC, Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 14px;
text-align: center;
border:2px solid #fff;
text-indent: 0px;
border-radius: 5px;
position: absolute;
pointer-events: none;
bottom: 100px;
opacity: 0;
background:#111;color:#fff;text-shadow: 2px 2px 4px #000;
box-shadow:1px 1px 10px #719DAB;-moz-box-shadow:1px 1px 10px #719DAB;-webkit-box-shadow:1px 1px 10px #719DAB;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tt-wrapper li a span:before,
.tt-wrapper li a span:after{
content: ;
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
.tt-wrapper li a span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #fff;
}
.tt-wrapper li a:hover span{
opacity: 0.9;
bottom: 70px;
}

- KODE xHTML >>>

<ul class="tt-wrapper">
<li><a class="tt-gplus" href="#">Google Plus</a></li>
<li><a class="tt-twitter" href="#">Twitter</a></li>
<li><a class="tt-dribbble" href="#">Dribbble</a></li>
<li><a class="tt-facebook" href="#">Facebook</a></li>
<li><a class="tt-linkedin" href="#">LinkedIn</a></li>
<li><a class="tt-forrst" href="#">Forrst</a></li>
</ul>

- DEMO Bounce Tooltip :

Google Plus
Twitter
Dribbble
Facebook
LinkedIn
Forrst

Berikut Kode CSS dan xHTML :

- KODE CSS >>>

.tt1-wrapper{
padding: 0;
width:100%;
height:50px;
margin: 80px auto 30px auto;
}
.tt1-wrapper li{
list-style:none;
float:left;
}
.tt1-wrapper li a{
display: block;
width: 68px;
height: 70px;
margin: 0 2px;
outline: none;
position: relative;
z-index: 2;
background: transparent url(http://picturestack.com/631/97/V8pgrowcasethMFe.png) no-repeat top left;
text-indent: -9000px;
}
.tt1-wrapper li .tt-gplus{
background-position: 0px 0px;
}
.tt1-wrapper li .tt-twitter{
background-position: -68px 0px;
}
.tt1-wrapper li .tt-dribbble{
background-position: -136px 0px;
}
.tt1-wrapper li .tt-facebook{
background-position: -204px 0px;
}
.tt1-wrapper li .tt-linkedin{
background-position: -272px 0px;
}
.tt1-wrapper li .tt-forrst{
background-position: -340px 0px;
}
.tt1-wrapper li a span{
width: 80px;
height: 80px;
line-height: 80px;
padding: 10px;
left: 50%;
margin-left: -55px;
font-family: Alegreya SC, Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 14px;
text-align: center;
border: 5px solid #fff;
text-indent: 0px;
position: absolute;
pointer-events: none;
border-radius: 50%;
bottom: -40px;
opacity: 0;
background:#111;color:#fff;text-shadow: 2px 2px 4px #000;
box-shadow:1px 1px 10px #719DAB;-moz-box-shadow:1px 1px 10px #719DAB;-webkit-box-shadow:1px 1px 10px #719DAB;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-o-transform: scale(0.2);
-ms-transform: scale(0.2);
transform: scale(0.2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tt1-wrapper li a:hover span{
opacity: 0.9;
bottom: 50px;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

- KODE xHTML >>>

<ul class="tt1-wrapper">
<li><a class="tt-gplus" href="#">Google Plus</a></li>
<li><a class="tt-twitter" href="#">Twitter</a></li>
<li><a class="tt-dribbble" href="#">Dribbble</a></li>
<li><a class="tt-facebook" href="#">Facebook</a></li>
<li><a class="tt-linkedin" href="#">LinkedIn</a></li>
<li><a class="tt-forrst" href="#">Forrst</a></li>
</ul>

- DEMO Vertical Tooltip :

Google Plus
Twitter
Dribbble
Facebook
LinkedIn
Forrst

Berikut Kode CSS dan xHTML :

- KODE CSS >>>

.tt2-wrapper{
padding: 0;
width:100%;
height:50px;
margin: 80px auto 30px auto;
}
.tt2-wrapper li{
list-style:none;
float: left;
}
.tt2-wrapper li a{
display: block;
width: 68px;
height: 70px;
margin: 0 2px;
outline: none;
position: relative;
z-index: 2;
background: transparent url(http://picturestack.com/631/97/V8pgrowcasethMFe.png) no-repeat top left;
text-indent: -9000px;
}
.tt2-wrapper li .tt-gplus{
background-position: 0px 0px;
}
.tt2-wrapper li .tt-twitter{
background-position: -68px 0px;
}
.tt2-wrapper li .tt-dribbble{
background-position: -136px 0px;
}
.tt2-wrapper li .tt-facebook{
background-position: -204px 0px;
}
.tt2-wrapper li .tt-linkedin{
background-position: -272px 0px;
}
.tt2-wrapper li .tt-forrst{
background-position: -340px 0px;
}
.tt2-wrapper li a span{
width: 80px;
height: auto;
padding: 10px;
left: 50%;
margin-left: -55px;
font-family: Alegreya SC, Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 14px;
text-align: center;
border:3px solid #fff;
text-indent: 0px;
position: absolute;
pointer-events: none;
bottom: -40px;
opacity: 0;
background:#111;color:#fff;text-shadow: 2px 2px 4px #000;
box-shadow:1px 1px 10px #719DAB;-moz-box-shadow:1px 1px 10px #719DAB;-webkit-box-shadow:1px 1px 10px #719DAB;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: rotate(0deg) scale(0);
-moz-transform: rotate(0deg) scale(0);
-o-transform: rotate(0deg) scale(0);
-ms-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
}
.tt2-wrapper li a:hover span{
opacity: 0.9;
bottom: 100px;
-webkit-transform: rotate(-90deg) scale(1);
-moz-transform: rotate(-90deg) scale(1);
-o-transform: rotate(-90deg) scale(1);
-ms-transform: rotate(-90deg) scale(1);
transform: rotate(-90deg) scale(1);
}

- KODE xHTML >>>

<ul class="tt2-wrapper">
<li><a class="tt-gplus" href="#">Google Plus</a></li>
<li><a class="tt-twitter" href="#">Twitter</a></li>
<li><a class="tt-dribbble" href="#">Dribbble</a></li>
<li><a class="tt-facebook" href="#">Facebook</a></li>
<li><a class="tt-linkedin" href="#">LinkedIn</a></li>
<li><a class="tt-forrst" href="#">Forrst</a></li>
</ul>

- DEMO Dynamic Rotate Tooltip :

Google Plus
Twitter
Dribbble
Facebook
LinkedIn
Forrst

Berikut Kode CSS dan xHTML :

- KODE CSS >>>

.tt3-wrapper{
padding: 0;
width:100%;
height:50px;
margin: 80px auto 30px auto;
}
.tt3-wrapper li{
list-style:none;
float: left;
}
.tt3-wrapper li a{
display: block;
width: 68px;
height: 70px;
margin: 0 2px;
outline: none;
background: transparent url(http://picturestack.com/631/97/V8pgrowcasethMFe.png) no-repeat top left;
text-indent: -9000px;
position: relative;
}
.tt3-wrapper li .tt-gplus{
background-position: 0px 0px;
}
.tt3-wrapper li .tt-twitter{
background-position: -68px 0px;
}
.tt3-wrapper li .tt-dribbble{
background-position: -136px 0px;
}
.tt3-wrapper li .tt-facebook{
background-position: -204px 0px;
}
.tt3-wrapper li .tt-linkedin{
background-position: -272px 0px;
}
.tt3-wrapper li .tt-forrst{
background-position: -340px 0px;
}
.tt3-wrapper li a span{
width: 100px;
height: auto;
line-height: 20px;
padding: 10px;
left: 50%;
margin-left: -64px;
font-family: Alegreya SC, Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 14px;
text-align: center;
border:2px solid #fff;
text-indent: 0px;
border-radius: 5px;
position: absolute;
bottom: 70px;
opacity: 0;
visibility: visible;
pointer-events: none;
background:#111;color:#fff;text-shadow: 2px 2px 4px #000;
box-shadow:1px 1px 10px #719DAB;-moz-box-shadow:1px 1px 10px #719DAB;-webkit-box-shadow:1px 1px 10px #719DAB;
-webkit-transform: translate(35px) rotate(25deg) scale(1.5);
-moz-transform: translate(35px) rotate(25deg) scale(1.5);
-o-transform: translate(35px) rotate(25deg) scale(1.5);
-ms-transform: translate(35px) rotate(25deg) scale(1.5);
transform: translate(35px) rotate(25deg) scale(1.5);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tt3-wrapper li a span:before,
.tt3-wrapper li a span:after{
content: ;
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
.tt3-wrapper li a span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #fff;
}
.tt3-wrapper li a:hover span{
visibility: visible;
opacity: 0.9;
-webkit-transform: translate(0px) rotate(0deg) scale(1);
-moz-transform: translate(0px) rotate(0deg) scale(1);
-o-transform: translate(0px) rotate(0deg) scale(1);
-ms-transform: translate(0px) rotate(0deg) scale(1);
transform: translate(0px) rotate(0deg) scale(1);
}

- KODE xHTML >>>

<ul class="tt3-wrapper">
<li><a class="tt-gplus" href="#">Google Plus</a></li>
<li><a class="tt-twitter" href="#">Twitter</a></li>
<li><a class="tt-dribbble" href="#">Dribbble</a></li>
<li><a class="tt-facebook" href="#">Facebook</a></li>
<li><a class="tt-linkedin" href="#">LinkedIn</a></li>
<li><a class="tt-forrst" href="#">Forrst</a></li>
</ul>

Baiklah jika sobat ingin memasangnya silahkan baca keterangan dibawah :

KET::
kode CSS dapat juga disimpan bersama xHTML melalui "Add a Gadget". Agar bisa disimpan disini tambah tag style pada kode css berikut.

<style type="text/css">
Letakkan KODE CSS di sini!
</style>
Letakkan KODE xHTML di sini!

Mudah kan.hehee,..

Selamat Mencoba !!

yks

Sabtu, 02 November 2013

Create Sosial Network With Animasi Bubble Tooltip CSS3

- DEMO Dynamic Tooltip :

- DEMO Bounce Tooltip :

- DEMO Vertical Tooltip :

- DEMO Dynamic Rotate Tooltip :

Tidak ada komentar:

Posting Komentar

Pages - Menu

Sponsors