Text Shadow Animation Hover #1

Text Shadow Animation Hover #1 - Di bulan Ramadhan habis sholat tarawih enaknya emang ngeblog ^^. Habig sholat kan pegel-pegel tuh, mendingan sekarang kita mbahas tentang trik tips yang enak aja yah ^^. . . . Kali ini adalah Cara Membuat Text Shadow Animation Hover. Sebenernya ada banyak sekali model-modelnya, ada seperti ini, ada yang seperti itu. Kita bahas yang ini dulu . . . .Yang mana? 

Text Shadow Animation Hover #1

Maksud dari Text Shadow Animation Hover ialah, Text = Tulisan, Shadow = Bayangan, Animation = Animasi, dan Hover = Jika disorot dengan kursor, maka berubah ^^ gampang kan !

CONTOH

SOROT AKU DENGAN MOUSE ! BURUAN GAN ^^

TUH KAN ! BERUBAH . . . .

Gimana Gan ? Pengen tau cara buatnya ? Nih saya kasih tau . . . .

SOROT AKU DENGAN MOUSE ! BURUAN GAN ^^

TUH KAN ! BERUBAH . . . .

kodenya

<style type="text/css">
.stevevai{margin:0 auto;text-align:left;font-size:large;color:red;overflow:hidden}.rumpun{background:#fff; color:blue;font-size: 3em; font-family:'arial';font-size:1em;}#vanhalen{position:relative;}#vanhalen img{-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#vanhalen .rumpun{position:absolute;top:0;left:0;opacity: 0;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#vanhalen .rumpun:hover{autowidth:0px; autoheight:0px;margin:0 auto;width:900px;height:200px;opacity: 4.9;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}
</style>
<br />
<div class="stevevai" id="vanhalen">
SOROT AKU DENGAN MOUSE ! BURUAN GAN ^^<br />
<div class="rumpun">
TUH KAN ! BERUBAH . . . . </div>
</div>

Keterangan : Sobat bisa variasikan sendiri dengan mengubah warna, jenis font, ukuran huruf, dan juga tulisannya tentunya.
Cara pasang : Tinggal masukkan kode ke dalam postingan atau ke dalam widget 

Jika dengan efek Shadow atau bayangan
Kodenya:

<style type="text/css">
.stevevai{margin:0 auto;text-align:left;font-size:large;color:red;text-shadow:1px 2px 1px red;overflow:hidden}.rumpun{background:#fff; color:blue;font-size: 3em; font-family:'arial';text-shadow:1px 2px 4px #FF1605;font-size:1em;}#vanhalen{position:relative;}#vanhalen img{-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#vanhalen .rumpun{position:absolute;top:0;left:0;opacity: 0;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#vanhalen .rumpun:hover{autowidth:0px; autoheight:0px;margin:0 auto;width:900px;height:200px;opacity: 4.9;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}
</style>
<br />
<div class="stevevai" id="vanhalen">
INI CONTOH DENGAN VARIASI HOVER<br />
<div class="rumpun">
GIMANA GAN? . . .  TAMBAH KEREN KAN ?</div>
</div>

Keterangan : Kode yang berwarna biru tebal adalah kode yang ditambahkan jika akan menambahkan efek shadow pada Text Animation Hover