📛 Masking & Shapes

Panduan lengkap CSS Masking & Shapes untuk efek visual kreatif

📌 Elements

💡 Masking & Shape Fundamentals

CSS Masking & Shapes memungkinkan Anda membuat efek visual kompleks dengan menutupi bagian elemen atau mengubah bentuk aliran konten.

mask-shape.css
/* Basic Clip Path */
.clipped {
  clip-path: circle(50% at 50% 50%);
}

/* Image Mask */
.masked {
  mask-image: url('mask.png');
  mask-size: cover;
}

/* Shape Outside */
.shape {
  shape-outside: polygon(0 0, 100% 0, 100% 100%);
  float: left;
}

📝 Penjelasan Detail:

â€ĸ clip-path - Memotong elemen menjadi bentuk tertentu
â€ĸ mask-image - Menerapkan mask menggunakan gambar/SVG
â€ĸ shape-outside - Mengubah aliran konten di sekitar elemen
â€ĸ shape-margin - Menambahkan margin pada shape

🛠ī¸ Features

advanced-masking.css
/* Complex Clip Path */
.complex-clip {
  clip-path: path('M10,10 L100,50 L50,100 Z');
}

/* Gradient Mask */
.gradient-mask {
  mask-image: linear-gradient(to right, black, transparent);
}

/* Circle Shape */
.circle-shape {
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
}

ℹī¸ Browser Support

Clip-path: Chrome 55+, Firefox 54+, Safari 9.1+, Edge 79+. Shape-outside: Chrome 37+, Firefox 62+, Safari 10.1+, Edge 79+.

📊 Basic Tables

shape-values.css
/* Basic Shape Functions */
.circle {
  clip-path: circle(50% at center);
}

.ellipse {
  clip-path: ellipse(25% 40% at 50% 50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

.inset {
  clip-path: inset(10% 20% 30% 40%);
}

📝 Penjelasan Detail:

â€ĸ circle() - Membuat bentuk lingkaran
â€ĸ ellipse() - Membuat bentuk elips
â€ĸ polygon() - Membuat bentuk poligon kustom
â€ĸ inset() - Memotong bagian dalam elemen
â€ĸ path() - Menggunakan path SVG untuk bentuk kompleks

🚀 Advanced Table

advanced-shapes.css
/* Multiple Masks */
.complex-mask {
  mask-image: url('mask1.png'), url('mask2.png');
  mask-composite: exclude;
}

/* Shape with Margin */
.text-flow {
  shape-outside: url('shape.png');
  shape-margin: 20px;
}

/* Animated Clip Path */
.morphing-shape {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
  transition: clip-path 0.5s ease;
}
.morphing-shape:hover {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

ℹī¸ Browser Support

Mask-composite: Chrome 73+, Firefox 53+, Safari 12.1+. Animated clip-path: Chrome 55+, Firefox 54+, Safari 12.1+.

💡 Pro Tips

đŸŽ¯ Best Practices

Gunakan masking dan shapes untuk efek kreatif, tetapi selalu pertimbangkan fallback untuk browser yang tidak mendukung.

best-practices.css
/* ✅ Good - With fallback */
.image-container {
  border-radius: 50%; /* Fallback */
  clip-path: circle(50% at center);
}

/* ✅ Good - Using @supports */
@supports (shape-outside: circle()) {
  .advanced-shape {
    shape-outside: circle(50%);
  }
}

/* ❌ Avoid - Overusing complex shapes */
body > * {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

📝 Penjelasan Detail:

â€ĸ Sediakan fallback - Gunakan border-radius sebagai fallback untuk clip-path
â€ĸ Gunakan @supports - Untuk fitur lanjutan yang mungkin tidak didukung semua browser
â€ĸ Optimalkan performa - Shape kompleks bisa mempengaruhi rendering
â€ĸ Pertahankan aksesibilitas - Pastikan konten tetap terbaca setelah diterapkan masking