Cara Membuat Text Shadow Animation With Hover

Text shadow animation adalah pembahasan yang akan kita gali di artikel ini ringan hanya dua tehnik yang di suguhkan jadi mohon maaf kalu banyak basa-basi. Sebenarnya ini adalah sebuah pertannyaan dari sahabat blogger yang ingin berkreasi dengan text-shadow bukan hanya dengan gambar tetapi dengan tulisan.

Sekarang mari kita mulai pembahasan CSS3 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.
Okeh..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 TUTORIAL BLOG

MOHON SARAN, KRITIK SERTA DUKUNGANNYA UNTUK BLOG INI

• sobat bisa kopi kode di bawah ini untuk menampilkan tek seperti di atas.

<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:#fff; 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 TUTORIAL BLOG<div class="rumpun">MOHON SARAN, KRITIK SERTA DUKUNGANNYA UNTUK BLOG INI</div></div>

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

TERUS BERUSAHA SAMPAI DAPAT RANK 5

SAMPAI TITIK DARAH PENGHABISAN MERDEKA!!!!!

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 masukan 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">TERUS BERUSAHA SAMPAI DAPAT RANK 5<br /> <div class="details">SAMPAI TITIK DARAH PENGHABISAN MERDEKA!!!!!</div></div>

Tutorial Blog
Dengan ini saya menyatakan kalau belum dapat rank 5 tidak akan berenti untuk posting hingga sampai saya dapat rank 5 terimakasih.

• Gampang cara nya ko,sobat semua hanya tinggal copy saja kode di bawah ini...

<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">Tutorial Blog<br /> Dengan ini saya menyatakan kalau belum dapat rank 5 tidak akan berenti untuk posting hingga sampai saya dapat rank 5 terimakasih. </div></div></div>

Hanya Itu Itu saja yang dapat saya berikan kepada sobat-sobat semua,..
kurang lebih nya saya minta maaf...