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, Sebelumnya saya juga pernah ngeshare tentang CSS Text Transform, 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;
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;
3. color: #FF0000; text-shadow: 0.1em 0.1em 0.2em #000;
Kode dan Demonnya
4. color: #fff; text-shadow: 0.1em 0.1em 0.2em #ff00000;
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;
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006;
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;
7. color: #C8C8C8; text-shadow: 1px 1px #fff, -1px -1px #444;
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;
2px 0 #000, 0 -1px #000;
9. color: #CCF; text-shadow: -1px 0 #000, 0 2px #000,
2px 0 #000, 0 -1px #000;
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;
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;
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
Contoh penulisan kode yang Sederhana
a:hover{ color: #FF0000; text-shadow: -1px 0 #000, 0 2px #000,
2px 0 #000, 0 -1px #000;}
2px 0 #000, 0 -1px #000;}
Dan hasilnya arahkan cursornya ke bawah
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;}
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
Posted On : 27 November 2011 Time : 16.35
