Beranda / CSS / Pemrograman / Web

Panduan Lengkap CSS Text Decoration (Tutorial CSS Part 33)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 33 : Logo CSS

Mau nambahin efek garis bawah, atas, atau tengah ke teks di website kamu? Yuk, kenalan sama CSS Text Decoration. Properti ini simpel banget tapi bisa bikin tampilan teks jadi lebih menarik. Di artikel ini, kita bahas semua hal penting mulai dari nambahin garis, milih warna, sampe pakai properti shorthand biar nggak ribet. Let’s go!

1. Menambahkan Garis Dekorasi ke Teks

Untuk menambahkan garis pada teks (misalnya garis bawah), kamu bisa pakai properti text-decoration-line. Ada beberapa nilai yang bisa dipakai: 

p {
  text-decoration-line: underline; /* bisa underline, overline, line-through, none */
}

Nilai lainnya:

  • underline → garis di bawah teks
  • overline → garis di atas teks
  • line-through → coret di tengah teks
  • none → tanpa garis

Kamu juga bisa gabungkan beberapa nilai, misalnya:

h1 {
  text-decoration-line: underline overline;
}

Contoh kode HTML + CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      text-decoration-line: underline overline;
    }
    p {
      text-decoration-line: underline;
    }
  </style>
</head>
<body>
  <h1>Teks ini ada garis atas dan garis bawah</h1>
  <p>Teks ini ada garis bawahnya.</p>
</body>
</html>

Hasilnya:

Contoh CSS Text Decoration
Gambar 33.1 : Contoh CSS Text Decoration

2. Menentukan Warna Garis Dekorasi

Kalau mau garis dekorasinya punya warna berbeda dari teksnya, pakai text-decoration-color. Contoh: 

a {
  text-decoration-line: underline;
  text-decoration-color: red;
}

Jadi link kamu tetap biru, tapi garis bawahnya merah. Keren kan?

Contoh HTML + CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    a {
      text-decoration-line: underline;
      text-decoration-color: red;
    }
  </style>
</head>
<body>
  <a href="#">Link ini punya garis bawah warna merah.</a>
</body>
</html>

Hasilnya:

Contoh CSS Text Decoration Color
Gambar 33.2 : Contoh CSS Text Decoration Color

3. Menentukan Gaya Garis Dekorasi

Mau garisnya putus-putus, bergelombang, atau solid? Bisa banget! Pakai text-decoration-style: 

p {
  text-decoration-line: underline;
  text-decoration-style: wavy; /* bisa solid, double, dotted, dashed, wavy */
}

Macam-macam gaya:

  • solid → garis lurus biasa
  • double → dua garis sejajar
  • dotted → titik-titik
  • dashed → garis putus-putus
  • wavy → garis gelombang

Contoh HTML + CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      text-decoration-line: underline;
      text-decoration-style: wavy;
    }
  </style>
</head>
<body>
  <h1>Judul ini punya garis bawah bergelombang.</h1>
</body>
</html>

Hasilnya:

Contoh CSS Text Decoration Style
Gambar 33.3 : Contoh CSS Text Decoration Style

4. Menentukan Ketebalan Garis Dekorasi

Nah, kalau kamu ingin garisnya lebih tebal atau tipis, gunakan text-decoration-thickness. Contoh: 

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
}

Bisa juga pakai nilai auto, from-font, atau unit seperti em, px, %, dll.

Contoh HTML + CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    h2 {
      text-decoration-line: underline;
      text-decoration-thickness: 10px;
    }
  </style>
</head>
<body>
  <h2>Teks ini garis bawahnya lebih tebal.</h2>
</body>
</html>

Hasilnya:

Contoh CSS Text Decoration Thickness
Gambar 33.4 : Contoh CSS Text Decoration Thickness

5. Gunakan Shorthand Biar Lebih Praktis

Biar nggak nulis panjang-panjang, kamu bisa pakai properti shorthand text-decoration. Formatnya: 

text-decoration: underline red wavy 2px;

Urutannya:

text-decoration-line  text-decoration-color  text-decoration-style  text-decoration-thickness

Contoh lain:

a {
  text-decoration: underline blue dashed 1.5px;
}

Lebih singkat dan tetap powerful!

Contoh HTML + CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    a {
      text-decoration: underline blue dashed 2px;
    }
  </style>
</head>
<body>
  <a href="#">Ini link dengan garis bawah biru, putus-putus, dan tebal.</a>
</body>
</html>

Hasilnya:

Contoh CSS Text Decoration Shorthand
Gambar 33.5: Contoh CSS Text Decoration Shorthand

6. Tips Kecil: Jangan Overused!

Pakai garis dekorasi secukupnya. Misalnya underline terlalu banyak bisa bikin teks jadi berat dibaca. Pakai di tempat yang pas aja, misalnya untuk link, heading tertentu, atau highlight kata penting.

7. Tabel: Semua Properti text-decoration CSS

Properti Fungsi
text-decoration-line Menentukan jenis garis dekorasi (underline, overline, dll)
text-decoration-color Warna dari garis dekorasi
text-decoration-style Gaya garis (solid, dotted, dashed, dll)
text-decoration-thickness Ketebalan garis
text-decoration Shorthand dari semua properti di atas

Penutup

Itu dia panduan singkat tentang CSS Text Decoration. Properti ini emang kelihatan sepele, tapi kalau dimanfaatin dengan baik, bisa ningkatin estetika desain website kamu. Jangan takut coba-coba ya!

Kalau kamu suka artikel kayak gini, share dan simpan buat referensi coding kamu. Happy styling!

Posting Komentar untuk "Panduan Lengkap CSS Text Decoration (Tutorial CSS Part 33)"