🎨 CSS Lesson 04 — Colors & Backgrounds

1. Color Formats

color: red;                    /* named color */
color: #42b883;                /* hex 6-digit */
color: #4b8;                   /* hex 3-digit (shorthand) */
color: rgb(66, 184, 131);      /* rgb */
color: rgba(66, 184, 131, 0.5);/* rgba — alpha=opacity */
color: hsl(153, 47%, 49%);     /* hue saturation lightness */
color: hsla(153, 47%, 49%, 0.5);

2. HSL — Hue, Saturation, Lightness

hsl(hue, saturation%, lightness%)
     0-360    0-100%      0-100%

hue: 0=red, 60=yellow, 120=green, 180=cyan, 240=blue, 300=purple
saturation: 0% = gray, 100% = full color
lightness:  0% = black, 50% = normal, 100% = white

3. Background Properties

background-color: #42b883;
background-image: url('image.jpg');
background-size: cover;     /* ဖုံးအုပ် — crop ဖြစ်နိုင် */
background-size: contain;   /* အပြည့်ပြ — white space ဖြစ်နိုင် */
background-size: 200px 100px;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;  /* parallax effect */

/* Shorthand */
background: #42b883 url('bg.jpg') no-repeat center/cover;

4. Gradients

/* Linear Gradient */
background: linear-gradient(to right, #42b883, #3182ce);
background: linear-gradient(135deg, #f093fb, #f5576c);
background: linear-gradient(to bottom, red, yellow, green);

/* Radial Gradient */
background: radial-gradient(circle, #42b883, #1a1a2e);

/* Conic Gradient */
background: conic-gradient(red, yellow, green, blue, red);

5. opacity vs rgba

/* opacity — element + children အကုန် transparent ဖြစ် */
.box { opacity: 0.5; }  /* text ပါ transparent ဖြစ်မယ် */

/* rgba — background ကသာ transparent, text မဖြစ် */
.box { background: rgba(66, 184, 131, 0.3); }  /* ✅ */

6. Live Color Playground