CSS ADVANCED

Tujuan Pembelajaran

Setelah menyelesaikan bab ini, kamu akan mampu:

Peta Materi Bab 6

Klik salah satu topik untuk langsung melompat ke materinya.

Property position menentukan di mana sebuah elemen diletakkan di halaman. Ada 4 nilai utama: relative, absolute, fixed, dan sticky.

Relative & Absolute

Relative & Absolute — Contoh Nyata

.produk {
  position: relative; /* patokan */
}

.diskon {
  position: absolute; /* menempel */
  top: 10px;
  left: 10px;
}

/* ✅ Parent menjadi patokan */
.parent {
  position: relative;
}

/* ✅ Child menempel ke patokan */
.child {
  position: absolute;
  top: 10px;
  right: 10px;
}

Fixed & Sticky

.navbar {
  position: sticky;
  top: 0;          /* nempel di atas */
}
.tombol-chat {
  position: fixed;
  bottom: 20px;
  right: 20px;     /* selalu di pojok */
}

Demo Posisi Lengkap

Tekan tombol untuk melihat 4 kotak terbang ke posisinya masing-masing — seperti puzzle yang menyusun diri.

.relative { position: relative; top: 10px; left: 10px; }
.absolute { position: absolute; top: 10px; right: 10px; }
.fixed    { position: fixed;    bottom: 10px; left: 10px; }
.sticky   { position: sticky;   top: 0; }

Block vs Inline vs Inline-Block

Klik tombol untuk melihat 4 kotak yang sama berubah tipe tampilan secara langsung.

.block        { display: block; }        /* turun ke bawah */
.inline       { display: inline; }       /* berjajar */
.inline-block { display: inline-block; }  /* jajar + bisa diukur */

Membuat Menu Navigasi

Contoh nyata: mengubah daftar link menjadi menu horizontal dengan display: inline-block.

nav a {
  display: inline-block;   /* link berjajar */
  padding: 8px 16px;
  color: #C9A84C;
}
nav a:hover {
  background: #7B2FBE;
  color: #fff;
}

justify-content: Mengatur Posisi Item

Mobil sudah berjajar. Sekarang kita atur posisi dan jarak mereka pada sumbu utama (kiri ↔ kanan).

.container {
  display: flex;
  justify-content: flex-start;
}

Arah & Pembungkus: Direction & Wrap

Mengontrol arah aliran item (mendatar/menurun) dan perilaku saat tempat parkir penuh.

align-items & Rumus Sakti Centering

Jika justify-content mengatur posisi horizontal, maka align-items mengatur posisi vertikal (sumbu silang).

.container {
  display: flex;
  justify-content: center; /* tengah mendatar */
  align-items: center;     /* tengah menurun */
  height: 100vh;
}

Membagi Ruang: Kolom, Baris, fr & repeat()

Mengatur pembagian kolom (lebar) dan baris (tinggi) secara fleksibel dengan satuan fr (fraction).

.galeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Penempatan Item & Konsep Grid Lines

Elemen bisa membentang beberapa kolom atau baris menggunakan nomor Grid Line.

.header  { grid-column: 1 / -1; } /* bentang penuh dari awal ke akhir */
.sidebar { grid-row: span 2; }    /* bentang 2 baris ke bawah */
.konten  { grid-column: span 2; } /* bentang 2 kolom ke samping */
.container { place-items: center; } /* teks & isi kotak pas di tengah! */

Responsive Grid & Perbandingan: Flexbox vs Grid

⚔️ Kapan Pakai Flexbox? Kapan Pakai Grid?

@keyframes Animation

@keyframes loncat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-80px); }
}
.bola {
  animation: loncat 1.2s ease-in-out infinite;
}

Transform Playground

Geser slider untuk mengubah bentuk kotak secara real-time: rotate, scale, translate, dan skew.

.kotak {
  transform: rotate(0deg) scale(1) translateX(0px) skewX(0deg);
}
/* rotate=putar · scale=besar-kecil · translate=geser · skew=miring */

Galeri Hover Effects

Arahkan kursor ke setiap kartu untuk melihat 6 efek berbeda. Inilah gabungan transition + transform yang membuat web terasa hidup.

Membangun Landing Page Modern

Tekan "Langkah Berikutnya" untuk melihat halaman dibangun bertahap: struktur → layout → animasi.

Cheat Sheet CSS Advanced

Semua properti penting dalam satu layar. Boleh di-screenshot untuk catatan!

Navigation Bar dengan Flexbox

Photo Gallery dengan CSS Grid

.galeri {
  display: grid;
  grid-template-columns: /* TODO: atur kolom */ ;
  gap: 8px;
}
.foto-utama {
  /* TANTANGAN: grid-column: span 2; grid-row: span 2; */
}

Proyek: Landing Page Lengkap