Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Minggu, 04 Juli 2010

Tooltips dengan CSS3

Kategori : ,
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







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

19 Komentar untuk Tooltips dengan CSS3

wahhh kayaknya saya banyak nimba ilmu disini..
thnks yy broo

Terima kasih ya, walau saya masih bingung bacanya...

Gmn cara tulis pesan bergerak?

@lirikindo >> pesan bergerak kaya gmn y mas? bisa kasih contohnya?

Waw... CSS3 lagi...
kalo bkin dslr css3 gmana ya?

wwaw.... CSS3 lagi...
makin mantab blog nya sob....
bravo for oketrik

duh keren sekali ya css3 ini ingin sekali gw belajar tapi mau mulai dari mana ya...

Wah bagus bgt tool tipnya...
posting laghi ya sob ^_^

Wah poastin lagi ya....bgus2....
yang ini dengan tooltip mantab....
owh iya soal kirim pulsa belum bisa sob.coz dari adsensecamp belum dikirim2 je....maaf ya jadi terlambat....

lagi panas, panassnya css3 mas oketrik :)

warna linknya kok kuning ...jelek sob engk enak dipandang mata

Pertama saya, kurang nyaman di blog sini karena warna link kurang jelas dan bikin saya cepat lelah matanya
mohon warna link dirubah agar jelas, dan tidak bikin mata lelah

tipografi sudah OK, hanya saja ukuran font size di diganti menjadi 14 atau 16 agar tidak terlalu kecil

itulah kehebatan CSS3 saya harap era web 2.0 akan berakhir dan diganti web 3.0

ada postingan baru di blog saya, CARA HACK TEMPLATE ANDA, mamir ya

@Gus Ikhwan >> wah pedas sekali y, tapi saya suka dengan kritikan anda, klo untuk warna link akan segera saya ganti, untuk ukuran font yang harus saya ubah itu yang mana y? klo misalnya untuk font-size post saya kira sudah cukup nyaman dan untuk hack template memang ada y, klo memang ada hebat sekali keren..!!

terima kasih atas kritikannya ^_^

wah mantep makasih infonya

Terima kasih ilmunya...

sob klo buat gambar kog mala ilang gambarnya?? gmn?? blez di blogku ya

oi sekarang udah bisa Bro thax

taruh diiiiiiimn kode css and htmlnya broo
oke trik emang oke