CSS

Teknik CSS modern, animations, dan layout advanced untuk aplikasi web profesional

Pengenalan

CSS modern telah berkembang jauh melampaui styling sederhana. courses ini akan mengajarkan Anda teknik-teknik advanced seperti CSS Grid, Flexbox mastery, animations, custom properties, dan arsitektur CSS yang scalable.

CSS Grid Mastery

Grid Basics

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
  padding: 20px;
}

/* Responsive grid */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* Named grid areas */
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 20px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Advanced Grid Techniques

/* Overlapping grid items */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 200px);
  gap: 10px;
}

.featured {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  z-index: 1;
}

/* Dense packing */
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 20px;
  grid-auto-flow: dense;
  gap: 10px;
}

.masonry-item {
  grid-row: span var(--row-span);
}

/* Subgrid (modern browsers) */
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.child {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
}

Flexbox Advanced

Complex Layouts

/* Holy Grail Layout */
.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.holy-grail-header,
.holy-grail-footer {
  flex: 0 0 auto;
}

.holy-grail-body {
  display: flex;
  flex: 1 0 auto;
}

.holy-grail-sidebar {
  flex: 0 0 200px;
  order: -1;
}

.holy-grail-content {
  flex: 1 0 0;
}

.holy-grail-ads {
  flex: 0 0 150px;
}

/* Card layout dengan equal heights */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}

.card-content {
  flex: 1 0 auto;
}

.card-footer {
  flex: 0 0 auto;
  margin-top: auto;
}

Flexbox Tricks

/* Center anything */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Space between with wrapping */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

/* Sticky footer */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

CSS Custom Properties (Variables)

Basic Usage

:root {
  /* Colors */
  --color-primary: #3498db;
  --color-secondary: #2ecc71;
  --color-danger: #e74c3c;
  --color-text: #333;
  --color-bg: #fff;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

/* Usage */
.button {
  background-color: var(--color-primary);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.button:hover {
  box-shadow: var(--shadow-lg);
}

Dynamic Theming

/* Light theme (default) */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --text-primary: #333333;
  --text-secondary: #666666;
}

/* Dark theme */
[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s, color 0.3s;
}

/* JavaScript untuk toggle theme */
<script>
const toggleTheme = () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
};
</script>

Responsive Variables

:root {
  --container-width: 1200px;
  --grid-columns: 12;
  --gutter: 20px;
}

@media (max-width: 768px) {
  :root {
    --container-width: 100%;
    --grid-columns: 6;
    --gutter: 10px;
  }
}

.container {
  max-width: var(--container-width);
  padding: 0 var(--gutter);
}

Animations dan Transitions

CSS Transitions

/* Basic transition */
.button {
  background-color: #3498db;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2980b9;
}

/* Multiple properties */
.card {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: 
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Transition dengan delay */
.menu-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: 
    opacity 0.3s ease,
    transform 0.3s ease;
}

.menu-item:nth-child(1) { transition-delay: 0.1s; }
.menu-item:nth-child(2) { transition-delay: 0.2s; }
.menu-item:nth-child(3) { transition-delay: 0.3s; }

.menu.active .menu-item {
  opacity: 1;
  transform: translateX(0);
}

CSS Animations

/* Keyframe animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

/* Loading spinner */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

.notification {
  animation: pulse 2s ease-in-out infinite;
}

/* Bounce animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.bounce {
  animation: bounce 2s infinite;
}

/* Slide in from left */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-left {
  animation: slideInLeft 0.5s ease-out;
}

Complex Animations

/* Staggered animation */
.list-item {
  opacity: 0;
  animation: fadeInUp 0.5s ease forwards;
}

.list-item:nth-child(1) { animation-delay: 0.1s; }
.list-item:nth-child(2) { animation-delay: 0.2s; }
.list-item:nth-child(3) { animation-delay: 0.3s; }
.list-item:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Morphing shapes */
@keyframes morph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

.blob {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, #3498db, #2ecc71);
  animation: morph 8s ease-in-out infinite;
}

/* Text reveal animation */
@keyframes reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.reveal-text {
  animation: reveal 1s ease-out;
}

Modern CSS Features

Container Queries

.card-container {
  container-type: inline-size;
  container-name: card;
}

