CSS Colors & Backgrounds Kaise Kaam Karte Hain?

CSS Color Formats

CSS me colors define karne ke kai formats hote hain. Yeh formats humein precise colors choose karne ki flexibility dete hain.

A. RGB (Red, Green, Blue)

RGB format 3 primary colors (Red, Green, Blue) ka combination hota hai. Har color ki intensity 0 se 255 tak ho sakti hai.

color: rgb(255, 0, 0);  /* Red */

B. HEX (Hexadecimal)

Hexadecimal format color ko 6-digit code ke roop me define karta hai, jo RGB ka hi ek short form hai.

color: #ff0000;  /* Red */

C. HSL (Hue, Saturation, Lightness)

HSL format colors ko human perception ke anusaar define karta hai (Hue: rang, Saturation: rang ki shuddhta, Lightness: roshni).

color: hsl(0, 100%, 50%);  /* Red */

D. RGBA & HSLA (with Alpha Transparency)

Alpha (A) value color ki transparency (paar-darshita) ko control karti hai. Iski value 0.0 (fully transparent) se 1.0 (fully opaque) tak hoti hai.

/* 50% transparent red */
color: rgba(255, 0, 0, 0.5);

/* 50% transparent blue */
color: hsla(240, 100%, 50%, 0.5);

CSS Background Properties

Background properties se hum kisi element ke piche ka color, image, position, aur behavior control kar sakte hain.

• background-color: Element ka background color set karta hai.
• background-image: Element ke background me ek image lagata hai. (e.g., url('image.jpg'))
• background-repeat: Control karta hai ki image repeat hogi ya nahi (no-repeat, repeat-x, repeat-y).
• background-position: Image ki starting position set karta hai (e.g., center, top right).
• background-size: Image ka size control karta hai (e.g., cover, contain, 100px 200px).
• background-attachment: Define karta hai ki background image scroll hogi (scroll) ya fixed rahegi (fixed).

Shorthand Property

Aap in sabhi properties ko ek hi background property me likh sakte hain.

body {
  background: lightblue url('bg.png') no-repeat center center / cover fixed;
}

Gradient Backgrounds

Gradient ek aisa effect hai jisme do ya zyada colors ek-doosre me smoothly blend hote hain.

Linear Gradient

Yeh gradient ek direction me (e.g., left to right, top to bottom) blend hota hai.

background: linear-gradient(to right, red, blue);

Radial Gradient

Yeh gradient ek circular ya elliptical shape me blend hota hai.

background: radial-gradient(circle, red, blue);

Key Takeaways

• Colors ko define karne ke liye HEX (#ffffff), RGB (rgb(255,255,255)), aur HSL formats use hote hain.
• rgba aur hsla ka use transparency add karne ke liye hota hai.
• Background properties se aap color, image, size, position, aur repeat behavior ko control kar sakte hain.
• background-size: cover; ek common technique hai jisse image poore element ko cover karti hai bina stretch hue.
• linear-gradient() aur radial-gradient() ka use karke aap sundar color transitions bana sakte hain.