Cara membuat Text shadow animasi with hover

Cara membuat Text shadow animasi with hover , bagi sobat blogger yang ingin berkreasi dengan text-shadow bukan hanya dengan gambar tetapi dengan tulisan.


Sekarang mari kita mulai pembahasan CSS3 yang bisa membuat Text-shadow animation with hover:
Saya yakin sobat semua sudah tau apa itu text shadow jadi tidak perlu di bahas pabila belum tau silahkan di baca terlebih dahulu tentang text shadow di blog ini.
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 #000 yang berarti hitam, ini berfungsi untuk menutup saat menghover, silahkan arahkan kursor ke kalimat di bawah:

BIASAKAN BERKOMENTAR !!

UNTUK TUTORIAL SELANJUTNYA TERIMAKASIH

Copy Paste Kode CSS3 di bawah ini:

KODE CSS3

<style type="text/css"> .stevevai{margin:0 auto;text-align:left;font-size:large;color:#FF0000;text-shadow:1px 2px 1px blue;overflow:hidden}.rumpun{background:#000; color:#FCE514;font-size: 1em; font-family:'arial';text-shadow:1px 2px 4px #FF0000;font-size:1em;}#vanhalen{position:relative;}#vanhalen img{-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 300ms;}#vanhalen .rumpun{position:absolute;top:0;left:0;opacity: 0;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 300ms;}#vanhalen .rumpun:hover{autowidth:0px; autoheight:0px;margin:0 auto;width:300px;height:200px;opacity: 4.9;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 300ms;}</style><div class="stevevai" id="vanhalen"> BIASAKAN BERKOMENTAR !! <div class="rumpun">UNTUK TUTORIAL SELANJUTNYA TERIMAKASIH</div></div>
http://www.negrionta.co.tv

Happy Blogging

Semoga bermanfaat ...!!