🧪 CSS Contoh
Kumpulan playground buat eksperimen bebas — geser slider, klik tombol, lihat langsung hasilnya. Gak ada quiz atau tantangan di sini, murni buat main-main dan ngerasain efek tiap property CSS.
🎛 Playground Box Model
Geser slider-nya dan lihat langsung gimana padding, margin, border-radius, border, dan font-size ngaruh ke kotak.
🧲 Playground Flexbox & Grid
Klik tombol-tombol properti dan lihat langsung gimana posisi kotak-kotak di dalam kontainer berubah.
🎬 Playground Animasi
Pilih jenis animasi & easing-nya, atur durasi, klik ▶ Play buat liat efeknya.
🌑 Playground Shadow
Atur box-shadow — offset, blur, spread, warna, dan toggle inset.
🟦 Playground Border Radius
Atur radius tiap sudut TERPISAH — bisa bikin bentuk unik kayak daun atau tetesan air.
🌈 Playground Gradient
Pilih tipe gradient, atur sudutnya (buat linear), dan pilih 2 warna.
🔄 Playground Transform
Atur scale, rotate, translate, dan skew — semua bisa digabung sekaligus.
🎯 Playground Transition
Beda dari Animasi (yang otomatis jalan pakai @keyframes), transition cuma jalan pas ada PERUBAHAN state — coba klik kotaknya!
🎨 Playground Filter
Efek filter paling keliatan di gambar — coba geser slider-nya.
📌 Playground Position
Kotak kuning itu si "target" — ganti position-nya dan lihat gimana dia jadi "keluar" dari alur normal (dibanding kotak abu-abu di sebelahnya yang diam di tempat).
🔤 Playground Typography
Atur font-size, line-height, letter-spacing, ketebalan, dan perataan teks.
Belajar CSS itu paling asik kalau langsung dicoba, bukan cuma dibaca. Ubah semua slider di samping dan lihat gimana teks ini berubah!