Belajar Koding HTML & CSS Bagian 28: Membuat Text Shadow
Apa itu text-shadow?
Properti CSS
text-shadow digunakan untuk menambahkan
bayangan pada teks itu sendiri (bukan elemen kotaknya).
Sintaks
umum:
text-shadow: <horizontal-offset>
<vertical-offset> <blur-radius> <color>;
Keterangan
tiap bagian:
- horizontal-offset (h-shadow): jarak bayangan secara
horizontal (positif → ke kanan, negatif → ke kiri)
- vertical-offset (v-shadow): jarak bayangan secara
vertikal (positif → ke bawah, negatif → ke atas)
- blur-radius (opsional): seberapa kabur
bayangan; semakin besar nilainya, semakin lembut bayangannya. Nilai blur
tidak boleh negatif.
- color: warna bayangan (bisa
menggunakan nilai warna seperti rgba(), #hex, nama warna).
Catatan
penting:
- text-shadow mendukung daftar bayangan —
kamu bisa menambahkan lebih dari satu bayangan, dipisah dengan koma, untuk
efek kompleks.
- Tidak ada properti “spread”
pada text-shadow (berbeda dengan box-shadow yang punya spread radius).
- Jika offset horisontal,
vertikal, dan blur semuanya 0, maka bayangan akan berada
tepat di belakang teks (kadang tampak sebagai outline) tergantung warna
yang dipakai
2) Contoh Kode HTML + CSS + Hasilnya
Berikut
contoh sederhana yang bisa kamu salin dan jalankan di browser (atau di CodePen
/ JSFiddle) untuk melihat bagaimana text-shadow bekerja.
<!DOCTYPE html>
<html lang="id">
<head>
<meta
charset="utf-8" />
<meta
name="viewport" content="width=device-width,
initial-scale=1" />
<title>Contoh
Text Shadow CSS</title>
<style>
body {
font-family:
“Segoe UI”, Arial, sans-serif;
background:
#f0f0f0;
color: #222;
padding: 30px;
}
.box {
background:
white;
padding: 20px;
margin-bottom:
30px;
border-radius:
8px;
box-shadow: 0
4px 8px rgba(0,0,0,0.1);
}
h1 {
margin-bottom:
16px;
}
.shadow-none {
text-shadow:
none;
}
.shadow-basic {
text-shadow: 2px
2px 2px rgba(0, 0, 0, 0.4);
}
.shadow-strong {
text-shadow: 4px
4px 5px rgba(0, 0, 0, 0.6);
}
.shadow-multiple {
text-shadow:
2px 2px 2px
rgba(0,0,0,0.4),
-2px -2px 2px
rgba(255,0,0,0.5);
}
.shadow-glow {
text-shadow: 0 0
8px rgba(0, 128, 255, 0.8), 0 0 15px rgba(0, 128, 255, 0.5);
}
</style>
</head>
<body>
<div
class="box">
<h1
class="shadow-none">Text Shadow: none</h1>
<p>Teks ini
tidak memiliki bayangan.</p>
</div>
<div
class="box">
<h1
class="shadow-basic">Text Shadow: 2px 2px 2px
rgba(0,0,0,0.4)</h1>
<p>Bayangan
halus di kanan-bawah.</p>
</div>
<div
class="box">
<h1
class="shadow-strong">Text Shadow: 4px 4px 5px
rgba(0,0,0,0.6)</h1>
<p>Bayangan
lebih tebal dan lebih kabur.</p>
</div>
<div
class="box">
<h1
class="shadow-multiple">Text Shadow: multiple shadows</h1>
<p>Contoh
kombinasi bayangan: satu di kanan-bawah dan satu lagi di kiri-atas dengan warna
merah.</p>
</div>
<div
class="box">
<h1
class="shadow-glow">Text Shadow: glow / efek cahaya</h1>
<p>Bayangan
bercahaya di sekeliling teks (efek glow).</p>
</div>
</body>
</html>
Output Text Shadow
Penjelasan hasil pada masing-masing kelas:
- .shadow-none → tidak ada bayangan (nilai none).
- .shadow-basic → bayangan kecil di sisi kanan
dan bawah teks, kabur ringan.
- .shadow-strong → bayangan lebih jauh dan
lebih kabur, memberi efek “terangkat”.
- .shadow-multiple → dua bayangan diterapkan:
satu ke kanan-bawah (hitam transparan), satu ke kiri-atas (merah
transparan). Efek gabungan menghasilkan bayangan berlapis.
- .shadow-glow → dua bayangan dengan offset 0 tapi blur besar, menghasilkan efek cahaya lembut di
sekitar teks (mirip glow).
3) Tips & Catatan Penting
- Pastikan warna bayangan
memiliki kontras dengan warna teks & latar belakang agar teks tetap
terbaca.
- Gunakan blur secara bijak —
terlalu besar bisa membuat bayangan terlalu kabur dan kehilangan bentuk.
- Untuk efek “garis tepi” atau
“outline” pada teks, kamu bisa menggunakan kombinasi text-shadow atau properti seperti -webkit-text-stroke (meskipun dukungannya tidak
universal).
- Karena text-shadow tidak mendukung “spread
radius”, kamu tidak bisa memperluas bayangan (seperti box-shadow bisa) — itu adalah keterbatasan
bawaan
- Jika kamu ingin bayangan yang
tampak “cakep” di berbagai browser, uji tampilannya di browser modern
(Chrome, Firefox, Safari).
- Kamu bisa mengatur banyak
bayangan sekaligus (daftar dengan koma) untuk efek kreatif.
4) Referensi Asli / Bacaan Lanjutan
- MDN — text-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
- MDN — How to add a shadow to
text https://developer.mozilla.org/en US/docs/Learn_web_development/Howto/Solve_CSS_problems/Add_a_text_shadow
- MDN — Fundamental text &
font styling https://developer.mozilla.org/en US/docs/Learn_web_development/Core/Text_styling/Fundamentals
- StackOverflow — diskusi mengapa
text-shadow tidak punya spread radius https://stackoverflow.com/questions/69809872/why-doesnt-text-shadow-support-spread-radius
- StackOverflow — contoh bayangan
kompleks / multiple shadows https://stackoverflow.com/questions/64791354/text-shadow-effect-on-an-html-element
0 Response to "Belajar Koding HTML & CSS Bagian 28: Membuat Text Shadow"
Post a Comment