Bayangan bikin elemen kelihatan sedikit terangkat dari halaman, jadi mata langsung tahu mana yang ada di atas. CSS punya box-shadow buat bayangan kotak elemen, text-shadow buat bayangan huruf, dan filter buat efek kayak buram atau hitam putih, mirip filter foto di HP.
🧪 Tebakan cepat: di
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2), angka mana yang bikin pinggiran bayangannya lembut? Tebak dulu, jawabannya ada di bagian "Bayangan kotak denganbox-shadow".
Bayangan kotak dengan box-shadow
.kartu {
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
}
Nilainya dibaca dari kiri ke kanan, dipisah spasi:
2pxadalah offset-x: bayangan digeser 2px ke kanan. Angka negatif menggesernya ke kiri.4pxadalah offset-y: bayangan digeser 4px ke bawah. Angka negatif menggesernya ke atas.8pxadalah blur: seberapa buram pinggirnya.0bikin pinggirnya tajam, makin besar makin lembut.rgba(0, 0, 0, 0.2)adalah warnanya: hitam (0, 0, 0) dengan kepekatan 20% (0.2), jadi bayangannya tipis.
Hasilnya, bayangan abu-abu tipis jatuh sedikit ke kanan bawah kartu, dengan pinggiran yang lembut. Kartunya kelihatan kayak melayang di atas halaman. Jawaban tebakan: angka ketiga, 8px.
Boleh ada angka keempat sebelum warna, namanya spread: 2px 4px 8px 2px bikin bayangannya 2px lebih lebar ke semua sisi. Tambah kata inset di depan, misalnya box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), dan bayangannya pindah ke sisi dalam elemen, kayak cekungan. Cocok buat kotak input yang kelihatan tertekan. Bayangan, di luar maupun di dalam, selalu mengikuti sudut border-radius.
Bayangan huruf dengan text-shadow
h1 {
text-shadow: 2px 2px 4px gray;
}
Urutannya sama: offset-x, offset-y, blur, lalu warna. Bedanya, bayangan ini mengikuti bentuk tiap huruf, bukan kotak elemennya. Hasilnya, tiap huruf judul punya bayangan abu-abu tipis di kanan bawahnya.
Efek visual dengan filter
img {
filter: blur(3px);
}
filter mengubah tampilan elemen kayak filter foto, tanpa mengubah file aslinya. Beberapa yang sering dipakai:
blur(3px)bikin buram.grayscale(100%)bikin hitam putih.brightness(150%)bikin 1,5 kali lebih terang.drop-shadow(2px 4px 6px gray)bikin bayangan yang mengikuti bentuk gambar, misalnya logo PNG transparan, bukan kotaknya.
Beberapa filter bisa digabung, dipisah spasi: filter: grayscale(100%) blur(2px);.
⚠️ Jebakan yang sering ketemu
- Koma di antara angka.
box-shadow: 2px, 4px, 8pxgak valid. Angka dipisah spasi. Koma cuma dipakai buat memisahkan beberapa bayangan sekaligus. - Urutan tertukar.
8px 2px 4pxbukan bayangan yang sama dengan2px 4px 8px. Urutannya selalu offset-x, offset-y, blur, spread. box-shadowdi gambar transparan. Bayangannya tetap kotak, gak peduli bentuk gambarnya. Pakaifilter: drop-shadow(...).- Filter di pembungkus.
filter: blur(2px)di parent bikin semua isinya ikut buram, termasuk teks.
TL;DR: box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2) artinya geser kanan 2px, geser bawah 4px, buram 8px, lalu warna. Angka keempat (spread) opsional, dan inset memindahkan bayangan ke dalam. text-shadow memakai urutan yang sama buat huruf. filter memberi efek kayak blur(), grayscale(), brightness(), dan drop-shadow().
