Cara Membuat CSS3 Tool Tips

membuat tooltips blogger
csstuts+ - Hari ini kita Kita akan membuat beberapa teknik Tooltips,dengan beberapa teknik transisi css3 dan class pseudo(semu).
Tooltips kali ini metode yang di gunakan dalam beberapa icon social yang memiliki link dan tips kemunculan seperti halnya title dalam sebuah link..metode ini hampir sama dengan kita membuat menu navigasi.dengan nampaknya sebuah tooltips atau text penjelas dalam sebuah menu... dulu saya pernah membuat tutorial tooltips dengan CSS dan Jquery namun kali ini kita akan membuat Tooltips Pure dengan CSS3

DEMO DOWNLOAD

lihat langkahnya seperti di bawah ini :
Daftar HTML yang di gunakan
<ul class="tt-wrapper">
    <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
    <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li>
    <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
    <li><a class="tt-facebook" href="#"><span>Facebook</span></a></li>
    <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
    <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>
</ul>
Elemen css yang digunakan agar memiliki bentuk horizontal ke kiri
.tt-wrapper li a{
    display: block;
    width: 68px;
    height: 70px;
    margin: 0 2px;
    outline: none;
    background: transparent url(../images/icons.png) no-repeat top left;
    position: relative;
}
Setiap list pasti akan memiliki gambar yang berbeda maka background yang akan kita gunakan harus memiliki class psuedo dan position background seperti hanya pada sprite background :
Pasang CSS3 Tool Tips di Blogger

.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;
}
Karena tooltips ini dengna css maka kita harus membuat elemen tersembunyi dengan menggunakan Opacity nilai 0, dan akan nampak dengan mengarahkan mouse dan kita harus mengatur tinggi dan lebar tooltips.. yang saya gunakan adalah 100px dan di tempatkan diatas link social. tersebut maka akan nampak seperti ini:
Pasang CSS3 Tool Tips di Blogger
.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;
    color: #719DAB;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 4px solid #fff;
    background: rgba(255,255,255,0.3);
    text-indent: 0px;
    border-radius: 5px;
    position: absolute;
    pointer-events: none;
    bottom: 100px;
    opacity: 0;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
}
Dan di bawah adalah ketika pointer di arahkan sebelum dan sesudah pada sebuah link anchor ,sejauh ini warna background border tooltips yang akan di tampilkan dengan teknik berbayang maka yang akan di gunakan dengan RGB color :
.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);
}
Karena sebelum kemunculan menggunakan opacity:0; maka kita memerlukan elemen psuedo tampilan dengan css penjelas,maka kita akan gunakan border putih pada tiap garis tooltips:
.tt-wrapper li a span:after{
    bottom: -14px;
    margin-left: -10px;
    border-top: 10px solid #fff;
}
dan opacity kemunculan saat pointer di arahkan kita gunakan elemen psuedo berikut :
.tt-wrapper li a:hover span{
    opacity: 0.9;
    bottom: 70px;
}
Penjelasan teknik psuedo berikut menurut saya sudah cukup,mungkin anda bisa menambahan beberapa style css yang berbeda,dan akan mudah dengan css tanpa rumit dengan sebuah javascript.

Saya harap Anda menikmati bebrapa teknik dan bisa berguna buat! SELAMAT MONCOBA
Dan perlu di ingat ini hanya akan bekerja di browser yang mendukung pseudo-elemen dan transisi CSS.

DEMO DOWNLOAD


license by under 88 blogspot.com
Post By : denzdii
Reference: http://tympanus.net/codrops/

6 comments:

  1. mantap, gan.... +review back nih \o/

    ReplyDelete
    Replies
    1. saya tidak bisa membuaka profilnya sob.. jadi susah buat review balik..

      Delete
    2. profilnya aja gak bisa dibuka T_T

      Delete
  2. mau tanya kk, kalau dibuat untuk page/laman gimna yah?

    ReplyDelete
    Replies
    1. bisa tinggal rubah url link.. namun gambarnya harus buat lagi.. kalau pakai standar dari page blogger css id widget nya ganti dengan #PageList1

      Delete
  3. keren nih sob di coba ahhh , mampir juga nihh http://sonytutorial.blogspot.com/ \m/

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top