Info

SELAMAT DATANG

Selamat datang di Coretan Evanzip - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan Berlama - Lama di sini semoga dari sekian banyak postingan ada beberapa artikel yang bermanfaat buat anda

Sekilas Tentang 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...

Posts Subscribe to This BlogComments

Follow Us


Rabu, 12 Oktober 2011

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



6 komentar:

  • bermanfaat gan,,,, thanks info bru ny,,,,i like it,,,,

  • agan evan tlong kasi tau cra bkin script/javascript yg ada di tepi atas kiri pojok "info" kasi tutorial nya donk,,,pliss,,,,

  • MAKSIH YA EVANZA .......ATAS TRIK YG KMU KASIH UNTUK KITA SEMUA ...MOGA ADA YG UNIK LAGI YA ..............

  • Anonim

    Blognya keramean padahal scriptnya udah bagus..

  • mksih bgt gan.. cara-cara nya sangat membantu..
    oya gan boleh ikut tanya gk? low pengen tampilan menu nya ada di kolom2 seprti diatas punya agan.. gimana tuh gan? heheh.. maf keppo.. hehe

  • Poskan Komentar

    Silahkan Berkomentar Di bawah ini Buat yang Belum Punya Akun Google/Blogger Bisa Di Ganti Dgn Anonymous

    ~ Berkomentarlah Dengan Sopan ~



    Silahkan Share Bila Anda Menyukainya Artikel ini



      ~ Evan Saputra ~

      Welcome

      Halo..sahabat evanzip...mau bergabung dengan ku di facebook @evanosaputra-Twitter @Evan_say atau di Yahoo Messenger ku @evansaputra33 ehhh...yang udah kunjung jangan lupa isi Buku Tamu nya Ya,,,

      My Profil

      Follow Me

     

    FIND US ON FACEBOOK

    SAHABAT KU

    Mengenalmu sangat menyenangkan

    Follow by Email


    BACK LINK

    EVAN < Free Auto Backlinks From 1Malaysia backlinks referer Backlink Exchange Free Automatic Backlink Florists Links Free Auto Backlinks SEO Links Exchanges, Blog Link Building Service Text Backlink Exchanges Text Backlink Exchanges Free Counter Text Backlink Exchanges Free Auto Backlinks Text Backlink Exchanges Auto Backlink Gratis Indonesia : Top Link Indo Free Automatic Backlink Backlink Exchange Statistik Blog
    Website Hit Counters
    page counter