MEMBUAT DEKORASI TEKS HTML DENGAN CSS


Halo sobat Artikel Multimedia, text decoration atau dekorasi teks merupakan properti css yang digunakan dalam html untuk membuat variasi tulisan. Jika sobat pernah mengetik di microsoft word, tentu sudah tidak asing lagi dengan yang namanya fitur underline (garis bawah) dan garis tengah (strikethrough). Di html sendiri teks juga dapat diberi garis bawah, garis atas, garis tengah, dan garis atas bawah. Untuk membuat dekorasi teks maka properti yang digunakan adalah text-decoration, namun terdapat 4 properti css lainnya yang dapat digunakan, yaitu:

1. Text-decoration-line

Digunakan untuk membuat garis bawah pada teks. Properti ini dapat diisi dengan value seperti underline, overline, dan line-through.

2. Text-decoration-color

Digunakan untuk mengatur atau mengubah warna garis bawah. Properti ini dapat diisi dengan value berupa nama warna seperti red, green, blue, ataupun warna lainnya.

3. Text-decoration-style

Digunakan untuk mengatur bentuk atau tampilan garis bawah. Properti ini dapat diisi dengan value seperti solid, double, dotted, dashed, dan wavy.

4. Text-decoration-thickness

Digunakan untuk mengatur ketebalan garis bawah. Properti ini dapat diisi dengan value auto atau angka dengan satuan px (pixel) dan % (persen).

 

Berikut ini contoh penerapannya:

1. Menggunakan cara inline

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Membuat Dekorasi Teks</title>
</head>
 
<body>
    <h2 style="text-decoration-line: underline">Teks ini bergaris bawah</h2>
    <h2 style="text-decoration-line: overline">Teks ini bergaris di atas</h2>
    <h2 style="text-decoration-line: line-through">Teks ini bergaris di tengah</h2>
    <h2 style="text-decoration-line: overline underline">Teks ini bergaris di atas dan bawah</h2>
</body>
 
</html>

2. Menggunakan cara internal

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Membuat Dekorasi Teks</title>
</head>
 
<style>
    .garis-bawah {
        text-decoration-line: underline;
        text-decoration-color: blue;
    }
 
    .garis-atas {
        text-decoration-line: overline;
        text-decoration-color: green;
    }
 
    .garis-tengah {
        text-decoration-line: line-through;
        text-decoration-color: red;
    }
 
    .garis-atas-bawah {
        text-decoration-line: overline underline;
        text-decoration-color: orange;
    }
</style>
 
<body>
    <h2 class="garis-bawah">Teks ini bergaris bawah</h2>
    <h2 class="garis-atas">Teks ini bergaris di atas</h2>
    <h2 class="garis-tengah">Teks ini bergaris di tengah</h2>
    <h2 class="garis-atas-bawah">Teks ini bergaris di atas dan bawah</h2>
</body>
 
</html>

3. Menggunakan cara eksternal

- kode di file html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Membuat Dekorasi Teks</title>
</head>
 
<link rel="stylesheet" href="css/style.css">
 
<body>
    <h2 class="garis-bawah">Teks ini bergaris bawah</h2>
    <h2 class="garis-atas">Teks ini bergaris di atas</h2>
    <h2 class="garis-tengah">Teks ini bergaris di tengah</h2>
    <h2 class="garis-atas-bawah">Teks ini bergaris di atas dan bawah</h2>
</body>
 
</html>

- kode di file css

.garis-bawah {
    text-decoration-line: underline;
    text-decoration-color: red;
    text-decoration-thickness: auto;
    text-decoration-style: wavy;
}
 
.garis-atas {
    text-decoration-line: overline;
    text-decoration-color: green;
    text-decoration-thickness: 8px;
    text-decoration-style: dotted;
}
 
.garis-tengah {
    text-decoration-line: line-through;
    text-decoration-color: blue;
    text-decoration-thickness: 20%;
    text-decoration-style: double;
}
 
.garis-atas-bawah {
    text-decoration-line: overline underline;
    text-decoration-color: orange;
    text-decoration-thickness: 50%;
    text-decoration-style: dashed;
}

Sekian pembahasan tentang cara membuat dekorasi teks, jika sobat tertarik dengan artikel seputar multimedia silakan kunjungi postingan kami lainnya di blog ini. Terima kasih … 

Tags:

Posting Komentar

0 Komentar

Terima kasih telah mengunjungi website ini semoga bermanfaat untuk anda