Tooltips dengan CSS3

Kembali lagi oketrik mengisi tentang css3, css3 memang membuat saya gila. Dengan efek yang diberikan css3 membuat saya mencadi kecanduan akan css3 tersebut. Walaupun efek css3 tidak bisa dilihat oleh semua browser namun saya tetap suka. Mungkin untuk kedepannya css3 ini akan di sempurnakan atau malah di patenkan oleh webmaster. Mudah-mudahan para sobat blogger Indonesia dapat menerima dengan baik datangnya CSS3 ini kedalam dunia Webdesign.

Sekarang cukup cuap-cuapnya, oiya kalau kemarin-kemarin saya menjelaskan banyak trik css3 di antaranya Membuat Drop Shadows, Membuat Image Gallery dengan css3, Membuat Tombol dengan CSS3, Membuat Text Shadows, Fisheye Menu dengan css3 dan sbg, sekarang kita lihat trik terbaru dari css3 yaitu Tooltips dengan CSS3 sebelumnya saya juga pernah membahas tentang tooltips dengan css namun itu menggunakan gambar dan menurut saya cukup ribet karena menggunakan berbelit kode HTML. Nah kalau yang ini tidak terlalu berbelit karena kode HTML yang di gunakan tidak begitu banyak. Sekarang kita lihat aja contohnya

• 
  Trik Blog
  
  Anda Dapat menemukan dan mempelajari tentang blog dengan penjelasan yang cukup jelas.
  
  
  
• 
  Desain Template
  
  Terdapat banyak trik untuk mempercantik blog anda.
  
• 
  okeTemplate
  
  Apabila anda ingin mencari template disana lah tempatnya.
  
• 
  Trik Via oketrik
  
  Hasil trik penggabungan oleh oketrik.
  
• 
  Tutorial Blogger Pemula
  
  Tutorial yang didedikasikan untuk para pemula.
  

Bagaimana bagus bukan? Nah sekarang kita lihat masing-masing kode yang dipakai :

Kode CSS


#bubblemenu li{ display:inline;  margin-left:15px; cursor:pointer}

#bubblemenu li >div{ width:150px;  min-height:100px;  position:absolute;  display:inline;  margin-left:-120px;  padding:5px; visibility:hidden;  opacity:0;  margin-top:-125px; background:#fff; font-size:1em;  -moz-border-radius:5px;  -webkit-border-radius:5px;  border-radius:5px;  -moz-box-shadow:0 0 8px gray;  -webkit-box-shadow:0 0 8px gray; filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229',Direction=135,Strength=3);  box-shadow:0 0 8px gray; -moz-transition:all 0.5s ease-in-out;  -webkit-transition:all 0.5s ease-in-out;  -o-transition:all 0.5s ease-in-out;  transition:all 0.5s ease-in-out}

#bubblemenu li:hover >div{visibility:visible;  opacity:1;  margin-top:-120px;  -moz-transition:all 0.5s ease-in-out;  -webkit-transition:all 0.5s ease-in-out;  -o-transition:all 0.5s ease-in-out;  transition:all 0.5s ease-in-out}

Di atas adalah kode CSS-nya sekarang di bawah ini adalah kode HTML-nya


<ul id="bubblemenu">
<li>
Trik Blog
<div>
Anda Dapat menemukan dan mempelajari tentang blog dengan penjelasan yang cukup jelas.
</div>

</li>
<li>
Desain Template
<div>
Terdapat banyak trik untuk mempercantik blog anda.
</div>
</li>
<li>
Template
<div>
Apabila anda ingin mencari template disana lah tempatnya.
</div>
</li>
<li>
Trik Via oketrik
<div>
Trik yang dibuat sendiri oleh oketrik atau hasil dari modifikasi dan penggabungan dari trik-trik yang ada di oketrik.
</div>
</li>
</ul>

Begitulah kode-kode yang di pakai untuk menampilkan sebuah tooltips yang di buat oleh css3, oiya untuk kode css sobat bisa taruh sekali saja dalam template namun untuk kode HTML tidak harus seperti itu juga yang terpenting dalam kode html yang ingin dipakai untuk menampilkan efek ini kita harus menyisipkan id="bubblemenu" dan tempat untuk tooltipsnya menggunakan div. Sekarang sobat coba jangan cuman membaca atau memperhatikan saja kalau sobat seperti itu maka sobat tidak akan bisa-bisa. Sekarang saya pamit dulu, sampai ketemu di post berikutnya y yang penuh denga trik blog. Terima kasih dan Happy Blogging.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg