🎨 Phase 2 — CSS

P14 · Pertemuan 14 dari 20

CSS Lanjutan & Mini Project CSS

Pseudo-element, transisi CSS, animasi keyframe, CSS filter, dan membangun landing page portofolio responsif sebagai Mini Project.

Phase

Phase 2 — CSS

Topik

CSS Fundamentals

Durasi

90 Menit

Deadline Tugas

3 hari (dikumpulkan H+3 pukul 23.59 WIB)

🎯Tujuan Pembelajaran

01Menggunakan pseudo-class: :hover, :focus, :active, :nth-child(n)
02Menerapkan pseudo-element: ::before, ::after, ::placeholder
03Membuat transisi: transition property, duration, timing-function
04Membuat animasi: @keyframes, animation-name, duration, iteration-count
05Menggunakan CSS Filter: blur, brightness, grayscale
06MINI PROJECT: Landing page responsif dengan animasi dan transisi

📖Sub-topik & Materi

01Pseudo-class: :hover, :focus, :active, :visited, :nth-child(n)
02Pseudo-element: ::before, ::after (content wajib ada), ::placeholder
03Transisi: transition: property duration timing-function delay
04Animasi: @keyframes nama { from {} to {} }, animation: nama 1s ease infinite
05CSS Filter: filter: blur(4px), brightness(0.8), grayscale(100%)
06MINI PROJECT: Landing page portofolio responsif lengkap

💡Penjelasan Konsep

Konsep 1

Pseudo-element ::before dan ::after

::before dan ::after membuat elemen virtual di dalam elemen HTML — tanpa menambahkan HTML baru. Wajib punya property content (bisa berupa teks, simbol, atau string kosong ""). Sangat berguna untuk dekorasi, ikon, label, atau efek visual tanpa mengotori HTML.

css

/* Tambah label "BARU" di pojok kartu */
.kartu {
  position: relative;
}
.kartu: :before {
  content: "BARU";
  position: absolute;
  top: 12px;
  right: 12px;
  background: #F0601A;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}

/* Garis dekoratif di bawah heading */
h2: :after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #3B82F6;
  margin-top: 8px;
}

Konsep 2

Transition CSS — Animasi Perubahan

transition membuat perubahan properti CSS berjalan secara halus dalam durasi tertentu, bukan langsung berubah. Sintaks: transition: property duration easing delay. Tambahkan pada elemen asli (bukan :hover). "all" untuk semua properti, atau sebutkan spesifik untuk performa lebih baik.

css

.tombol {
  background: #3B82F6;
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  /* transition SELALU di sini, bukan di: hover */
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.tombol: hover {
  background: #2563EB;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

Konsep 3

@keyframes — Animasi Kustom

@keyframes mendefinisikan "skrip" animasi: dari mana ke mana. Gunakan from-to untuk dua titik, atau persentase untuk banyak titik. Hubungkan ke elemen dengan animation: nama durasi easing iteration. infinite untuk berulang selamanya, forwards untuk tetap di posisi akhir.

css

/* Definisi animasi */
@keyframes masukDari {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes berputar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Pemakaian */
.hero-text {
  animation: masukDari 0.8s ease-out forwards;
}

.loader {
  animation: berputar 1s linear infinite;
}

/* Stagger: elemen masuk satu per satu */
.kartu: nth-child(1) { animation-delay: 0s; }
.kartu: nth-child(2) { animation-delay: 0.1s; }
.kartu: nth-child(3) { animation-delay: 0.2s; }

💻Contoh Kode Lengkap

css

/* Pseudo-element: :before untuk dekorasi */
.btn: :before {
  content: '→ ';
  color: #F4A300;
}

/* Transisi halus */
.kartu {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kartu: hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.15);
}

/* Animasi Loading Spinner */
@keyframes putar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  animation: putar 1s linear infinite;
}

/* Animasi Fade In */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-title {
  animation: fadeIn 0.6s ease both;
}

/* CSS Filter pada hover gambar */
.foto: hover {
  filter: brightness(1.1) saturate(1.2);
}

⚡Latihan Kelas · Tambahkan transisi dan animasi pada elemen-elemen halaman portofolio

Tambahkan transition ke semua kartu dan tombol (transform + shadow)

Buat loading spinner dengan @keyframes putar

Buat animasi fadeIn untuk hero section saat halaman pertama dibuka

Gunakan ::before untuk menambahkan ikon dekorasi pada heading

Tambahkan filter: grayscale(100%) pada gambar, hilang saat hover

📝 Mini Project 2 — Landing Page Portofolio Responsif

⏰ Deadline: 3 hari (dikumpulkan H+3 pukul 23.59 WIB)

Buat landing page portofolio lengkap responsif 3 breakpoint dengan: navbar sticky, hero section dengan animasi, section skills/about/projects, semua hover state ada transisi smooth, minimal 2 animasi @keyframes, dan deploy ke GitHub Pages.

Kriteria Penilaian	Poin
Landing page responsif sempurna di 3 breakpoint	25
Minimal 2 animasi @keyframes yang bermakna	20
Pseudo-element digunakan minimal 1x (::before atau ::after)	15
Semua hover state ada transisi smooth (bukan langsung berubah)	20
Desain profesional, konsisten, dan rapi	20
Total	100

⚠️Kesalahan yang Sering Dibuat

Meletakkan transition di :hover bukan di elemen asli — animasi hanya muncul saat masuk hover, tidak saat keluar

Lupa content: "" pada ::before/::after — pseudo-element tidak tampil tanpa content

Animasi terlalu banyak atau terlalu cepat — membuat halaman terasa tidak profesional

Tidak menggunakan will-change: transform pada elemen yang dianimasi — performa berat di device lambat

Lupa position: relative pada parent ::before::after absolute — elemen melayang ke tempat salah

💡 Tips Instruktur

will-change: transform; pada elemen yang sering dianimasi untuk performa lebih baik

cubic-bezier() untuk easing animasi custom (gunakan cubic-bezier.com)

Animasi jangan berlebihan — maksimal 2-3 animasi aktif sekaligus

animation-delay untuk staggered effect (elemen muncul satu per satu)

📋 Checklist Belajar

Pahami konsep sebelum latihan

Coba kode sendiri tanpa copy-paste

Kerjakan tugas sebelum deadline

Tanya instruktur jika ada yang belum jelas

🔗 Referensi Belajar Mandiri

MDN — CSS Transitions

↗

MDN — CSS Animations

↗

Cubic Bezier Generator

↗

Animate.css (library animasi siap pakai)

↗

←

Sebelumnya

CSS Grid & Responsive Design