cssshadowteksPemula3 mnt baca

Text Shadow

Bayangan teks: offset, blur, warna, multi-lapis, dan efek teks 3D sederhana.

Sintaks text-shadow

Mirip box-shadow tapi tanpa spread dan inset:

css

.judul {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  /*             x  y  blur warna */
}

Kegunaan utama: membuat teks terbaca di atas gambar/background ramai.

Multi-lapis untuk efek 3D

css

.teks-3d {
  color: #fff;
  text-shadow:
    1px 1px 0 #ccc,
    2px 2px 0 #bbb,
    3px 3px 0 #aaa,
    4px 4px 8px rgba(0,0,0,0.3);
}

Bayangan bertumpuk tanpa blur menciptakan efek timbul. Trik retro yang masih keren untuk heading display.

Catatan teknis: text-shadow diwariskan ke elemen anak, dan setiap lapisan menambah biaya render. Untuk teks panjang, satu lapis lembut sudah cukup; hemat multi-lapis untuk heading besar.

Analogi: bayangan di dinding

Text-shadow seperti bayangan teks di dinding saat disinari senter dari samping: offset menentukan arah cahaya, blur menentukan ketajaman. Efeknya memberi kedalaman pada teks datar.

Kenapa text-shadow masih relevan?

Dua kegunaan utama yang tidak tergantikan:

Keterbacaan di atas gambar. Teks putih di atas foto terang butuh bayangan gelap agar terbaca. Ini pola hero section klasik.
Efek dekoratif retro. Bayangan keras bertingkat menciptakan gaya pixel/vintage tanpa gambar.

Contoh bertahap: dari keterbacaan ke gaya

Level 1, teks terbaca di atas foto:

css

.hero h1 {
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

Bayangan hitam lembut di belakang teks putih: kontras buatan yang menjamin keterbacaan apa pun fotonya.

Level 2, efek retro bertingkat:

css

.retro {
  color: #fbbf24;
  text-shadow:
    2px 2px 0 #92400e,
    4px 4px 0 rgba(0, 0, 0, 0.2);
}

Beberapa bayangan (pisahkan koma) menumpuk: bayangan keras cokelat + bayangan lembut hitam = teks 3D retro.

Kesalahan umum pemula

Salah: bayangan terlalu kuat. text-shadow: 5px 5px 5px black membuat teks kotor dan sulit dibaca. Bayangan teks harus halus: offset kecil, blur sedang.

Salah: bayangan sebagai pengganti kontras. Bayangan membantu, tapi tidak menggantikan pilihan warna yang kontras. Teks kuning di atas putih tetap buruk walau ada bayangan.

Salah: memakai box-shadow untuk teks. box-shadow membayangi KOTAK elemen, bukan hurufnya. Untuk teks selalu text-shadow.

Latihan kilat

Judul putih di atas foto butuh bayangan agar terbaca. Tulis text-shadow yang halus.
Buat efek retro: teks kuning dengan bayangan keras cokelat 2px + bayangan lembut hitam. Tulis CSS-nya.
Kenapa box-shadow tidak bisa menggantikan text-shadow untuk teks?

Kunci: (1) text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);. (2) text-shadow: 2px 2px 0 #92400e, 4px 4px 0 rgba(0,0,0,0.2);. (3) box-shadow membayangi kotak elemen, bukan bentuk hurufnya.

Istilah kunci

offset-x / offset-y: arah bayangan teks.
blur-radius: kehalusan bayangan.
Bayangan ganda: beberapa bayangan dipisahkan koma untuk efek 3D.
Keterbacaan: alasan utama text-shadow (teks di atas foto).
text-shadow vs box-shadow: yang satu untuk huruf, yang satu untuk kotak elemen.

Contoh tambahan: teks timbul (emboss)

css

.timbul {
  color: #cbd5e1;
  background: #94a3b8;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

Bayangan terang 1px di bawah teks gelap menciptakan ilusi huruf timbul dari permukaan. Kebalikan (bayangan gelap di atas) menciptakan efek terukir (engraved).

Kapan TIDAK memakai text-shadow

Teks body panjang: bayangan melelahkan mata saat dibaca lama.
Di atas background sudah kontras: bayangan hanya menambah kotoran visual.
Lebih dari 2 lapis bayangan: kecuali efek retro yang disengaja, hasilnya norak.

Aturan: text-shadow untuk judul/aksen di atas gambar, bukan untuk semua teks.

Text-shadow + gradien: judul hero premium

css

.judul-hero {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  color: white;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 8px 32px rgba(0, 0, 0, 0.25);
}

Dua lapis bayangan (tajam + baur) membuat judul terbaca di atas foto apa pun. Pola standar hero section modern.

Rangkuman

text-shadow: x y blur warna. Satu lapis untuk keterbacaan, multi-lapis untuk efek dekoratif. Jangan berlebihan pada body text.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Teks Neon

Di playground:

Buat class .neon: teks cyan terang (#22d3ee) dengan 3 lapis text-shadow cyan yang blur-nya membesar (5px, 15px, 30px) di atas background gelap.
Tambahkan div dengan class itu berisi teks "NEON".
Di komentar, jelaskan kenapa text-shadow membantu keterbacaan di atas background ramai.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox