Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Text-Shadow: Memberi Efek Timbul dan Dimensi pada Teks

Berbeda dengan bayangan kotak, text-shadow mengikuti lekukan setiap huruf secara spesifik. Ini adalah alat yang sangat kuat untuk desain tipografi yang berani.

1. Anatomi Properti Text-Shadow

Properti ini menggunakan nilai yang hampir sama dengan box-shadow, namun tanpa nilai spread.

text-shadow: h-shadow v-shadow blur-radius color;

• h-shadow: Jarak bayangan secara horizontal (kanan/kiri).

• v-shadow: Jarak bayangan secara vertikal (atas/bawah).

• blur-radius: Tingkat keburaman bayangan. Makin tinggi, makin menyebar.

• color: Warna bayangan.

2. Teknik Efek Teks Populer

A. Efek Timbul Sederhana (Drop Shadow)

Memberikan sedikit jarak pada bayangan untuk membuat teks seolah melayang di atas permukaan.

.drop-shadow { color: #2c3e50; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

B. Efek Glow (Bercahaya)

Dengan menghilangkan offset (setel ke 0) dan memberikan blur yang tinggi, teks akan terlihat bersinar.

.glow { color: white; text-shadow: 0 0 10px #3498db, 0 0 20px #3498db;
}

C. Efek Teks 3D (Layered Shadows)

Kita bisa menggunakan banyak bayangan sekaligus (dipisahkan koma) untuk menciptakan ilusi ketebalan karakter.

.text-3d { color: #white; text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #bbb, 3px 3px 0 #aaa, 4px 4px 5px rgba(0,0,0,0.5);
}

3. Tutorial: Meningkatkan Keterbacaan di Atas Gambar

Di proyek SatuMedia (riwara.id), Anda mungkin sering menempatkan teks judul di a tas gambar latar belakang yang ramai. text-shadow adalah penyelamat agar teks tetap terbaca dengan jelas.

Struktur HTML

<div class="hero-section"> <h1 class="readable-text">Berita Utama Hari Inih1>
div>

Kode CSS

.hero-section { background-image: url('news-bg.jpg'); background-size: cover; height: 300px; display: flex; align-items: center; justify-content: center;
} .readable-text { color: white; font-size: 3rem; font-weight: bold; /* Bayangan halus namun gelap membantu memisahkan teks dari gambar */ text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}

4. Tips Penting & Aksesibilitas

1. Jangan Terlalu Berlebihan: Terlalu banyak bayangan pada paragraf panjang akan membuat teks sulit dibaca dan menyebabkan pusing. Gunakan text-shadow hanya untuk Judul (Headings) atau teks pendek.

2. Kontras adalah Kunci: Jika teks berwarna terang, gunakan bayangan gelap. Jika teks berwarna gelap, gunakan bayangan yang lebih gelap lagi atau bayangan terang (glow) untuk pemisahan.

3. Warna Halus: Seperti pada box-shadow, hindari menggunakan warna hitam pekat (#000). Gunakan rgba(0,0,0,0.5) agar transisi terlihat lebih natural.