Opacity dan Blur Effects

Opacity dan blur adalah tools untuk menciptakan kedalaman visual dan hierarki perhatian.

Opacity dalam UI

Opacity mengatur transparansi elemen:

/* Disabled state */
.button-disabled { opacity: 0.5; }

/* Overlay background */
.modal-backdrop { background: rgba(0, 0, 0, 0.5); }

/* Subtle hover effect */
.icon:hover { opacity: 0.7; }

Kegunaan umum:

1. Disabled elements — opacity 0.5 menandakan elemen tidak aktif
2. Modal backdrop — overlay semi-transparan di belakang modal
3. Image overlay — teks di atas gambar dengan overlay gelap
4. Hover feedback — opacity berubah saat hover

Backdrop Blur (Glassmorphism)

Effect "frosted glass" yang populer sejak macOS Big Sur:

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
}

Kapan Menggunakan Glassmorphism

Baik:

• Navigation bar yang floating
• Notification popup
• Card overlay di atas konten visual

Hindari:

• Form input (readability terganggu)
• Teks panjang di atas blur (sulit dibaca)
• Mobile heavy — backdrop-filter bisa berat di device low-end

Tips

1. Opacity untuk status — 0.5 disabled, 0.7 hover, 1.0 active
2. Blur amount — 8-12px untuk efek glass yang subtle. Terlalu banyak = berat
3. Fallback — selalu sediakan fallback solid color untuk browser/device yang tidak support blur
4. Test performance — blur bisa berat, terutama di mobile

macOS dan iOS menggunakan blur extensively tapi dengan sangat hati-hati terhadap performance. Windows 11 menggunakan "Mica" material yang lebih ringan.