Jun 19, 2011

Text Shadow Animation Hover #2 (Membesar)

Poskan Komentar Text Shadow Animation Hover #2 (Membesar) - Tulisan berubah membesar ketika disorot dengan mouse. Menarik bukan. Baca dulu : "Tex Shadow Animation Hover #1 (Tulisan berubah ketika disorot mouse)". Nah, jika sudah baca yang itu, kan pengetahuannya tentang CSS jadi bertambah . Mari kita belajar bersama "Cara Membuat" Text Animation Hover dengan efek membesar ketika disorot dengan mouse. Kita tidak perlu menambahkan code apa-apa di template blog, langsung ditempat postingan saja, bener-bener simple dan tidak memengaruhi berat blog.
Cara Membuatnya :
  1. Masuk ke halaman posting, pilih "Edit HTML" bukan Compose
  2. Letakkan kode berikut
<style type="text/css">
#qthink{margin:0 auto;padding:5px;text-align:CENTER;}.polo_box {width:280px;height:200px;background:none;}#ease.polo_box {
-webkit-transition: all 4s ease-in;-moz-transition: all 4s ease-in;-o-transition: all 4s ease-in;-webkit-transition: all 4s ease-in;transition: all 4s ease-in;}#qthink:hover .polo_box, #qthink.hover_effect .polo_box {text-shadow: 0 0 10px rgb(251, 51, 51);color:GREEN;-moz-transform:scale(2.2);-webkit-transform:scale(2.2);-webkit-transition-duration: 3s;}
</style>
<div id="qthink">
<div class="polo_box" id="qthink">
<div class="center">
Contoh Tulisan yang apabila disorot dengan mouse maka akan membesar !!</div>
</div>
</div>

  • Keterangan :  GREEN adalah kode warna setelah membesar. none adalah warna background, jika ingin memberi background dengan warna, silahkan ganti dengan kode warna. CENTER adalah rata teksnya, silahkan dimodif sendiri. Jangan lupa ganti teksnya. Baca : Kode-Kode Warna HTML
  • HASILNYA :


Contoh Tulisan yang apabila disorot dengan mouse maka akan membesar !!

AKTUAL NEWS ONLINE

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

0 comments:

Post a Comment

Komen yang bijak sangat di nantikan...! Terimakasih..