Animasi Link dengan CSS

kali ini saya akan ngeshare membuat animasi link dengan CSS, 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 , 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 ubah pixelnya dan juga kode warnanya
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

Buka Comment

Animasi Link dengan CSS

Post a Comment