filter: blur brightness contrast grayscale
CSS filter property function से elements पर photographic filter effect लागू करना सीखिए।
filter: blur brightness contrast grayscale, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
CSS filter गुण
filter गुण तत्वों पर ग्राफ़िकल प्रभाव लागू करता है — वास्तविक चित्र को संपादित किए बिना, यह Photoshop की समायोजन परतों के समान काम करता है।
filter: blur()
गॉसियन धुंधलापन लागू करता है। आर्ग्युमेंट धुंधलेपन की त्रिज्या होता है।
<div class="frosted"></div>
<div class="hero-bg"></div>
filter: brightness()
चमक समायोजित करता है। 1 = मूल, 0 = काला, 2 = दोगुनी चमक।
<div class="dimmed"></div>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="120" height="120" alt="sample" />
filter: contrast()
कंट्रास्ट समायोजित करता है। 1 = मूल, 0 = सपाट धूसर, 1 से अधिक मान कंट्रास्ट बढ़ाते हैं।
<div class="high-contrast"></div>
<div class="low-contrast"></div>
filter: grayscale()
चित्र को ग्रेस्केल में बदलता है। 0 = पूर्ण रंग, 1 (या 100%) = पूरी तरह धूसर।
<div class="grayscale"></div>
<div class="portfolio-item"></div>
filter: saturate()
रंगों की संतृप्ति समायोजित करता है। 0 = धूसर, 1 = मूल, 1 से अधिक = अधिक चमकीला।
<div class="vivid"></div>
<div class="muted"></div>
filter: hue-rotate()
दिए गए कोण से ह्यू चक्र को घुमाता है — सभी रंगों को रंग चक्र के चारों ओर स्थानांतरित करता है।
<div class="hue-shifted"></div>
<div class="rainbow-demo"></div>
filter: sepia()
गर्म, पुराने समय जैसा सीपिया टोन लागू करता है। 0 = मूल, 1 = पूर्ण सीपिया।
<div class="vintage"></div>
filter: drop-shadow()
box-shadow के समान, लेकिन तत्व के वास्तविक रेंडर किए गए आकार का अनुसरण करता है (पारदर्शी भागों सहित)। अनियमित PNG चित्रों के लिए आदर्श है।
<div class="icon">★</div>
एकाधिक filter का संयोजन
एकाधिक filter फ़ंक्शन को रिक्त स्थान से अलग करके श्रृंखलाबद्ध करें। इन्हें बाएँ से दाएँ क्रम में लागू किया जाता है:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="150" height="100" alt="photo" />
<div class="dramatic"></div>
filter से स्टैकिंग संदर्भ बनता है
किसी तत्व पर filter लागू करने से नया स्टैकिंग संदर्भ बनता है। इसके कारण बाल तत्वों का position: fixed, position: absolute की तरह व्यवहार कर सकता है — यह एक सामान्य त्रुटि है।
त्वरित जाँच
कौन-सा CSS filter फ़ंक्शन किसी तत्व पर गॉसियन धुंधलापन लागू करता है?
पुनरावलोकन
filter गुण फ़ोटोग्राफ़िक समायोजन लागू करता है: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia() और drop-shadow()। अनेक फ़ंक्शन को रिक्त स्थान से श्रृंखलाबद्ध करें। याद रखें कि filter एक स्टैकिंग संदर्भ बनाता है, जो fixed स्थिति वाले बाल तत्वों को प्रभावित कर सकता है।
एआई शिक्षक के साथ CSS सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “filter: blur brightness contrast grayscale” पाठ निःशुल्क है?
हाँ—“filter: blur brightness contrast grayscale” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“filter: blur brightness contrast grayscale” में मैं क्या सीखूँगा?
CSS filter property function से elements पर photographic filter effect लागू करना सीखिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“filter: blur brightness contrast grayscale” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- filter: blur brightness contrast grayscale
- Frosted Glass के लिए backdrop-filter
- Layer Blending के लिए mix-blend-mode
- isolation Property