Halo teman-teman semuanya, setelah sebelumnya kita belajar tentang CSS Variables, kali ini kita akan membahas efek visual yang sangat populer dan mudah digunakan dalam CSS: box-shadow dan text-shadow.
Efek bayangan ini dapat memberikan tampilan yang lebih hidup dan profesional, mulai dari tombol yang terasa melayang, hingga teks yang tampak menyala atau menonjol.
1. Box Shadow
Digunakan untuk memberikan bayangan pada elemen (kotak) seperti div, tombol, kartu, dan sebagainya.
-
Sintaks:
box-shadow: offset-x offset-y blur-radius color;
-
Contoh:
.card {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
Penjelasan:
0px → jarak horizontal (kanan/kiri)4px → jarak vertikal (atas/bawah)8px → tingkat blurrgba(...) → warna bayangan dan transparansi
-
Contoh Efek Dalam:
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.2);
Menambahkan kata kunci inset akan membuat bayangan masuk ke dalam elemen.
2. Text Shadow
Digunakan untuk memberi efek bayangan pada teks.
-
Sintaks:
text-shadow: offset-x offset-y blur-radius color;
-
Contoh:
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
Catatan:
- Efek ini sangat berguna untuk membuat teks tampak timbul atau menyala.
- Bisa juga digunakan untuk efek glow:
.text-glow {
text-shadow: 0 0 8px #00ffcc;
}
3. Multi Shadow
CSS juga mendukung beberapa bayangan sekaligus, dipisahkan dengan koma:
box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
Contoh Lengkap
Contoh berikut menunjukkan penerapan box-shadow pada kartu dan tombol, serta text-shadow pada judul dan paragraf.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Box Shadow & Text Shadow</title>
<style>
body {
font-family: sans-serif;
background-color: #f9f9f9;
padding: 40px;
}
h1 {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
p {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.card {
background-color: white;
padding: 24px;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
.button {
background-color: #3498db;
color: white;
padding: 12px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease;
}
.button:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<h1>Efek Bayangan di CSS</h1>
<p>Box Shadow dan Text Shadow membuat tampilan lebih menarik dan elegan.</p>
<div class="card">
<h2>Ini Kartu Konten</h2>
<p>Efek bayangan membantu menciptakan kedalaman visual dan fokus pada elemen penting.</p>
<button class="button">Tombol Bayangan</button>
</div>
</body>
</html>
Halaman ini menampilkan efek text-shadow pada teks, dan box-shadow pada kartu serta tombol. Saat tombol di-hover, bayangan menjadi lebih besar, memberikan efek interaktif dan dinamis.
Kesimpulan
Dengan box-shadow dan text-shadow, kita bisa menambahkan dimensi visual pada elemen HTML tanpa gambar atau JavaScript. Efek ini sederhana namun sangat efektif untuk meningkatkan estetika dan fokus pengguna terhadap konten tertentu.
Terima Kasih