📛 Colors & Backgrounds

Panduan lengkap CSS Colors & Backgrounds untuk styling web modern

📌 Elements

💡 Fundamental Properties

CSS Colors & Backgrounds mengontrol warna teks, latar belakang, dan efek visual lainnya. Memahami property ini penting untuk desain yang menarik.

colors.css
/* Color Properties */
body {
  color: #333333; /* Text color */
  background-color: #ffffff; /* Background color */
}

/* Background Properties */
.header {
  background-image: url('header-bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Gradient Background */
.gradient-box {
  background: linear-gradient(45deg, #9333ea, #a855f7);
}

📝 Penjelasan Detail:

â€ĸ color - mengatur warna teks
â€ĸ background-color - warna latar belakang
â€ĸ background-image - gambar latar belakang (url/gradient)
â€ĸ background-repeat - pengulangan gambar (repeat/no-repeat)
â€ĸ background-position - posisi gambar (top, center, bottom)

🛠ī¸ Features

advanced-colors.css
/* Color Formats */
.color-formats {
  color: #9333ea; /* HEX */
  color: rgb(147, 51, 234); /* RGB */
  color: rgba(147, 51, 234, 0.7); /* RGBA */
  color: hsl(267, 83%, 56%); /* HSL */
  color: hsla(267, 83%, 56%, 0.7); /* HSLA */
}

/* Multiple Backgrounds */
.hero-section {
  background: url('pattern.png'), linear-gradient(45deg, #9333ea, #a855f7);
  background-blend-mode: overlay;
}

/* Background Attachment */
.parallax {
  background-attachment: fixed;
}

ℹī¸ Browser Support

Semua basic color properties didukung penuh oleh semua browser modern. RGBA/HSLA: Chrome 1+, Firefox 3+, Safari 3.1+, IE 9+. Multiple backgrounds: Chrome 1+, Firefox 3.6+, Safari 1.3+, IE 9+.

📊 Basic Tables

color-values.css
/* Background Repeat Values */
repeat    /* Default (repeat both axes) */
repeat-x  /* Repeat horizontally */
repeat-y  /* Repeat vertically */
no-repeat /* No repeating */
space     /* Repeat with equal spacing */
round     /* Repeat and stretch to fill */

/* Background Size Values */
auto      /* Default size */
cover     /* Cover entire container */
contain   /* Fit entire image */
50% 100%  /* Custom width/height */

/* Background Position Values */
top left     /* Default */
center center /* Centered */
bottom right  /* Bottom right corner */
20px 50%    /* Custom position */

📝 Penjelasan Detail:

â€ĸ Background repeat mengontrol pengulangan gambar latar
â€ĸ Background size menentukan skala gambar latar
â€ĸ cover akan memenuhi area tanpa distorsi
â€ĸ Background position mengatur posisi gambar
â€ĸ Nilai persentase memungkinkan positioning yang presisi

🚀 Advanced Table

advanced-properties.css
/* Gradient Variations */
.gradient-box {
  background: linear-gradient(45deg, #9333ea, #a855f7);
  background: radial-gradient(circle, #9333ea, #a855f7);
  background: conic-gradient(from 90deg, #9333ea, #a855f7);
  background: repeating-linear-gradient(45deg, #9333ea, #a855f7 10%);
}

/* Background Blend Modes */
.blend-mode {
  background-image: url('pattern.png'), linear-gradient(45deg, #9333ea, #a855f7);
  background-blend-mode: multiply;
  /* Other modes: screen, overlay, darken, lighten, etc */
}

/* Clip Background to Text */
.text-gradient {
  background: linear-gradient(45deg, #9333ea, #a855f7);
  -webkit-background-clip: text;
  color: transparent;
}

ℹī¸ Browser Support

CSS Gradients: Chrome 10+, Firefox 3.6+, Safari 5.1+, IE 10+. Background blend modes: Chrome 35+, Firefox 30+, Safari 8+, Edge 16+. Background-clip text: Chrome 4+, Firefox 49+, Safari 4+, Edge 15+ (with -webkit- prefix).

💡 Pro Tips

đŸŽ¯ Best Practices

Gunakan warna dengan kontras yang baik untuk aksesibilitas, optimasi gambar latar untuk performa, dan manfaatkan CSS variables untuk konsistensi warna.

best-practices.css
/* ✅ Good - CSS Variables for colors */
:root {
  --primary-color: #9333ea;
  --secondary-color: #a855f7;
}

.btn {
  background: var(--primary-color);
}

/* ✅ Good - Accessible color contrast */
.text {
  color: #333;
  background: #fff;
  /* Contrast ratio at least 4.5:1 */
}

/* ❌ Avoid - Low contrast colors */
.bad-contrast {
  color: #999;
  background: #eee;
}

/* ❌ Avoid - Large uncompressed images */
.hero {
  background-image: url('large-uncompressed-image.png');
}

📝 Penjelasan Detail:

â€ĸ CSS Variables - mudah maintenance dan konsistensi warna
â€ĸ Color contrast - minimal 4.5:1 untuk teks normal
â€ĸ Optimasi gambar - kompres untuk performa loading
â€ĸ Gradients over images - lebih ringan dari gambar
â€ĸ Fallbacks - selalu sediakan fallback untuk browser lama
â€ĸ Prefixed properties - gunakan prefix untuk support lama