Membuat Text Shadow Animation With Hover

pada tutorial sebelumnya saya telah menjelaskan bagaimana cara membuat pesan pembuka dan penutup pada Blog.nahhh tutorial berikut ini saya akan Membahas Tentang Cara Membuat Text Shadow Animation With Hover bagi sobat yang ingin berkreasi dengan text-shadow bukan hanya dengan gambar tetapi dengan tulisan. Sekarang mari kita mulai pembahasan CSS3 Text-shadow animation with hover: Baik sobat.. saya tidak akan menjelaskan panjang lebar tentang cara membuat Text Shadow Animation With Hover Karena saya percaya pasti sobat sudah pada tau apa itu Text Shadow Animation With Hover.untuk animasi yang pertama adalah menghilangkan tulisan dan merubahnya menjadi kalimat yang baru. Prinsipnya adalah kita harus mengetahui warna background dari post article seperti blog ini backgroundnya post hentry adalah #fff yang berarti putih, ini berfungsi untuk menutup saat menghover, silahkan arahkan kursor ke kalimat di bawah: tergantung sobat ingin merubah warna apa,sesuai selera.

 <style type="text/css"> .stevevai{margin:0 auto;text-align:left;font-size:large;color:#0011FC;text-shadow:1px 2px 1px red;overflow:hidden}.rumpun{background:#FF0000; color:#FCE514;font-size: 1em; 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><div class="stevevai" id="vanhalen">SELAMAT DATANG DI BLOG EVANZIP<div class="rumpun">SAYA SENANG ANDA TELAH  BERKUNJUNG KE SINI</div></div>

Nah..sekarang kita akan mencoba menggeser text-shadownya di hover seperti ini gambarannya:

Coba di perhatikan tulisan di atas segera bergeser dan berubah warna text-shadownya, di sini saya membuat font agak besar sedikit, apabila sobat tertarik dengan tulisan di berpindah itu, silahkan kopi kode dibawah dan asukan ke dalam postingan sobat..Mudah kan??

<style type="text/css"> .kodokloncat{margin:0 auto;text-align:left;font-size:2em;color:#E8D3E5;text-shadow:1px 2px 1px red;overflow:hidden} .details{background:#fff; color:red;font-family:'Arial';text-shadow:4px 2px 6px red;} #kodok-3{position:relative;} #kodok-3 img{-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;} #kodok-3 .details{position:absolute;opacity: 0;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;} #kodok-3 .details:hover{width:900px;height:200px;opacity:4.9;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;-moz-transform:scale(1);-webkit-transform:scale(1);} </style><br /> <div class="kodokloncat" id="kodok-3">APA KOMENTAR ANDA<br /> <div class="details">TENTANG BLOG EVANZIP</div></div>

Saya Bukan Seorang Blogger, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru.... 

Gimana sobat mau pasang seperti yang di atas nga usah bingun bingung tinggal copy paste aja kode di bawah ini..dan silahkan ganti tulisan seperti di atas dengan tulisan sesuai dengan keinginan sobat

 <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:red;-moz-transform:scale(2.2);-webkit-transform:scale(2.2);-webkit-transition-duration: 3s;} </style><br /> <div id="qthink"><div class="polo_box" id="qthink"><div class="center">EVANZIP<br /> Nama saya Evan Saputra, Saya Bukan Seorang Blogger, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru.... </div></div></div>

                                    selamat mencoba semoga berhasil