Membuat Text Shadow Animation With Hover

 Membuat Text Shadow Animation With Hover

Halo Sobat evanzip...pada tutorial sebelumnya evanzip telah menjelaskan bagaimana cara membuat pesan pembuka dan penutup pada Blog.nahhh tutorial berikut ini Evanzip 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.. 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 EVANZIP

SAYA SENANG, ANDA TELAH BERKUNJUNG KE SINI

 <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:

APA KOMENTAR ANDA TENTANG BLOG EVANZIP

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??

SAMPAI TITIK DARAH PENGHABISAN MERDEKA!!!!!

<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>

EVANZIP
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.... 

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>

                                      oke sobat Evanzip selamat mencoba semoga berhasil 
            Bila artikel ini menarik dan bermanfaat silahkan tinggalkan komentar di bawah ini

    Kritik Dan Saran Anda Sangat Membantu evanzip Dalam Menulis Artikel pada Tutorial berikutnya.

Related Post