Section ini membahas warna, background, dan borders sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.

# Format Warna

Menguasai cara menulis warna di CSS: named colors, hex, rgb(), hsl(), hingga oklch() dan color-mix().

Buka → # Color dan Background-Color

Memahami dua property warna paling sering dipakai: color untuk teks yang diwariskan dan background-color untuk isi kotak.

Buka → # Background Image

Menempelkan gambar, data URI, dan gradien di belakang konten, lengkap dengan aturan tumpukan lapisan dan fallback warna.

Buka → # Background Size

Mengatur seberapa besar gambar background digambar: auto, cover, contain, hingga nilai panjang dan persen.

Buka → # Background Position

Mengendalikan titik penempatan gambar background lewat kata kunci, persen, dan panjang — kunci focal point pada cover.

Buka → # Background Repeat

Mengatur pengulangan gambar background: repeat, no-repeat, repeat-x/y, space tanpa potongan, dan round yang menskalakan tile.

Buka → # Linear Gradient

Bangun latar bergradasi dengan linear-gradient: atur arah, takar color stop, bentuk pola dari garis tegas, dan kenali radial serta conic gradient.

Buka → # Multiple Backgrounds

Tumpuk beberapa latar dalam satu elemen: urutan lapisan, nilai per lapisan, jebakan shorthand background, dan strategi lapisan cadangan.

Buka → # Border Style, Width, dan Color

Olah tampilan border sampai detail: galeri style dan warna, currentColor, border dua warna, perbedaan dashed dan dotted, serta pola aksen kiri.

Buka → # Outline

Kenali outline sebagai garis penanda fokus di luar box model: perbedaannya dengan border, property outline-offset, dan pola focus ring yang ramah keyboard.

Buka → # Opacity

Atur kadar transparansi elemen dengan opacity: cakupannya pada seluruh anak, perbandingannya dengan rgba, state nonaktif, dan efeknya pada tumpukan.

Buka → # Kontras Warna

Uji keterbacaan warna dengan rasio kontras: ambang WCAG 4.5:1 dan 3:1, cara memeriksa, resep warna aman, dan turunan warna dengan color-mix().

Buka →