CSS Learning Guide
Caricato da
rys060710f2CSS Learning Guide
Caricato da
rys060710f2CSS Learning Guide · Hari 1 – 14
CSS
Learning Guide
Hari 1 – 14 · Dasar hingga Standar Industri
© CSS Learning Guide | Halaman 1
CSS Learning Guide · Hari 1 – 14
Daftar Isi
Minggu 1 — Fondasi CSS
Hari 1 · Cara Pakai CSS + Selector Dasar
Hari 2 · Box Model
Hari 3 · Typography
Hari 4 · Background & Color
Hari 5 · Display & Visibility
Hari 6 · Positioning
Hari 7 · Review + Mini Project
Minggu 2 — Layout Modern
Hari 8 · Flexbox Bagian 1
Hari 9 · Flexbox Bagian 2
Hari 10 · CSS Grid
Hari 11 · Responsive Design
Hari 12 · Pseudo-class & Pseudo-element
Hari 13 · Transition & Animasi
Hari 14 · Final Project: Landing Page
© CSS Learning Guide | Halaman 2
CSS Learning Guide · Hari 1 – 14
© CSS Learning Guide | Halaman 3
CSS Learning Guide · Hari 1 – 14
Hari 1 · Cara Pakai CSS + Selector Dasar
3 Cara Menulis CSS
1. Inline — langsung di tag HTML
Hindari untuk proyek nyata — susah di-maintain.
<p style="color: red;">Halo dunia</p>
2. Internal — di dalam <style> di <head>
Cocok untuk belajar cepat, kurang ideal untuk proyek besar.
<head>
<style>
p { color: red; }
</style>
</head>
3. External — file .css terpisah ⭐ Standar Industri
HTML dan CSS terpisah rapi. Ini yang selalu dipakai di dunia kerja.
<!-- [Link] -->
<link rel="stylesheet" href="[Link]">
/* [Link] */
p { color: red; }
Anatomi CSS
Setiap aturan CSS terdiri dari: Selector, Property, dan Value.
selector {
property: value;
}
p {
color: red; /* property: value */
font-size: 16px;
}
4 Selector Dasar
Selector Simbol Fungsi Contoh
Tag p, h1, div Semua elemen dengan tag itu p { color: blue; }
Class .nama Elemen dengan class tertentu .penting { color: red; }
ID #nama Satu elemen unik saja #logo { color: green; }
Universal * Semua elemen (untuk CSS reset) * { margin: 0; }
© CSS Learning Guide | Halaman 4
CSS Learning Guide · Hari 1 – 14
/* Tag selector */
p { color: blue; }
/* Class selector — paling sering dipakai */
.penting { color: red; }
/* ID selector */
#logo { color: green; }
/* Universal — CSS reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
© CSS Learning Guide | Halaman 5
CSS Learning Guide · Hari 1 – 14
Hari 2 · Box Model
Konsep Utama
Setiap elemen HTML adalah kotak dengan 4 lapisan. Ini adalah konsep paling penting di CSS.
💡 Bayangkan paket kiriman: Konten = barang, Padding = bubble wrap, Border = kardus, Margin = jarak antar
paket.
┌───────────────────────────────┐
│ MARGIN │ ← jarak ke elemen lain (transparan)
│ ┌───────────────────────┐ │
│ │ BORDER │ │ ← garis tepi
│ │ ┌───────────────┐ │ │
│ │ │ PADDING │ │ │ ← jarak konten ke border
│ │ │ ┌─────────┐ │ │ │
│ │ │ │ KONTEN │ │ │ │ ← teks / gambar
│ │ │ └─────────┘ │ │ │
│ │ └───────────────┘ │ │
│ └───────────────────────┘ │
└───────────────────────────────┘
Properti Box Model
div {
width: 200px;
height: 100px;
padding: 20px; /* semua sisi sama */
padding: 10px 20px; /* atas-bawah | kiri-kanan */
padding: 10px 20px 10px 20px; /* atas kanan bawah kiri */
border: 2px solid black; /* tebal | jenis | warna */
border: 2px dashed blue;
margin: 20px; /* jarak ke elemen lain */
margin: 0 auto; /* tengahkan horizontal */
}
💡 Urutan 4 nilai: Top → Right → Bottom → Left (ingat: TRouBLe)
⚠️Masalah Klasik & Solusinya
⚠️ Secara default, padding & border MENAMBAH lebar. width: 200px + padding: 20px + border: 5px = 250px
total!
/* Selalu taruh ini di paling atas file CSS — standar industri */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* width sudah include padding & border */
}
© CSS Learning Guide | Halaman 6
CSS Learning Guide · Hari 1 – 14
Lapisan Fungsi Ikut background?
padding Jarak konten ke border (dalam) ✅ Ya
border Garis tepi elemen Bisa diatur sendiri
margin Jarak ke elemen lain (luar) ❌ Transparan
© CSS Learning Guide | Halaman 7
CSS Learning Guide · Hari 1 – 14
Hari 3 · Typography
Properti Typography
body {
font-family: "Poppins", sans-serif; /* jenis huruf */
font-size: 16px; /* ukuran huruf */
font-weight: 400; /* ketebalan: 100-900 */
font-style: italic; /* miring */
line-height: 1.6; /* jarak antar baris */
color: #2c3e50; /* warna teks */
text-align: center; /* rata teks */
text-decoration: none; /* garis pada teks */
text-transform: uppercase; /* kapitalisasi */
letter-spacing: 2px; /* jarak antar huruf */
}
Penjelasan Tiap Properti
font-family — jenis huruf
Selalu gunakan font stack (cadangan) agar aman di semua perangkat.
font-family: "Poppins", sans-serif; /* modern, bersih */
font-family: Arial, Helvetica, sans-serif; /* aman di semua OS */
font-family: "Times New Roman", serif;
💡 Google Fonts gratis: [Link] — tambahkan link di <head> sebelum [Link]. Font populer: Inter,
Poppins, Roboto.
font-size — ukuran huruf
h1 { font-size: 32px; } /* px — tetap, mudah diprediksi */
p { font-size: 16px; } /* default browser = 16px */
p { font-size: 1rem; } /* rem — relatif ke root, standar industri */
font-weight — ketebalan
font-weight: 400; /* normal / regular */
font-weight: 700; /* bold */
font-weight: 300; /* light */
font-weight: bold; /* sama dengan 700 */
line-height — jarak antar baris
p { line-height: 1.5; } /* nyaman dibaca — pakai tanpa satuan */
p { line-height: 1.7; } /* longgar, cocok untuk artikel */
text-align, text-decoration, text-transform
text-align: left | center | right | justify;
text-decoration: none; /* hapus garis bawah link */
text-decoration: underline; /* garis bawah */
text-transform: uppercase; /* SEMUA BESAR */
text-transform: capitalize; /* Tiap Kata Besar */
© CSS Learning Guide | Halaman 8
CSS Learning Guide · Hari 1 – 14
Properti Nilai Umum Fungsi
font-family "Poppins", sans-serif Jenis huruf
font-size 16px, 1rem, 2rem Ukuran huruf
font-weight 400 (normal), 700 (bold) Ketebalan
line-height 1.5 – 1.7 (tanpa satuan) Jarak baris
text-align left, center, right, justify Rata teks
color #hex, rgb(), rgba() Warna teks
text-decoration none, underline Garis pada teks
text-transform uppercase, capitalize Kapitalisasi
© CSS Learning Guide | Halaman 9
CSS Learning Guide · Hari 1 – 14
Hari 4 · Background & Color
Format Warna di CSS
color: red; /* named color */
color: #3498db; /* HEX — paling umum ⭐ */
color: rgb(52, 152, 219); /* RGB — nilai 0-255 */
color: rgba(52, 152, 219, 0.5);/* RGBA — + transparansi 0-1 ⭐ */
Properti Background
div {
background-color: #3498db;
background-color: rgba(0, 0, 0, 0.5); /* warna transparan */
background-image: url("[Link]");
background-size: cover; /* isi penuh, bisa terpotong ⭐ */
background-position: center; /* posisi gambar ⭐ */
background-repeat: no-repeat; /* tidak diulang ⭐ */
background-attachment: fixed; /* efek parallax */
}
Gradient — latar tanpa gambar ⭐
Sangat sering dipakai untuk hero section, tombol, dan card.
/* linear-gradient(arah, warna-awal, warna-akhir) */
background: linear-gradient(to right, #3498db, #2ecc71);
background: linear-gradient(135deg, #667eea, #764ba2);
background: linear-gradient(to right, #e74c3c, #f39c12, #3498db);
💡 Arah: to bottom (default), to right, to bottom right, atau angka derajat seperti 135deg.
Kombinasi Standar untuk Foto Background
.hero {
background-image: url("[Link]");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
}
© CSS Learning Guide | Halaman 10
CSS Learning Guide · Hari 1 – 14
Hari 5 · Display & Visibility
Block vs Inline
Setiap elemen HTML punya perilaku bawaan. CSS memberi kita kontrol untuk mengubahnya.
Tipe Baris Baru? Width/Height? Contoh Elemen
block ✅ Ya ✅ Bisa <div>, <p>, <h1>, <section>
inline ❌ Tidak ❌ Tidak <span>, <a>, <strong>
inline-block ❌ Tidak ✅ Bisa ⭐ tombol, badge berjajar
Nilai display
/* Block — memenuhi lebar penuh */
a { display: block; width: 200px; padding: 10px; }
/* Inline — mengalir bersama teks, tidak bisa atur width */
li { display: inline; }
/* Inline-block — gabungan terbaik ⭐ */
.tombol {
display: inline-block;
width: 150px;
padding: 10px 20px;
}
/* None — hilang total, tidak memakan ruang */
.tersembunyi { display: none; }
Cara Menyembunyikan Elemen
Cara Terlihat? Memakan Ruang? Bisa Diklik?
display: none ❌ ❌ ❌
visibility: hidden ❌ ✅ Ya ❌
opacity: 0 ❌ ✅ Ya ✅ Hati-hati!
overflow — konten yang melebihi kotak
div {
overflow: visible; /* konten meluber keluar (default) */
© CSS Learning Guide | Halaman 11
CSS Learning Guide · Hari 1 – 14
overflow: hidden; /* konten dipotong */
overflow: auto; /* scrollbar muncul jika perlu ⭐ */
overflow: scroll; /* scrollbar selalu tampil */
}
© CSS Learning Guide | Halaman 12
CSS Learning Guide · Hari 1 – 14
Hari 6 · Positioning
Konsep
Secara default elemen mengalir dari atas ke bawah (normal flow). Position memberi kita kontrol untuk
menempatkan elemen di mana saja.
💡 Properti top, left, right, bottom HANYA bekerja jika position bukan static.
5 Nilai Position
/* static — default, top/left tidak berpengaruh */
div { position: static; }
/* relative — geser dari posisi asli, slot asli tetap terjaga */
div { position: relative; top: 20px; left: 30px; }
/* absolute — lepas dari flow, nempel ke parent relative ⭐ */
.parent { position: relative; } /* WAJIB ada ini sebagai jangkar */
.anak { position: absolute; top: 10px; right: 10px; }
/* fixed — menempel ke viewport, tidak ikut scroll */
.navbar { position: fixed; top: 0; width: 100%; z-index: 100; }
/* sticky — campuran relative & fixed, cara modern ⭐ */
.navbar { position: sticky; top: 0; z-index: 100; }
⚠️ Saat pakai absolute, parent-nya WAJIB punya position: relative. Tanpa ini, elemen akan nempel ke <body>.
z-index — siapa yang tampil di depan
Nilai lebih besar = lebih di depan. Hanya bekerja jika ada position selain static.
.modal { position: fixed; z-index: 999; } /* paling depan */
.navbar { position: sticky; z-index: 100; }
.kartu { position: relative; z-index: 1; }
.deko { position: absolute; z-index: -1; } /* di belakang */
Position Ikut Flow? Referensi Posisi Ikut Scroll?
static ✅ Ya — ✅ Ya
relative ✅ (slot dijaga) Posisi asli sendiri ✅ Ya
absolute ❌ Tidak Parent terdekat (non-static) ✅ Ya
fixed ❌ Tidak Viewport (jendela browser) ❌ Tidak
sticky ✅ lalu ❌ Viewport saat threshold Campuran
© CSS Learning Guide | Halaman 13
CSS Learning Guide · Hari 1 – 14
Hari 7 · Review + Mini Project
Recap Minggu 1
Hari Materi Konsep Kunci
1 Selector Tag, Class (.), ID (#), Universal (*), external CSS
2 Box Model padding, border, margin, box-sizing: border-box
3 Typography font-family, size, weight, line-height, color
4 Background & Color hex, rgba, gradient, background-size: cover
5 Display block, inline, inline-block, none, overflow
6 Positioning relative, absolute, fixed, sticky, z-index
CSS Reset Standar Industri
Selalu taruh ini di paling atas file CSS di setiap project.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
font-size: 16px;
color: #2c3e50;
line-height: 1.6;
}
Struktur Mini Project — Halaman Profil
Coba buat halaman profil yang menggabungkan semua materi minggu 1:
/* Navbar sticky */
.navbar {
position: sticky; top: 0; z-index: 100;
background: rgba(255,255,255,0.95);
padding: 16px 40px;
display: flex;
justify-content: space-between;
}
/* Hero section */
.hero {
min-height: 90vh;
background: linear-gradient(135deg, #1a1a2e, #0f3460);
© CSS Learning Guide | Halaman 14
CSS Learning Guide · Hari 1 – 14
padding: 60px 40px;
}
/* Kartu portfolio dengan label di pojok */
.kartu { position: relative; border-radius: 12px; }
.label { position: absolute; top: 12px; right: 12px; }
/* Skill badge berjajar */
.badge { display: inline-block; padding: 8px 20px; border-radius: 25px; }
© CSS Learning Guide | Halaman 15
CSS Learning Guide · Hari 1 – 14
Hari 8 · Flexbox Bagian 1
Konsep
Flexbox adalah sistem layout 1 dimensi — mengatur elemen dalam satu arah (baris atau kolom). Ada 2 peran:
Container (induk) dan Item (anak langsung).
<div class="container"> <!-- flex container (induk) -->
<div>Item 1</div> <!-- flex item (anak) -->
<div>Item 2</div>
</div>
.container { display: flex; } /* aktifkan flexbox */
Properti di Container
.container {
/* Arah susunan item */
flex-direction: row; /* → kiri ke kanan (default) */
flex-direction: column; /* ↓ atas ke bawah */
/* Posisi di sumbu utama (horizontal jika row) */
justify-content: flex-start; /* kiri (default) */
justify-content: center; /* tengah ⭐ */
justify-content: space-between; /* tepi kiri-kanan, sisa di tengah ⭐ */
justify-content: space-evenly; /* jarak benar-benar sama rata */
/* Posisi di sumbu silang (vertikal jika row) */
align-items: stretch; /* meregang penuh (default) */
align-items: center; /* tengah vertikal ⭐ */
align-items: flex-start; /* atas */
align-items: flex-end; /* bawah */
/* Jarak antar item */
gap: 20px;
}
Kombinasi Paling Sering Dipakai
/* Tengahkan horizontal & vertikal */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* Navbar: logo kiri, menu kanan */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
© CSS Learning Guide | Halaman 16
CSS Learning Guide · Hari 1 – 14
/* Card berjajar dengan jarak */
.card-wrapper {
display: flex;
gap: 24px;
}
© CSS Learning Guide | Halaman 17
CSS Learning Guide · Hari 1 – 14
Hari 9 · Flexbox Bagian 2
Properti di Flex Item
Kemarin semua properti di container (induk). Sekarang properti di item (anak) untuk kontrol lebih detail.
.item {
/* flex-grow: boleh melebar isi sisa ruang */
flex-grow: 0; /* tidak melebar (default) */
flex-grow: 1; /* boleh melebar, ambil sisa ruang */
/* flex-shrink: boleh mengecil jika ruang sempit */
flex-shrink: 1; /* boleh mengecil (default) */
flex-shrink: 0; /* tidak boleh mengecil */
/* flex-basis: ukuran awal sebelum grow/shrink */
flex-basis: auto; /* ikut konten (default) */
flex-basis: 200px;
/* SHORTHAND — paling sering dipakai ⭐ */
flex: 1; /* grow:1, shrink:1, basis:0 */
flex: 0 0 200px; /* ukuran tetap 200px */
/* align-self: override align-items untuk 1 item */
align-self: center;
align-self: flex-end;
/* order: ubah urutan tampilan tanpa ubah HTML */
order: 1; /* default: 0, nilai kecil tampil duluan */
}
/* flex-wrap: item pindah baris jika tidak muat */
.container { flex-wrap: wrap; }
Contoh Nyata
/* Layout sidebar + konten utama */
.container { display: flex; gap: 24px; }
.sidebar { flex: 0 0 250px; } /* lebar tetap 250px */
.konten-utama { flex: 1; } /* isi sisa ruang */
/* 3 kolom sama rata */
.container { display: flex; gap: 24px; }
.item { flex: 1; }
/* Card wrap — turun otomatis jika layar sempit */
.container { display: flex; flex-wrap: wrap; gap: 20px; }
.card { flex: 0 0 300px; }
Properti Dipasang di Fungsi
flex: 1 Item Isi sisa ruang — paling sering dipakai
flex: 0 0 Xpx Item Ukuran tetap, tidak grow/shrink
© CSS Learning Guide | Halaman 18
CSS Learning Guide · Hari 1 – 14
align-self Item Override align-items untuk 1 item
order Item Ubah urutan tampilan
flex-wrap: wrap Container Item pindah baris jika tidak muat
© CSS Learning Guide | Halaman 19
CSS Learning Guide · Hari 1 – 14
Hari 10 · CSS Grid
Flexbox vs Grid
Flexbox Grid
Dimensi 1D — baris ATAU kolom 2D — baris DAN kolom sekaligus
Cocok untuk Navbar, card berjajar, komponen kecil Layout halaman, galeri, dashboard
Cara pikir Item yang mengalir Kotak yang sudah dipetakan
Properti di Container
.container {
display: grid;
/* Definisikan kolom */
grid-template-columns: 200px 200px 200px; /* 3 kolom 200px */
grid-template-columns: 1fr 1fr 1fr; /* 3 kolom sama rata ⭐ */
grid-template-columns: 200px 1fr; /* sidebar + konten */
grid-template-columns: repeat(3, 1fr); /* cara singkat ⭐ */
/* Definisikan baris (opsional) */
grid-template-rows: 80px 1fr 60px; /* header, konten, footer */
/* Jarak antar sel */
gap: 20px;
}
/* fr = fractional unit: bagian dari sisa ruang (mirip flex-grow) */
Properti di Item — Span
.item {
grid-column: span 2; /* bentang 2 kolom dari posisi saat ini ⭐ */
grid-column: 1 / -1; /* dari kolom 1 sampai kolom terakhir ⭐ */
grid-column: 1 / 3; /* mulai kolom 1, berakhir sebelum kolom 3 */
grid-row: span 2; /* bentang 2 baris */
}
Grid Responsif Otomatis ⭐
Kolom otomatis menyesuaikan layar tanpa media query. Di layar lebar banyak kolom, di HP jadi 1 kolom.
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
© CSS Learning Guide | Halaman 20
CSS Learning Guide · Hari 1 – 14
gap: 20px;
}
/* auto-fill: buat kolom sebanyak yang muat */
/* minmax(200px, 1fr): minimal 200px, maksimal 1fr */
Contoh Layout Halaman
.layout {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: 60px 1fr 60px;
gap: 16px;
min-height: 100vh;
}
.header { grid-column: 1 / -1; } /* span penuh */
.footer { grid-column: 1 / -1; } /* span penuh */
© CSS Learning Guide | Halaman 21
CSS Learning Guide · Hari 1 – 14
Hari 11 · Responsive Design
3 Fondasi Responsive
Fondasi Fungsi
1. Viewport meta tag Biar HP tidak zoom out
2. Unit relatif (%, vw, rem) Ukuran fleksibel ikut layar
3. Media query (@media) CSS berbeda untuk ukuran layar berbeda
1. Viewport Meta Tag
<!-- Wajib ada di <head> setiap halaman -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Unit Relatif
/* % — relatif ke parent */
.container {
width: 80%;
max-width: 1100px; /* pola paling umum ⭐ */
margin: 0 auto; /* tengahkan */
}
/* vw / vh — relatif ke viewport */
.hero { min-height: 100vh; width: 100vw; }
/* rem — relatif ke font root, standar industri ⭐ */
html { font-size: 16px; } /* 1rem = 16px */
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */
3. Media Query ⭐
/* CSS normal = berlaku untuk desktop */
/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
/* HP (≤ 768px) */
@media (max-width: 768px) {
.navbar {
flex-direction: column;
gap: 12px;
© CSS Learning Guide | Halaman 22
CSS Learning Guide · Hari 1 – 14
}
.hero {
flex-direction: column;
text-align: center;
}
.grid { grid-template-columns: 1fr; }
h1 { font-size: 1.8rem; }
}
/* HP kecil (≤ 480px) */
@media (max-width: 480px) {
h1 { font-size: 1.5rem; }
}
💡 Cara test: buka DevTools (F12) → klik ikon HP di pojok kiri atas → pilih ukuran device. Atau tarik pinggir
browser perlahan.
© CSS Learning Guide | Halaman 23
CSS Learning Guide · Hari 1 – 14
Hari 12 · Pseudo-class & Pseudo-element
Perbedaan
Pseudo-class (:) Pseudo-element (::)
Simbol : (satu titik dua) :: (dua titik dua)
Fungsi Styling berdasarkan kondisi Styling bagian tertentu dari elemen
Contoh :hover, :focus, :nth-child() ::before, ::after, ::placeholder
Pseudo-class
/* :hover — saat mouse di atas elemen */
.tombol:hover { background-color: #2980b9; }
/* :focus — saat input/elemen aktif diklik */
input:focus { border-color: #3498db; outline: none; }
/* :active — saat sedang ditekan */
.tombol:active { transform: scale(0.97); }
/* :nth-child() — berdasarkan urutan */
li:nth-child(odd) { background: #f0f0f0; } /* ganjil 1,3,5 */
li:nth-child(even) { background: #fff; } /* genap 2,4,6 */
li:nth-child(3n) { color: green; } /* kelipatan 3 */
/* :first-child, :last-child */
li:first-child { font-weight: 700; }
li:last-child { border-bottom: none; }
/* :not() — kecuali elemen ini */
li:not(:last-child) { border-bottom: 1px solid #eee; }
/* :disabled — input nonaktif */
input:disabled { background: #ecf0f1; cursor: not-allowed; }
Pseudo-element
⚠️ Properti content wajib ada agar ::before dan ::after muncul, meskipun nilainya kosong: content: ""
/* ::before & ::after — sisipkan konten dekoratif ⭐ */
.judul::before {
content: "→ "; /* wajib ada! */
color: #3498db;
}
/* Garis dekorasi bawah judul */
.judul {
© CSS Learning Guide | Halaman 24
CSS Learning Guide · Hari 1 – 14
position: relative;
display: inline-block;
}
.judul::after {
content: "";
position: absolute;
bottom: -6px; left: 0;
width: 100%; height: 3px;
background-color: #3498db;
}
/* ::placeholder — styling teks placeholder */
input::placeholder { color: #bdc3c7; font-style: italic; }
/* ::first-letter — drop cap */
p::first-letter {
font-size: 3rem; font-weight: 700;
float: left; margin-right: 8px;
color: #3498db;
}
Contoh Nyata — Kartu Hover
.kartu {
position: relative;
overflow: hidden;
transition: transform 0.3s;
}
/* Garis atas yang muncul saat hover */
.kartu::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 4px;
background: linear-gradient(to right, #3498db, #2ecc71);
transform: scaleX(0); /* tersembunyi */
transition: transform 0.3s;
}
.kartu:hover { transform: translateY(-4px); }
.kartu:hover::before { transform: scaleX(1); } /* muncul saat hover */
© CSS Learning Guide | Halaman 25
CSS Learning Guide · Hari 1 – 14
Hari 13 · Transition & Animasi
Transition
Membuat perubahan CSS menjadi halus dan smooth. Tanpa transition = perubahan langsung/mendadak.
/* transition: property duration timing delay */
.tombol {
background-color: #3498db;
transition: all 0.3s ease; /* semua properti, 0.3 detik ⭐ */
}
.tombol:hover {
background-color: #2980b9; /* berubah halus! */
}
/* Timing function */
transition: all 0.3s ease; /* standar ⭐ */
transition: all 0.3s ease-in-out; /* lambat di awal & akhir */
transition: all 0.3s linear; /* kecepatan konstan */
transform — properti terbaik untuk dianimasikan ⭐
transform menggeser/memutar/zoom elemen TANPA mengganggu layout. Lebih efisien dari
width/height/margin.
/* Geser */
transform: translateX(20px); /* geser kanan 20px */
transform: translateY(-10px); /* geser atas 10px */
/* Skala */
transform: scale(1.05); /* 105% — sedikit membesar */
transform: scale(0.97); /* efek tombol ditekan */
/* Putar */
transform: rotate(45deg);
/* Gabungan */
transform: translateY(-4px) scale(1.02);
/* Contoh tombol hover */
.tombol { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tombol:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
@keyframes & animation
Animasi bebas dengan banyak tahap. Bisa jalan otomatis tanpa perlu trigger.
/* 1. Definisikan animasi */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
© CSS Learning Guide | Halaman 26
CSS Learning Guide · Hari 1 – 14
@keyframes putar {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* 2. Pasang ke elemen */
.konten { animation: fadeInUp 0.6s ease forwards; }
.spinner { animation: putar 0.8s linear infinite; }
.bola { animation: bounce 1s ease infinite; }
/* Delay per elemen — efek munculnya bertahap */
.item-1 { animation: fadeInUp 0.5s ease 0s forwards; }
.item-2 { animation: fadeInUp 0.5s ease 0.15s forwards; }
.item-3 { animation: fadeInUp 0.5s ease 0.3s forwards; }
Loading Spinner
@keyframes putar {
to { transform: rotate(360deg); }
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #ecf0f1;
border-top-color: #3498db; /* hanya atas yang berwarna */
border-radius: 50%;
animation: putar 0.8s linear infinite;
}
Properti Fungsi
transition: all 0.3s ease Perubahan halus saat hover/focus
transform: translateY(-4px) Naik 4px — efek tombol hover
transform: scale(1.05) Membesar — efek kartu hover
@keyframes nama { from {} to {} } Definisikan tahapan animasi
animation: nama 1s ease forwards Pasang animasi ke elemen
animation-iteration-count: infinite Loop terus menerus
animation-fill-mode: forwards Pertahankan state akhir
© CSS Learning Guide | Halaman 27
CSS Learning Guide · Hari 1 – 14
Hari 14 · Final Project: Landing Page
Semua Materi Digabungkan
Materi Dipakai di
Selector & External CSS Seluruh file
Box Model Semua elemen — padding, margin, border
Typography Hero headline, deskripsi, footer
Background & Color Hero gradient, kartu, overlay
Display Tombol inline-block, badge skill
Positioning Navbar sticky, label absolute di kartu
Flexbox Navbar, hero 2 kolom, fitur berjajar
CSS Grid Section portfolio
Responsive Media query tablet & HP
Pseudo-class Hover tombol & kartu, focus input
Pseudo-element ::before garis, ::after dekorasi
Transition & Animasi Hover efek, fadeInUp hero
CSS Reset & Base
*, *::before, *::after {
margin: 0; padding: 0;
box-sizing: border-box;
}
html { scroll-behavior: smooth; }
body {
font-family: "Poppins", sans-serif;
color: #2c3e50;
line-height: 1.7;
}
Komponen Utama Landing Page
/* NAVBAR sticky */
.navbar {
position: sticky; top: 0; z-index: 100;
display: flex; justify-content: space-between; align-items: center;
padding: 16px 60px;
background: rgba(255,255,255,0.95);
border-bottom: 1px solid #ecf0f1;
}
© CSS Learning Guide | Halaman 28
CSS Learning Guide · Hari 1 – 14
/* HERO */
.hero {
min-height: 92vh;
display: flex; align-items: center; justify-content: space-between;
gap: 40px; padding: 80px 60px;
background: linear-gradient(160deg, #f8fbff, #edf4fd);
}
.hero-konten { animation: fadeInUp 0.7s ease forwards; }
/* FITUR GRID — 4 kolom */
.fitur-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* KARTU FITUR — hover effect */
.fitur-kartu {
background: white; padding: 32px 24px; border-radius: 16px;
transition: transform 0.3s, box-shadow 0.3s;
position: relative; overflow: hidden;
}
.fitur-kartu::before {
content: ""; position: absolute; top: 0; left: 0;
width: 100%; height: 3px;
background: linear-gradient(to right, #3498db, #2ecc71);
transform: scaleX(0); transition: transform 0.3s;
}
.fitur-kartu:hover { transform: translateY(-6px); }
.fitur-kartu:hover::before { transform: scaleX(1); }
/* PORTFOLIO GRID */
.porto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* OVERLAY hover di kartu portfolio */
.porto-overlay {
position: absolute; inset: 0;
background: rgba(0,0,0,0.5);
opacity: 0; transition: opacity 0.3s;
}
.porto-kartu:hover .porto-overlay { opacity: 1; }
/* RESPONSIVE */
@media (max-width: 1024px) {
.fitur-grid { grid-template-columns: repeat(2, 1fr); }
.porto-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.nav-links { display: none; }
.hero { flex-direction: column; text-align: center; padding: 60px 24px; }
.fitur-grid, .porto-grid { grid-template-columns: 1fr; }
}
Langkah Selanjutnya
Selamat — kamu telah menyelesaikan 2 minggu belajar CSS! Sekarang kamu bisa:
• Menulis CSS external yang rapi dan terstruktur
• Memahami Box Model dan selalu pakai box-sizing: border-box
© CSS Learning Guide | Halaman 29
CSS Learning Guide · Hari 1 – 14
• Mengatur typography yang nyaman dibaca
• Membuat layout profesional dengan Flexbox dan Grid
• Membuat website yang responsif di semua ukuran layar
• Menambahkan efek interaktif dengan pseudo-class, transition, dan animasi
Topik selanjutnya:
• JavaScript — buat website benar-benar interaktif
• Tailwind CSS — utility-first CSS framework yang populer
• SASS/SCSS — CSS dengan variabel, nesting, dan mixin
• CSS Custom Properties (Variables) — --warna-utama: #3498db
© CSS Learning Guide | Halaman 30
Potrebbero piacerti anche
- Guida Pratica Ai CSS-Come Usare Da Zero I Fogli Di Stile Con StileNessuna valutazione finoraGuida Pratica Ai CSS-Come Usare Da Zero I Fogli Di Stile Con Stile41 pagine