CSS फ़िल्टर
Animations ने टाइमलाइन लिखी। Transforms ने बताया पिक्सेल कहाँ बैठें। Filters बताते हैं वही पिक्सेल कैसे दिखें: मोडल के पीछे हल्का blur, grayscale थंबनेल जो hover पर रंग लें, brightness और contrast से चमकती photo — layout की जगह वही।
filter क्या करता है
filter property element के painted output (अक्सर descendants सहित, एक समूह की तरह) पर एक या ज़्यादा post-process effects लगाती है। width, height और document flow वैसे ही रहते हैं; बदलता है सिर्फ़ दिखावट। filter: none (initial value) से effects हट जाते हैं।
कई functions एक filter value में, space से जोड़कर लिखें — transform chain जैसा भाव, पर यहाँ tools visual हैं, spatial नहीं: filter: brightness(1.1) contrast(1.05) saturate(1.2);
filter functions — एक नज़र में
📊 आम CSS filter functions
| Function | सामान्य काम |
|---|---|
blur(radius) |
किनारे नरम / frosted look (px या similar length) |
brightness(%) |
हल्का या गहरा (1 / 100% = बिना बदलाव) |
contrast(%) |
tonal range तेज़ या सपाट |
grayscale(%) |
रंग हटाना (1 = पूरा gray) |
saturate(%) |
रंग की तीव्रता बढ़ाना या घटाना |
hue-rotate(angle) |
color wheel पर hue घुमाना |
opacity(%) |
filtered result fade ( opacity property से related, पर same नहीं) |
sepia(%) / invert(%) |
vintage warm tone / tones उलटना |
drop-shadow(…) |
alpha shape के साथ shadow (icons, text outlines) |
none |
filters हटाना |
percentage और bare number दोनों अक्सर चलते हैं (grayscale(1) ≈ grayscale(100%))। project में एक style चुनें और consistent रहें।
hover पर जागती grayscale cards
गैलरी का पुराना पैटर्न: default muted, hover पर full color। filter पर छोटा transition जानबूझकर restore दिखाता है — motion पिछले lessons से, look इस lesson से।
.thumb {
filter: grayscale(1);
transition: filter 0.25s ease;
}
.thumb:hover,
.thumb:focus-visible {
filter: grayscale(0);
}
grayscale(0) = full color। filter transition छोटे बदलावों के लिए रखें; बड़ी photo पर heavy blur animate करना महँगा पड़ सकता है।
ज़ोर देने के लिए हल्का blur
blur() element को नरम करता है। overlay या background layer पर modest radius — पूरे page body पर नहीं — ताकि focus readable रहे।
.modal-scrub {
filter: blur(6px);
transform: scale(1.02);
}
.modal-dialog {
/* keep the dialog itself sharp — no filter here */
filter: none;
}
बड़े ancestor को blur करने से उसका text भी blur हो जाता है। जब foreground crisp रहना हो, background layer blur करें (या नीचे backdrop-filter).
photos के लिए brightness और contrast
product shots और hero images को अक्सर image editor खोले बिना हल्का grade चाहिए।
.hero-photo {
display: block;
width: 100%;
height: auto;
filter: brightness(1.08) contrast(1.06);
}
.hero-photo.is-muted {
filter: brightness(0.85) contrast(0.95) saturate(0.8);
}
1 से थोड़ा ऊपर = brighten या contrast punch; 1 से नीचे = pull back। छोटे moves polish लगते हैं; बड़े jumps fake।
कई filters stack करना
एक declaration में tone, color और softness मिल सकते हैं। complex stacks में order matter कर सकता है — left-to-right intended visual लिखें और browser में check करें।
.sticker {
filter: saturate(1.35) hue-rotate(12deg) blur(0.3px);
}
.sticker.is-print {
filter: grayscale(0.15) contrast(1.1);
}
एक-दो functions से शुरू करें। design ज़रूरत हो तभी और जोड़ें — हर extra filter बड़ी surface पर GPU work बढ़ाता है।
drop-shadow() vs box-shadow
box-shadow border box के साथ चलता है। drop-shadow() alpha silhouette follow करता है — transparent PNG और icons के लिए जहाँ shadow glyph hug करे, rectangle नहीं।
.icon-glow {
width: 2.5rem;
height: 2.5rem;
filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.35));
}
.icon-glow:hover {
filter: drop-shadow(0 6px 10px rgba(37, 99, 235, 0.45));
}
drop-shadow() inset support नहीं जैसे box-shadow। recessed card elevation के लिए Effects lesson का box-shadow रखें।
Backdrop filter — पीछे का blur
backdrop-filter translucent element के पीछे दिखने वाले content पर असर डालता है (frosted glass)। see-through background चाहिए; वरना sample करने को कुछ नहीं।
उदाहरण idea: busy hero के ऊपर sticky header पर background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px);। modern browsers में support अच्छा है; blur skip हो सके तो solid fallback background रखें।
Filter opacity vs opacity property
filter: opacity(0.5) filtered painting fade करता है। opacity property element fade करती है और अक्सर stacking व children composite को affect करने वाला group बनाती है। «पूरा control, children सहित, साथ fade» के लिए dedicated opacity property usually clearer है। filter opacity() तब जब filter stack का हिस्सा हो blur या color grades के साथ।
खुद try करें
- card image पर
filter: grayscale(1);:hoverपरgrayscale(0)औरtransition: filter 0.2s ease. - background layer को
blur(8px)से soften करें; foreground text unfiltered रखें। - photo को
brightness(1.1) contrast(1.05)दें; फिर दोनों को1की तरफ slowly लाएँ जब तक natural लगे। - sticker पर
saturate(1.4) hue-rotate(20deg)stack करें; एक function हटाकर compare करें। - transparent PNG icon पर
drop-shadow(...); same icon square box परbox-shadowसे compare। - Optional: translucent
background+backdrop-filter: blur(12px)frosted bar।
आम गलतियाँ
- readable text वाले बड़े page section पर strong
blur() drop-shadow()सेinsetexpect करना जैसेbox-shadow- simple element
opacityclear हो तब भीfilter: opacity()use करना - बड़ी images पर heavy filters हर scroll frame animate करना बिना performance check
- fully opaque background पर
backdrop-filter— पीछे कुछ नहीं दिखता, frost नहीं बनता
सार
filterrendered pixels की look बदलता है; layout flow जगह पर- blur, brightness, contrast, grayscale, saturate आदि एक value में chain करें
- alpha-shaped shadows के लिए
drop-shadow(); box elevation के लिएbox-shadow backdrop-filtertranslucent layer के पीछे दिखने वाले को frost करता है- Effects & Motion यहाँ समाप्त; अगला module Modern Toolkit — CSS Variables से शुरू
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी