7 Properti CSS Unik yang Jarang Diketahui, Tapi Sangat Berguna

Kalau kamu sering ngulik CSS, mungkin kamu sudah familiar dengan properti seperti margin, padding, atau flex. Tapi tahukah kamu bahwa CSS punya segudang properti unik yang jarang digunakan, padahal bisa bikin tampilan website jadi jauh lebih menarik dan efisien?

Yuk, kita bahas beberapa properti CSS yang jarang diketahui tapi punya manfaat keren!

1. backdrop-filter

Properti ini memungkinkan kamu memberikan efek blur atau brightness pada elemen di belakang suatu elemen. Biasanya digunakan untuk membuat efek “frosted glass” seperti di iOS.

Contoh:

.glass {
  backdrop-filter: blur(10px) brightness(90%);
}

Kegunaan: bikin tampilan elegan dan modern, cocok untuk popup atau navbar transparan.

2. aspect-ratio

Dulu, menjaga proporsi elemen (seperti video atau gambar) bisa jadi PR besar. Sekarang, cukup dengan aspect-ratio!

Contoh:

.card {
  aspect-ratio: 16 / 9;
}

Kegunaan: menjaga rasio lebar–tinggi elemen tanpa pakai padding hack.

3. scroll-snap-type

Ingin efek scroll yang “nempel” seperti di carousel atau mobile app? Ini jawabannya.

Contoh:

.container {
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: start;
}

Kegunaan: menciptakan pengalaman scroll yang halus dan presisi.

4. object-fit

Gambar di web sering nggak proporsional kalau ukurannya beda-beda. Nah, object-fit bisa bantu menyesuaikan gambar tanpa mengubah rasio.

Contoh:

img {
  object-fit: cover;
}

Kegunaan: membuat galeri atau hero image tampil rapi tanpa distorsi.

5. clip-path

Kalau bosan dengan elemen kotak, clip-path bisa memotong bentuk elemen jadi segitiga, lingkaran, atau bahkan bentuk kustom.

Contoh:

.shape {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Kegunaan: membuat desain lebih dinamis dan menarik perhatian.

6. accent-color

Baru-baru ini ditambahkan ke CSS, properti ini memungkinkan kamu mengganti warna bawaan elemen form seperti checkbox atau radio button.

Contoh:

input[type="checkbox"] {
  accent-color: #ff6600;
}

Kegunaan: menyesuaikan elemen form dengan warna brand tanpa ribet.

7. :has() Selector

Ini mungkin yang paling keren — selector baru yang memungkinkan CSS “melihat ke dalam” elemen anaknya.

Contoh:

.card:has(img:hover) {
  transform: scale(1.05);
}

Kegunaan: membuat interaksi dinamis tanpa JavaScript tambahan!

Penutup

Masih banyak properti CSS unik yang jarang diketahui lainnya yang bisa mempercantik tampilan webmu. Cobalah bereksperimen dengan properti-properti ini agar desain situsmu terlihat profesional dan berbeda dari yang lain.
Ingat, sentuhan kecil dalam CSS bisa memberi dampak besar pada pengalaman pengguna!