Biar nggak bengong tiap nemu istilah asing waktu belajar bikin web. Semua istilah dijelaskan pakai bahasa santai, gampang dicerna — lengkap sama contoh animasi & elemen yang bisa kamu coba langsung
Animasi & Interaksi
Fade in adalah animasi elemen yang muncul perlahan dari transparan ke terlihat penuh. Fade out kebalikannya, elemen menghilang perlahan dari terlihat ke transparan. Bikin transisi konten kerasa halus, nggak tiba-tiba muncul atau hilang aja.
Animasi elemen yang masuk ke layar dengan gerakan geser dari salah satu sisi — kiri, kanan, atas, atau bawah. Bikin tampilan elemen kerasa lebih hidup pas pertama muncul.
Properti yang bikin perubahan tampilan — warna, ukuran, posisi — terjadi secara halus dan bertahap, bukan langsung berubah tiba-tiba. Coba tap kotak di bawah ini.
Ikon berputar yang menandakan sistem sedang memproses sesuatu di belakang layar, biar pengguna tahu untuk menunggu sebentar.
Placeholder abu-abu yang "berkedip" pelan, muncul sebagai pengganti sementara sebelum konten asli (gambar atau teks) selesai dimuat.
Tombol geser on/off yang biasa dipakai buat mengaktifkan atau mematikan sebuah fitur dengan sekali tap.
Elemen yang bisa dibuka-tutup untuk menyembunyikan atau menampilkan konten, biar halaman nggak penuh sesak. Biasa dipakai di bagian FAQ.
Cara bikin web/app pakai bantuan AI, tanpa harus jago ngoding dari nol.
Kotak info kecil yang muncul saat kamu tap atau arahkan kursor ke sebuah elemen, biasanya buat ngasih penjelasan singkat tanpa harus pindah halaman.
Jendela kecil yang muncul mengambang di atas halaman utama, biasanya dipakai untuk konfirmasi, info penting, atau form tambahan tanpa harus pindah halaman.
Halo, ini contoh modal!
Efek riak/gelombang kecil yang menyebar dari titik sentuh saat tombol ditekan, ngasih kesan tombolnya "hidup" dan responsif.
Efek di mana background dan konten bergerak dengan kecepatan berbeda saat halaman di-scroll, bikin kesan tampilan jadi lebih "dalam" atau 3D.
Teknik memuat gambar atau konten hanya saat dibutuhkan — misalnya pas pengguna scroll sampai ke bagian itu — biar halaman web kerasa lebih ringan dan cepat dibuka.
Menu yang muncul ke bawah saat sebuah tombol ditekan, biasanya buat nampilin beberapa pilihan tanpa makan banyak tempat di layar. Coba tap tombolnya.
Tampilan yang menampilkan beberapa konten (gambar atau info) secara bergantian dalam satu area, bisa digeser manual atau jalan otomatis. Sering dipakai buat banner promo di landing page.
Elemen & Style Dasar
Padding adalah jarak kosong di dalam elemen, antara isi/konten dengan tepi elemen itu sendiri. Margin adalah jarak kosong di luar elemen, antara elemen itu dengan elemen lain di sekitarnya. Coba geser slider-nya.
Properti buat melengkungkan sudut-sudut sebuah kotak atau elemen, dari kotak tegas sampai bulat penuh.
Efek bayangan di sekeliling elemen yang bikin tampilannya terasa "terangkat" atau melayang dari latar belakang.
"Kotak" pembungkus yang dipakai untuk mengelompokkan elemen-elemen lain di dalam sebuah halaman — semacam wadah, biar struktur halaman lebih rapi dan mudah diatur.
Sistem layout di CSS yang bikin elemen-elemen bisa disusun secara fleksibel — sejajar, di tengah, atau menyebar — tanpa ribet hitung posisi manual. Coba pencet tombolnya.
Properti yang menentukan elemen mana yang tampil paling depan, saat ada beberapa elemen yang posisinya bertumpukan.
Bar visual yang menunjukkan seberapa jauh sebuah proses sudah berjalan, misalnya upload file atau pengisian profil.
35% selesai
Label kecil berbentuk pil buat nunjukin status, kategori, atau jumlah, misalnya "Baru", "Pending", atau notifikasi angka.
Gambar atau inisial bulat yang mewakili identitas pengguna, sering dipakai di navbar, komentar, atau daftar anggota tim.
Pesan kecil yang muncul sebentar di pojok atau bawah layar buat ngasih tahu sesuatu terjadi, lalu hilang sendiri.
Kolom tempat pengguna mengetik data, biasanya dilengkapi label dan pesan validasi kalau isiannya belum benar.
Belum ada kesalahan
Elemen buat memilih opsi: checkbox untuk pilihan boleh lebih dari satu, radio button untuk pilihan cuma satu dari beberapa opsi.