CSS Filters & Effects Kya Hote Hai ?

CSS Filters & Effects ka use web elements ko visually enhance karne ke liye hota hai. Filters jaise blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate aur sepia apply karke images aur elements ka look change kiya jata hai. Effects jaise box-shadow aur text-shadow se depth aur styling add hoti hai. Backdrop-filter se background elements ko blur ya modify kiya jata hai. Yeh sab styling techniques website ko visually appealing aur interactive banane ke liye use hoti hain, bina kisi extra image editing software ke. CSS Filters & Effects se website ka UI modern aur engaging lagta hai.

1. Blur (filter: blur(px))

Yeh filter kisi image ya element ko blur karne ke liye use hota hai. Jitne zyada pixels (px) specify karenge, utni hi image ya element blurry dikhai degi.

img {
  filter: blur(5px);
}

Agar aap blur(5px) lagate hain, to image thodi blurry ho jaayegi. Value badhane par blur effect aur zyada ho jaata hai.

2. Brightness (filter: brightness(%))

Yeh filter kisi image ki brightness ko control karta hai. Default value 100% hoti hai. 0% image ko black kar dega, aur 200% image ko zyada bright bana dega.

img {
  filter: brightness(150%);
}

Agar aap brightness(150%) lagayenge to image 50% zyada bright dikhai degi.

3. Contrast (filter: contrast(%))

Yeh filter kisi image ya element ke colors ka contrast adjust karta hai. Low contrast values colors ko dull bana dete hain, aur high contrast values colors ko sharp aur vibrant dikhate hain.

img {
  filter: contrast(200%);
}

contrast(200%) lagane se image ke colors aur zyada bold aur distinct dikhai denge.

4. Drop Shadow (filter: drop-shadow())

Yeh filter kisi element ke neeche ek shadow (chhaya) create karta hai, jo text ya images ko zyada attractive banata hai.

img {
  filter: drop-shadow(10px 10px 5px black);
}

drop-shadow(10px 10px 5px black) ka matlab hai ki shadow right aur bottom me move karega (10px each) aur uska blur radius 5px hoga.

5. Grayscale (filter: grayscale(%))

Yeh filter kisi bhi image ya element ke colors ko black & white me convert karta hai. 0% original color hota hai, aur 100% complete grayscale me hota hai.

img {
  filter: grayscale(100%);
}

grayscale(100%) ka matlab hai ki image sirf black & white me dikhegi.

6. Hue Rotate (filter: hue-rotate(deg))

Yeh filter kisi bhi image ke colors ka hue (shade) rotate karta hai, jisse naye colors generate hote hain.

img {
  filter: hue-rotate(90deg);
}

hue-rotate(90deg) ka matlab hai ki image ke colors 90 degrees shift ho jayenge, jisse naye shades dikhai denge.

7. Invert (filter: invert(%))

Yeh filter kisi bhi image ke colors ko opposite colors me convert karta hai, jisse ek negative effect banta hai.

img {
  filter: invert(100%);
}

invert(100%) lagane se image ke colors bilkul opposite ho jayenge, jaise black white me aur white black me badal jayega.

8. Opacity (filter: opacity(%))

Yeh filter kisi bhi element ki transparency (visibility) ko adjust karta hai. 0% completely invisible hota hai, aur 100% fully visible hota hai.

img {
  filter: opacity(50%);
}

opacity(50%) ka matlab hai ki image aadhi transparent hogi.

9. Saturate (filter: saturate(%))

Yeh filter kisi image ke colors ki saturation ko adjust karta hai. 0% colors ko black & white bana dega, aur 100% original saturation hoga.

img {
  filter: saturate(200%);
}

saturate(200%) ka matlab hai ki colors extra vibrant dikhenge.

10. Sepia (filter: sepia(%))

Yeh filter kisi bhi image ko old, vintage ya brownish tone me convert karne ke liye use hota hai.

img {
  filter: sepia(100%);
}

sepia(100%) lagane se image ek brownish old-photo effect me convert ho jayegi.

CSS Filters visual effects ko enhance karne me madad karte hain. Inhe use karke aap images ya elements ka look completely change kar sakte hain bina unko manually edit kiye. Yeh effects web design ko aur bhi attractive aur engaging banate hain!

Quiz: Test Your Knowledge on CSS Filters & Effects

Bonus: Practical Application!

Aaj hi apne webpage par CSS filters & effects ka istemal karke dekhein!

CSS filters & effects ko sahi tareeke se samajhne ke liye different types jaise blur, brightness, contrast, grayscale, drop-shadow, aur opacity ka upayog karein aur apne webpage ke visuals ko aur bhi attractive banayein.