Belajar CSS - Filter, Shadow, dan Efek Visual Modern
Episode ini membahas filter, shadow, dan efek visual modern: box-shadow dan text-shadow untuk kedalaman, properti filter untuk mengubah tampilan gambar dan elemen, backdrop-filter untuk efek kaca, serta drop-shadow yang mengikuti bentuk asli.
#Pendahuluan
Episode 14 memperkenalkan transform dan transisi untuk gerakan. Episode 17 menambahkan lapisan efek visual: bayangan, blur, dan pengaturan warna yang memberi kedalaman dan suasana pada antarmuka.
box-shadow dan text-shadow menciptakan kesan ketinggian dan hierarki. filter mengubah rendering elemen — mem-blur, mengubah saturasi, atau menggeser hue. backdrop-filter memproses area di belakang elemen, menghasilkan efek kaca yang modern.
Mengapa penting? Efek visual adalah pembeda utama antara desain datar dan desain yang terasa hidup. Namun efek juga mahal secara performa jika dipakai berlebihan. Episode ini mengajarkan keduanya: cara memakai dan cara hemat.
#Box-Shadow: Kedalaman Kotak
box-shadow menerima offset horizontal, offset vertikal, blur, spread, dan warna:
.kartu {
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}
.kartu-terangkat {
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15);
}
.tombol {
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}Bayangan kecil dan lembut memberi kesan datar yang halus; bayangan besar dan menyebar menaikkan elemen dari permukaan. Warna bayangan mengikuti warna elemen menciptakan kesan konsisten. Beberapa bayangan bisa digabung dengan koma:
.hero {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.1),
0 8px 24px rgba(0, 0, 0, 0.15);
}
.dalam {
box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.1);
}Bayangan berlapis meniru pencahayaan nyata dengan lebih baik. Kata kunci inset membalik bayangan ke dalam, menciptakan lekukan — umum untuk input dan tombol yang tampak "ditekan".
#Text-Shadow
text-shadow bekerja serupa tetapi untuk teks:
.judul {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.teks-embos {
color: #f8fafc;
text-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
}Gunakan text-shadow dengan hemat — bayangan besar membuat teks kabur. Efek halus satu atau dua piksel sudah cukup untuk kedalaman; hindari bayangan berwarna mencolok pada teks panjang.
#Filter: Mengubah Rendering
Properti filter menerapkan fungsi pemrosesan pada seluruh elemen:
.abu {
filter: grayscale(100%);
}
.kabur {
filter: blur(4px);
}
.cerah {
filter: brightness(1.2);
}
.kontras {
filter: contrast(1.1) saturate(1.3);
}grayscale menghilangkan warna, blur mengaburkan, brightness dan contrast menyesuaikan pencahayaan. Beberapa fungsi bisa digabung dalam satu filter, dipisahkan spasi. Efek umum: gambar grayscale yang berubah menjadi berwarna saat :hover:
.gambar {
filter: grayscale(80%);
transition: filter 0.3s ease;
}
.gambar:hover {
filter: grayscale(0%);
}Transisi bekerja pada filter seperti properti lain. Contoh di atas membuat gambar tampak redup lalu "hidup" saat disentuh kursor.
#Backdrop-Filter dan Drop-Shadow
backdrop-filter menerapkan filter pada area di belakang elemen, bukan elemen itu sendiri:
.navbar {
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
}
.dialog {
background-color: rgba(15, 23, 42, 0.4);
backdrop-filter: blur(12px) saturate(1.2);
}Kombinasi latar semi-transparan dan blur menghasilkan efek kaca buram (frosted glass). Konten yang di-scroll di belakang navbar tampak buram dan tetap terbaca.
.logo {
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}drop-shadow pada filter membentuk bayangan mengikuti bentuk asli elemen — termasuk transparansi gambar PNG dan SVG. Ini berbeda dari box-shadow yang selalu berbentuk persegi.
#Latihan: Kartu dengan Efek Terangkat
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Kartu Efek</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<article class="kartu">
<img
class="gambar"
src="https://picsum.photos/seed/efek/640/360"
alt="Ilustrasi kartu"
width="640"
height="360"
>
<h2>Judul Kartu</h2>
<p>Deskripsi singkat yang menampilkan efek visual pada kartu.</p>
</article>
</body>
</html>* { box-sizing: border-box; }
body { margin: 0; padding: 48px; font-family: system-ui, sans-serif; background-color: #f1f5f9; }
.kartu { max-width: 360px; margin-inline: auto; background-color: white; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 12px 32px rgba(15, 23, 42, 0.12); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.kartu:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(15, 23, 42, 0.1), 0 20px 48px rgba(15, 23, 42, 0.18); }
.gambar { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(0.9); transition: filter 0.3s ease; }
.kartu:hover .gambar { filter: saturate(1.1); }
.kartu h2, .kartu p { padding-inline: 24px; }
.kartu p { padding-bottom: 24px; color: #475569; }Jalankan npx serve . dan arahkan kursor ke kartu. Bayangan membesar dan kartu terangkat lewat transform, sementara gambar menajam saat hover. Keduanya adalah properti yang dijalankan kompositor sehingga tetap halus.
#Kesalahan Umum dan Solusinya
#Efek Berlebihan Memperlambat
Banyak bayangan besar dan blur memperberat rendering. Batasi efek pada elemen penting dan lepas efek saat tidak lagi terlihat.
#Bayangan Persegi pada Gambar Transparan
Untuk logo PNG dan SVG dengan transparansi, box-shadow tampak salah bentuk. Gunakan drop-shadow yang mengikuti kontur asli.
#Blur pada Semua Konten
filter mempengaruhi seluruh elemen termasuk teks, dan backdrop-filter butuh latar semi-transparan agar terlihat. Terapkan keduanya secara sengaja, bukan serampangan.
#Penutup
Inti yang harus dibawa pulang:
box-shadowmemberi kedalaman dengan offset, blur, spread, dan warna.- Beberapa bayangan bisa digabung;
insetmembalik bayangan ke dalam. filtermenerapkan grayscale, blur, brightness, dan saturasi.backdrop-filtermemproses area di belakang elemen untuk efek kaca.drop-shadowmengikuti bentuk asli gambar transparan.- Animasikan efek lewat
transform,opacity, danfilteragar tetap mulus. Di episode 18 selanjutnya kita akan membahas form styling dan kontrol interaktif — membuat input, select, dan checkbox tampil konsisten dan mudah digunakan.