08/03/2016

CSS Text Decoration (Dekorasi Garis Teks)

08/03/2016


CSS Text Decoration digunakan untuk garis dekorasi teks pada sebuah elemen dengan model garis bawah, garis atas, garis tengah atau menambahkan efek teks berkedip. Pada level CSS3, kita dapat menentukan warna garis dan beberapa gaya garis seperti garis normal, garis putus-putus, dan garis titik.
Nilai Properti CSS Text Decoration
  • none
  • underline
  • overline
  • line-through
  • blink
  1. none
    • Ini adalah nilai awal, artinya dengan menerapkan nilai none sama dengan tidak menentukan gaya apapun
  2. underline
    • garis ditempatkan di bawah teks
  3. overline
    • Garis ditempatkan di atas teks.
  4. line-through
    • Garis ditempatkan di tengah teks
  5. blink
    • Efek teks berkedip, yaitu hilang dan timbul secara bergantian. Nilai blink ini, pada level CSS3 sudah digantikan dengan CSS Animation.
Sintaks CSS Text Decoration

Sintaks CSS

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;
Pada level CSS3, meskipun tidak didukung oleh sebagian browser, ada beberapa properti pendukung seperti
  • text-decoration-line
  • text-decoration-style
  • text-decoration-color
namun tetap saja properti text-decoration mampu mewakli ke-tiga properti pendukung tersebut dengan contoh penulisan sintaks seperti berikut

Sintaks CSS

text-decoration: underline solid #FFF000;
Tag HTML yang Mendukung CSS Text Decoration
  • a
  • abbr
  • acronym
  • address
  • b
  • baseFont
  • bdo
  • big
  • blink
  • blockQuote
  • body
  • button
  • caption
  • center
  • cite
  • code
  • col
  • colGroup
  • dd
  • del
  • dfn
  • dir
  • div
  • dl
  • dt
  • em
  • fieldSet
  • font
  • form
  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • html
  • i
  • input:button
  • input:file
  • input:password
  • input:reset
  • input:search
  • input:submit
  • input:text
  • ins
  • isIndex
  • kbd
  • label
  • legend
  • li
  • listing
  • marquee
  • menu
  • nobr
  • ol
  • optGroup
  • option
  • p
  • plainText
  • pre
  • q
  • rt
  • ruby
  • s
  • samp
  • select
  • small
  • span
  • strike
  • strong
  • sub
  • sup
  • table
  • tBody
  • td
  • textArea
  • tFoot
  • th
  • tHead
  • tr
  • tt
  • u
  • ul
  • var
  • xmp
Contoh Penerapan Sintaks CSS Text Decoration