Ilusi Mata: Transform & Efek Filter
Dulu, merombak foto menjadi hitam putih (grayscale) atau membuat gambar miring membutuhkan software Adobe
Photoshop.
Sekarang, CSS modern dan Tailwind bisa melakukannya langsung di dalam peramban web! Mari
kita manfaatkan utilitas Transforms (Mengubah tata letak / skala) dan
Filters (Memanipulasi gaya visual piksel).
📐 1. Transformasi Tata Letak (Transforms)
Di Tailwind, kamu bisa memutar (rotate), memperbesar (scale), menggeser koordinat posisi
tanpa memengaruhi lajur dokumen (translate), dan memelintir elemen
(skew). Selalu kombinasikan
dengan transition-transform saat hover:!
hover:scale-125
hover:rotate-45
hover:-translate-y-4
hover:-skew-x-12
📸 2. Manipulasi Piksel Foto (Filters)
Filter bekerja nyaris identik seperti filter Instagram! Efek ini sangat bermanfaat untuk mengelola koleksi
kumpulan gambar yang beragam agar terlihat selaras (dengan memaksanya menjadi grayscale atau hitam putih
terlebih dahulu).
filter grayscale
Cocok untuk galeri logo rekanan / sponsor. Arahkan kursor untuk kembalikan warna.
filter blur-sm
Sering dipakai pada situs konten berbayar (Paywall) yang disamarkan.
filter sepia
Memberi sentuhan desain retro era 90-an yang dramatis.
🦇 3. Kekuatan Kegelapan: drop-shadow vs shadow
Jika kamu punya gambar PNG dengan latar belakang transparan kosong, menggunakan Box Shadow biasa (shadow-xl) akan membungkus layarmu dengan
sebuah kotak kubus transparan.
Gunakan Drop Shadow (drop-shadow-2xl) agar bayangan mengikuti
kontur "bentuk miring/acak" dari elemen tersebut.
❌ Box Shadow (shadow-2xl)
Bayangan membungkus kotak HTML bujur sangkar, mengabaikan objek tas.
✅ Drop Shadow (drop-shadow-2xl)
Bayangan dengan cerdas "merayap" mengikuti tepian lekukan ikon tas.
🎓 Ringkasan Visual
Transform dan Filter sangat kuat saat digabungkan dengan komponen interaktif. Kunciannya ada 2:
- Scale & Hover: Jangan lupa bungkus elemen dalam class
overflow-hidden(seperti di Card Foto di topik 10) agar saat gambar membesar (hover:scale-125), ia tidak keluar menusuk batas pinggir kontainer. - Drop-Shadow Sakti: Gunakan selalu
drop-shadow(bukan shadow) pada gambar format PNG transparan logo, masking avatar, dan juga ikon/huruf besar!