.card {
  padding: 1rem;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

@container card (min-width: 600px) {
  .card {
    grid-template-columns: 1fr 3fr;
    padding: 2rem;
  }
}

CSS Nesting (Modern)

.card {
  padding: 1rem;
  background: white;
  border-radius: 8px;
  
  & .card-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  & .card-content {
    color: #666;
    
    & p {
      margin-bottom: 1rem;
    }
  }
  
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    
    & .card-title {
      color: #3498db;
    }
  }
  
  @media (max-width: 768px) {
    padding: 0.5rem;
  }
}

CSS :has() Selector

/* Style parent based on child */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
}

/* Form validation styling */
.form-group:has(input:invalid) {
  border-color: red;
}

.form-group:has(input:valid) {
  border-color: green;
}

/* Conditional styling */
.article:has(> .featured-image) {
  padding-top: 0;
}

.nav:has(.dropdown:hover) {
  z-index: 1000;
}

CSS Layers

@layer reset, base, components, utilities;

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
  }
}

@layer components {
  .button {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    background: #3498db;
    color: white;
  }
}

@layer utilities {
  .text-center { text-align: center; }
  .mt-4 { margin-top: 1rem; }
}

Responsive Design Advanced

Modern Media Queries

/* Viewport-based */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
@media (min-width: 1536px) { /* 2xl */ }

/* Feature queries */
@media (hover: hover) {
  .button:hover {
    background-color: #2980b9;
  }
}

@media (hover: none) {
  .button:active {
    background-color: #2980b9;
  }
}

/* Orientation */
@media (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (orientation: portrait) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Prefers color scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
  }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Fluid Typography

:root {
  /* Clamp for fluid sizing */
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  --font-size-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --font-size-2xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
}

h1 {
  font-size: var(--font-size-2xl);
}

h2 {
  font-size: var(--font-size-xl);
}

body {
  font-size: var(--font-size-base);
}

CSS Architecture

BEM Methodology

/* Block */
.card { }

/* Element */
.card__header { }
.card__body { }
.card__footer { }

/* Modifier */
.card--featured { }
.card--large { }
.card__header--dark { }

/* Example */
.button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
}

.button__icon {
  margin-right: 0.5rem;
}

.button--primary {
  background-color: #3498db;
  color: white;
}

.button--secondary {
  background-color: #95a5a6;
  color: white;
}

.button--large {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

Utility-First Approach

/* Spacing utilities */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-4 { margin: 1rem; }

.mt-4 { margin-top: 1rem; }
.mr-4 { margin-right: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.ml-4 { margin-left: 1rem; }

/* Flexbox utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 1rem; }

/* Text utilities */
.text-center { text-align: center; }
.text-lg { font-size: 1.125rem; }
.font-bold { font-weight: bold; }
.text-primary { color: #3498db; }

/* Display utilities */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

Performance Optimization

CSS Optimization

/* Use transform instead of position */
/* ❌ Slow */
.element {
  position: relative;
  left: 100px;
  top: 100px;
}

/* ✅ Fast */
.element {
  transform: translate(100px, 100px);
}

/* Use will-change for animations */
.animated-element {
  will-change: transform, opacity;
}

.animated-element:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

/* Remove will-change after animation */
.animated-element.animation-done {
  will-change: auto;
}

/* Contain layout */
.card {
  contain: layout style paint;
}

/* Content-visibility for long lists */
.list-item {
  content-visibility: auto;
  contain-intrinsic-size: 0 200px;
}

Latihan Praktis

Project 1: Responsive Dashboard

Buat dashboard layout dengan:

CSS Grid untuk layout utama
Flexbox untuk komponen
Responsive design (mobile-first)
Dark mode toggle
Smooth animations

Project 2: Animation Library

Buat library animasi dengan:

Fade, slide, bounce, rotate animations
Staggered animations
Loading spinners
Progress bars
Skeleton screens

Project 3: Component Library

Buat component library dengan:

Buttons (berbagai variant)
Cards (berbagai layout)
Forms (dengan validation styling)
Navigation (responsive)
Modals dan tooltips

Kesimpulan

CSS modern memberikan tools yang powerful untuk membangun UI yang beautiful dan performant. Dengan menguasai Grid, Flexbox, animations, dan CSS architecture, Anda dapat membuat aplikasi web yang professional dan maintainable.

CSS