Bab IV : Belajar CSS bagian 3 ( Link | hover )

Setelah kalian mempelajari materi pada bab sebelumnya
Bab III : Belajar CSS bagian 2 ( Font | Tulisan )
Sekarang mari kita ke matari selanjutnya, yaitu : Bab IV : Belajar CSS bagian 3 ( Link | visited | hover dll )

Di Bab IV : Belajar CSS bagian 3 ( Link | visited | hover dll )
Kalian akan mempelajari tentang :
1. Cara membuat link biasa / normal link dengan CSS
2. Cara membuat link kunjungan / visited link dengan CSS
3. Cara membuat link sorotan / hover link dengan CSS
4. Cara membuat link aktif / active link dengan CSS
5. Cara membuat dekorasi link / link decoration dengan CSS
6. Cara membuat background link dengan CSS
Special :
7. Cara membuat efek hover selain pada link dengan CSS

Tahap Sebelumnya | Bab III : Belajar CSS bagian 2 ( Font | Tulisan ) |

Sekarang kita ke tahap berikutnya yaitu link

Materi ini cukup penting apalagi buat kamu yang ingin menghias webnya dengan efek css pada webnya

Adalah mendesain link biasa (normal), link yang sedang di kunjungi (visited link), link ketika disorot (hover link) dan yang terakhir link yang sedang di aktifkan (active link), untuk melihat lebih detailnya mari kita simak bersama materinya :

   1. Link biasa ( Normal Link )
     Yaitu link biasa yang muncul di seluruh halaman web. Rumusnya yaitu :

Selector a{kode warna;} / a{kode warna;}

# Keterangan :
a : setiap selector yang menunjukan huruf a di sampingnya menunjukan selector link, adapun a sebagai selector tunggal ( biasanya yang tunggal ini menunjukan kode CSS untuk semua link di page jika dengan selector maka link tersebut lebih spesifik, khusus untuk selector itu saja )

kode warna : dapat kamu ganti dengan HEX, RGB atau kata warna b. inggris,contoh :
a{color:#000;}
maka akan jadi seperti ini :

Farkryzer

   2. Link kunjungan (visited link)
     Link ini menunjukan link ketika kita mengunjunginya, Rumusnya yaitu :

Selector a:visited{kode warna;} / a:visited{kode warna;}

# Keterangan :
a:visited :penjelasannya sama dengan yang pertama hanya saja ini khusus untuk link yang dikunjungi (visited).
kode warna : dapat kamu ganti dengan HEX, RGB atau kata warna b. inggris

     
   3. Link sorotan (Hover link)
     Link ini yang paling saya suka yaitu link sorot ( hover link ), coba kamu cek judul post ini ketika disorot akan berubah warna kan ? nah perubahan warna ketika kita menyorot link itu lah contohnya
Rumusnya yaitu :

Selector a:hover{kode warna;} / a:hover{kode warna;}

# Keterangan :
a :lihat keterangan a pada poin ke satu 
kode warna : dapat kamu ganti dengan HEX, RGB atau kata warna b. inggris,contoh :
.post title a{color:#c22400;}
.post title a:hover{color:#FFA500;}
Contohnya silahkan lihat sendiri pada judul post ini, ketika link dalam keadaan normal berwarna merah ( #c22400; ) dan ketika di sorot menjadi warna orange ( #FFA500; )

   4. Link Aktif (Active Link)
     Jika link hover sudah, maka link aktif pemberhentian kita selanjutnya, active link akan aktif ketika kita mengklik link tsb, Rumusnya yaitu :

Selector a:hover{kode warna;} / a:hover{kode warna;}

# Keterangan :
a :lihat keterangan a pada poin ke satu 
kode warna : dapat akamu ganti dengan HEX, RGB atau kata warna b. inggris,contoh :
.post title a{color:#c22400;}
.post title a:hover{color:#FFA500;}
.post title a:active{color:#09496c;}
Contohnya silahkan lihat sendiri pada judul post ini, ketika link dalam keadaan normal berwarna merah ( #c22400; ) ketika di sorot menjadi warna orange ( #FFA500; ) dan saat di klik ( di aktifkan ) berubah menjadi warna biru ( #09496c; )

   5. Dekorasi Link ( Link Decoration )
     Sebetulnya cara ini sama dengan cara pada materi sebelumnya Bab III : Belajar CSS bagian 2 ( Font / Tulisan ), jika ingin melihat kembali Rumusnya yaitu :

a{text-decoration:dekorasi link;} / a:hover{text-decoration:dekorasi link;} / a:visited{text-decoration:dekorasi link;} / a:active{text-decoration:dekorasi link;}

# Keterangan :

dekorasi link : kamu bisa masukan dengan kode underline atau none

Note : none berfungsi untuk menghilangkan link dari garis bawah ( underline ) yang secara default muncul.

   6. Background Link
    Kurang sepertinya cara ini di terapkan, tetapi jika ada yang berminat mempelajarinya silahkan lihat rumusnya :

a{background-color:kode warna;} / a:hover{background-color:kode warna;} / a:visited{background-color:kode warna;} / a:active{background-color:kode warna;}

# Keterangan :
kode warna : seperti biasa warna dapat dimasukan dengan kode HEX, RGB atau kata warna b. inggris

SPECIAL
   7. Hover
     Sebetulnya ini diluar materi link tetapi karena ada element hover didalamnya saya masukan ke dalam materi ini dan saya tempatkan pada poin spesial
     Mendengar text hover maka kalian akan berpikir tulisan dengan efek hover, ya betul sekali. Jika biasanya kita melihat efek hover pada link maka lain lagi dengan ini yang membuat efek hover pada tulisan.
     Sebetulnya cara ini dapat di gunakan bukan hanya tulisan saja background pun bisa asalkan kita dapat menerapkannya dengan benar, maka saya akan memberi rumus dasanya terlebih dahulu :

selector{color:#000;}
selector:hover{color:kode warna;}
# Keterangan :
:hover : kode ini bisa kamu sisipkan disebelah selector, tetapi jangan hapus selector yang pertama buat baru selector untuk hover ini
kode warna : dapat dimasukan dengan kode HEX, RGB atau kata warna b. inggris
Contoh yang saya buat adalah hover pada text footer, coba lihat widget "identitas kamu" atau "kinerja terbaik oleh" judulnya untuk biasa berwarna hitam dan ketika di sorot berwarna merah. Kok bisa ? itulah mengapa materi ini di buat, coba lihat caranya :
#footer-wrapper h2 {color:#000;}
 #footer-wrapper h2:hover {color:#c22400;}

     Mudahkan ? kamu bisa desain yang lain selain contoh diatas seperti isi dari widget ( ul ), judul widget / header (h2), atau background post body seperti background post ini yang berubah warna menjadi putih ketika disorot.
     Ingat ya cara ini bisa diterapkan selain warna tulisan dapat di gunakan untuk background, akhir kata saya ucapkan terima kasih telah menyimak materi ini semoga ilmunya bermanfaat bagi kita semua.

| Bab V : Belajar CSS bagian 4 ( Border | Margin | Padding ) | Tahap Berikutnya 

Farkryzer