Link With Animasi

Masih tentang CSS yang akan saya share kali ini Sobat, Yaitu cara merubah Warna Link di Blog dengan menggunakan CSS text Shadow, Link tersebut akan berubah Warna apabila diCursor,wah banyak bener ya manfaat CSS ini  Sobat,Langsung aja Sobat...perhatikan kode-kodenya dan coba arahkan cursor sobat pada contoh Demonya dibawah ini.

Kode dan Demonnya

1. text-shadow: 0.1em 0.1em #333; color: #FF0000;

"Demo CSS Animasi Link 1"

Kode dan Demonnya

2. color: #FF0000; text-shadow: 0.1em 0.1em 0.05em #000;

3. color: #FF0000; text-shadow: 0.1em 0.1em 0.2em #000;

"Demo CSS Animasi Link 2"



"Demo CSS Animasi Link 3"

Kode dan Demonnya

4. color: #fff; text-shadow: 0.1em 0.1em 0.2em #ff00000;

"Demo CSS Animasi Link 4"

Kode dan Demonnya

5. color: #FF0000; text-shadow: 0.2em 0.5em 0.1em #600,

    -0.3em 0.1em 0.1em #060,

     0.4em -0.3em 0.1em #006;

"Demo CSS Animasi Link 5"

Kode dan Demonnya

6. color: #D1D1D1; text-shadow: -1px -1px #fff, 1px 1px #333;

7. color: #C8C8C8; text-shadow: 1px 1px #fff, -1px -1px #444;

"Demo CSS Animasi Link 6"



"Demo Css Animasi Link 7"

Kode dan Demonnya

8. color: #FF0000; text-shadow: -1px 0 #000, 0 2px #000,

    2px 0 #000, 0 -1px #000;

9. color: #CCF; text-shadow: -1px 0 #000, 0 2px #000,

    2px 0 #000, 0 -1px #000;

"Demo CSS Animasi Link 8"



"Demo CSS Animasi Link 9"

Kode dan Demonnya

10. color: #FF0000; text-shadow: 0 0 0.2em #8F7;

11. color: #FF0000; text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87;

12. color: #FF0000; text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,

      0 0 0.2em #87F;

"Demo CSS Animasi Link 10"



"Demo CSS Animasi Link 11



"Demo CSS Animasi Link 12"

Berikut Cara pemasangannya Sobat :

• Login ke Blog Sobat
• Masuk Rancangan Pilih Edit HTML
• Untuk Semua Link cari kode a:hover { Lalu tambahkan kode CSSnya
• Cari kode  color: $(link.hover.color);  dan hapus
• Untuk Link di Area Sidebar cari kode .sidebar .widget a:hover {  Lalu tambahkan kode CSSnya
• Untuk Judul posting saja cari kode h3.post-title a:hover {  Lalu tambahkan kode CSSnya
• Biar lebih  menarik lagi tambahkan lagi kode berikut  ;font-size: 22px; font-weight: bold; font-family: Matura MT Script Capitals;color: #2e2efe 
•  Untuk melihat model tulisan / font-family silahkan buka Aplikasi Microsoft Office World
• Selesai lalu simpan

Berikut Contoh penulisanya :

Contoh penulisan kode yang Sederhana

a:hover{ color: #FF0000; text-shadow: -1px 0 #000, 0 2px #000,

    2px 0 #000, 0 -1px #000;}

Dan hasilnya arahkan cursornya ke bawah

Disini Hasil penulisan kode yang Sederhana

Contoh penulisan kode yang dimodifikasi

a:hover{color: #FF0000; text-shadow: -1px 0 #000, 0 2px #000,

    2px 0 #000, 0 -1px #000;

font-size: x-large; font-weight: bold; font-family: Matura MT Script Capitals; color: #ff0000;}

Dan hasilnya arahkan cursornya ke bawah

Disini Hasil penulisan kode yang dimodifikasi

Posted by Unknown

Tweet