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.. Evanzip tidak akan menjelaskan panjang lebar tentang cara membuat Text Shadow Animation With Hover Karena Evanzip 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.

SELAMAT DATANG DI BLOG JUPENU

SAYA SENANG ANDA TELAH BERKUNJUNG JUPENU BLOG

<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 JUPENU<div class="rumpun">SAYA SENANG ANDA TELAH BERKUNJUNG KE SINI</div></div><textarea>

JUPENU BLOGSPOT

SELAMAT DATANG DI JUPENU

<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"> JUPENU BLOGSPOT<br /> <div class="details"> SELAMAT DATANG DI JUPENU</div> </div><textarea> silahkan kopi kode tersebut dan masukan ke dalam postingan sobat..Mudah kan??

---

HERRY SOGLENK^_^

---