Pada panduan CSS kali ini kita akan membahas beberapa efek yang didapat dengan mendekorasi teks, yaitu efek garis bawah (underline), garis atas (overline) dan garis tercoret (line-through). Properti yang akan kita gunakan yakni text-decoration. Kita akan mempelajari Cara Membuat Teks Underline, Overline, dan Line-through dengan CSS.
Cara membangun Underline, Overline, dan Line-through
Pemakaian property CSS text-decoration bagi memperoleh efek garis bawah (underline), garis atas (overline) dan garis tercoret (line-through) lumayan sederhana, kita tinggal menginput nilai tersebut selaku nilai properti dari text-decoration seperti contoh berikut ini:
|
1 |
span.under {<br/> text-decoration: underline;<br/>}<br/>span.over {<br/> text-decoration: overline;<br/>}<br/>span.line {<br/> text-decoration: line-through;<br/>} |
Selain ketiga nilai tersebut, properti text-decoration mempunyai 2 nilai tambahan, yakni blink dan none. text-decoration: blink diperuntukkan bagi membangun teks berkedip (blink!) namun karena efeknya yang mengganggu, umumnya web browser modern melalaikan efek ini. Sedangkan bagi menghapus efek dekorasi teks, kita dapat menggunakan command text-decoration: none. Petunjuk none ini lazimnya digunakan bagi menghapus efek underline dari tag <a> yang adalah sebuah setingan bawaan web browser.
Selaku panduan kita kali ini, berikut yakni contoh kode HTML dan CSS dengan properti text-decoration:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><title>Belajar text-decoration</title><br/><style type=text/css><br/> .under { text-decoration: underline; }<br/> .over { text-decoration: overline; }<br/> .line { text-decoration: line-through; }<br/> .blink { text-decoration: blink; }<br/> .all { text-decoration: underline overline line-through; }<br/> a { text-decoration: none; }<br/></style><br/></head><br/><body><br/> <h2>Belajar CSS: text-decoration</h2><br/> <br/> <p class=under>Teks dengan underline sering disangka dengan link</p><br/> <p class=over>Teks dengan overline mungkin bermanfaat</p><br/> <p class=line>Teks dengan line-through digunakan bagi koreksi</p><br/> <p class=blink>Efek blink diabaikan oleh web browser</p><br/> <p class=all>Segala efek text-decoration pada satu selector</p><br/> <a href=http://www.duniailkom.com>Ini yakni link <br/> tanpa efek garis bawah</a><br/></body><br/></html> |
Pada contoh kode diatas, saya membangun class bagi masing-masing efek. Perhatikan bahwa class=”blink”, efek text-decoration: blink akan diabaikan oleh web browser.
Bagi class=”all”, saya membangun 3 efek pada 1 selector. Tiap-tiap nilai dipisahkan dengan spasi.
Kode CSS text-decoration: none bagi tag <a> di baris terakhir yakni pemakaian sangat sering bagi text-decoration. Menghapus efek garis bawah dari sebuah link membangun kita dapat mendesain link dengan lebih bagus, terutama seandainya tag <a> digunakan di fitur navigasi dari blog.
eBook CSS Uncover Duniailkom
Sumber https://www.duniailkom.com/
