cssfilterefekMenengah5 mnt baca

Filter CSS

Efek visual ala Photoshop: blur, grayscale, brightness, dan kombinasi filter.

Kenapa filter ada?

Dulu, untuk membuat foto hitam-putih atau blur di web, kamu harus mengedit gambar di Photoshop dan mengunggah dua versi. Filter CSS memindahkan pengeditan itu ke browser secara real-time: satu file gambar bisa tampil berwarna, hitam-putih saat hover, atau blur sebagai background, semuanya dari CSS.

Analoginya: filter CSS seperti kacamata. Gambarnya tetap sama, tapi yang kamu lihat berubah tergantung kacamata yang dipakai, dan kacamatanya bisa diganti seketika.

Filter dasar

css

.foto {
  filter: grayscale(100%);   /* hitam putih penuh */
  filter: blur(4px);         /* buram */
  filter: brightness(1.3);   /* 130% terang */
  filter: contrast(1.2);     /* kontras lebih */
  filter: sepia(60%);        /* efek vintage */
  filter: saturate(2);       /* warna 2x lebih hidup */
  filter: hue-rotate(90deg); /* putar roda warna */
  filter: invert(1);         /* negatif film */
  filter: opacity(0.7);      /* transparansi */
}

Kombinasi filter

Filter bisa dirangkai, diterapkan berurutan dari kiri ke kanan:

css

/* Foto vintage dramatis */
.vintage {
  filter: sepia(50%) contrast(1.2) brightness(0.95);
}

/* Hover: dari hitam-putih ke berwarna */
.foto-warna {
  filter: grayscale(100%);
  transition: filter 0.4s;
}

.foto-warna:hover {
  filter: grayscale(0%);
}

Efek hover grayscale-ke-warna adalah pola portofolio klasik yang selalu terlihat profesional.

Contoh: overlay teks terbaca

Masalah umum: teks putih di atas foto terang sulit dibaca. Solusi: gelapkan foto dengan brightness.

css

.hero {
  position: relative;
}

.hero img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  filter: brightness(0.6); /* gelapkan agar teks terbaca */
}

.hero h1 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

Drop-shadow vs box-shadow

css

/* box-shadow: mengikuti kotak elemen */
.kotak { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); }

/* drop-shadow: mengikuti BENTUK konten (termasuk transparansi PNG) */
.logo { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3)); }

Untuk logo PNG dengan background transparan, drop-shadow mengikuti siluet logo, sedangkan box-shadow membuat kotak persegi. Pilih sesuai kebutuhan.

Catatan teknis: filter membuat stacking context baru (seperti transform). Elemen ber-filter dengan z-index bisa bertingkah tak terduga terhadap elemen lain. Juga, filter berat (blur besar) bisa menurunkan performa di HP kentang.

Tips profesional

Efek hover foto profesional: filter: grayscale(100%) normal ke grayscale(0) saat hover + transition: filter 0.4s.
backdrop-filter butuh background semi-transparan agar terlihat.
Filter berat (blur besar) di banyak elemen memperlambat HP kentang: uji di perangkat nyata.

Rangkuman

Filter = edit foto real-time di browser. Rangkai beberapa filter untuk efek kompleks, manfaatkan transisi untuk hover effect, dan ingat bedanya drop-shadow vs box-shadow.

Live Playground

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

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

Tantangan

Racik Filter Vintage

Meracik filter adalah skill desain cepat: tanpa buka editor gambar, kamu bisa mengubah mood foto langsung dari CSS.

Di playground:

Buat class .vintage: kombinasi sepia + contrast + brightness yang terlihat seperti foto lama. Eksperimen angkanya sampai enak dilihat.
Buat efek hover: foto vintage kembali normal (filter: none) dengan transisi halus.
Di komentar, jelaskan kenapa drop-shadow lebih tepat dari box-shadow untuk logo PNG transparan.

<!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