इस लेख में
CSS filter प्रॉपर्टी की व्याख्या
CSS की filter प्रॉपर्टी किसी भी HTML एलिमेंट पर ब्लर, ब्राइटनेस, कंट्रास्ट और रंग बदलाव जैसे ग्राफिकल प्रभाव लागू करती है। यह इमेज, बैकग्राउंड, टेक्स्ट और यहाँ तक कि पेज के पूरे हिस्सों पर काम करती है। फिल्टर ब्राउज़र के GPU द्वारा प्रोसेस किए जाते हैं, जिससे वे इमेज एडिटिंग सॉफ़्टवेयर की ज़रूरत के बिना रियल-टाइम विज़ुअल प्रभावों के लिए कुशल बनते हैं।
CSS नौ अंतर्निहित filter फ़ंक्शन प्रदान करता है: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate और sepia। इन्हें जटिल विज़ुअल प्रभाव बनाने के लिए एक ही filter घोषणा में एक साथ जोड़ा जा सकता है। फिल्टर का क्रम मायने रखता है — हर फ़ंक्शन पिछले वाले के आउटपुट को प्रोसेस करता है।
हर filter फ़ंक्शन कैसे काम करता है
हर filter फ़ंक्शन एक ही मान लेता है और एलिमेंट के विज़ुअल आउटपुट को बदल देता है। हर फ़ंक्शन क्या करता है यह समझने से आपको मनचाहे लुक के लिए उन्हें प्रभावी ढंग से संयोजित करने में मदद मिलती है।
- blur(px) — एक Gaussian ब्लर प्रभाव लागू करता है, जिससे एलिमेंट फोकस से बाहर दिखता है। अधिक मान अधिक तीव्र ब्लर बनाते हैं। बैकग्राउंड ओवरले और फ्रॉस्टेड ग्लास प्रभावों के लिए उपयोगी
- brightness(%) और contrast(%) — brightness समग्र चमक को स्केल करता है (100% अपरिवर्तित है, 200% दोगुना है), जबकि contrast प्रकाश और अंधेरे क्षेत्रों के बीच के अंतर को समायोजित करता है। मिलकर ये इमेज की टोनल रेंज को नियंत्रित करते हैं
- grayscale(%), sepia(%) और hue-rotate(deg) — grayscale रंग संतृप्ति हटाता है, sepia एक गर्म भूरा रंग जोड़ता है, और hue-rotate सभी रंगों को निर्दिष्ट डिग्री द्वारा रंग चक्र के चारों ओर स्थानांतरित करता है
निःशुल्क आज़माएँ — कोई साइनअप आवश्यक नहीं
CSS फिल्टर जनरेट करें →Instagram-शैली के प्रभाव बनाना
कई CSS filter फ़ंक्शन को एक-दूसरे पर स्टैक करके, आप पूरी तरह कोड में लोकप्रिय फोटो फिल्टर प्रभावों को फिर से बना सकते हैं। ये प्रभाव रियल टाइम में लागू होते हैं और स्रोत फाइल को बदले बिना किसी भी इमेज एलिमेंट पर काम करते हैं।
- विंटेज लुक — पुराने फिल्म कैमरों की याद दिलाने वाला गर्म, फीका फोटोग्राफ प्रभाव बनाने के लिए sepia(60%) को contrast(110%) और brightness(90%) के साथ जोड़ें
- काला और सफ़ेद — उच्च-कंट्रास्ट मोनोक्रोम प्रभाव के लिए grayscale(100%) को contrast(120%) के साथ उपयोग करें। अधिक उज्ज्वल, स्वच्छ काले-सफ़ेद लुक के लिए brightness(110%) जोड़ें
- नाटकीय मूड — एक जीवंत, गहरा वातावरण बनाने के लिए contrast(150%) को saturate(130%) और brightness(80%) के साथ स्टैक करें, जो रंगों को गहरी छायाओं के सामने उभार देता है
अक्सर पूछे जाने वाले प्रश्न
क्या मैं CSS filter प्रॉपर्टी के साथ SVG फिल्टर का उपयोग कर सकता हूँ?
हाँ। CSS filter के भीतर url() फ़ंक्शन आपको अंतर्निहित फ़ंक्शन से परे प्रभावों के लिए कस्टम SVG फिल्टर परिभाषाओं का संदर्भ देने देता है। यह डिसप्लेसमेंट मैप, कलर मैट्रिक्स और कस्टम कन्वोल्यूशन कर्नेल जैसे उन्नत प्रभावों को सक्षम करता है। हालाँकि, SVG फिल्टर बनाना अधिक जटिल है और अंतर्निहित CSS filter फ़ंक्शन की तुलना में इनका ब्राउज़र समर्थन थोड़ा कम है।
क्या CSS फिल्टर प्रदर्शन को प्रभावित करते हैं?
आधुनिक ब्राउज़रों में CSS फिल्टर GPU-त्वरित होते हैं, जिससे वे अधिकांश उपयोग के मामलों के लिए कुशल बनते हैं। इमेज पर एकल फिल्टर का प्रदर्शन पर न्यूनतम प्रभाव पड़ता है। हालाँकि, बड़े क्षेत्रों पर ब्लर लगाना, कई फिल्टर एक साथ एनिमेट करना, या जटिल लेआउट वाले एलिमेंट पर फिल्टर का उपयोग करना कम-शक्ति वाले डिवाइस पर फ्रेम गिरा सकता है। शिप करने से पहले मोबाइल पर परीक्षण करें।
क्या फिल्टर को होवर पर एनिमेट किया जा सकता है?
हाँ। CSS फिल्टर ट्रांज़िशन और एनिमेशन के साथ सहजता से काम करते हैं। एक आम पैटर्न है डिफ़ॉल्ट रूप से grayscale या blur फिल्टर लागू करना और होवर पर मूल लुक में ट्रांज़िशन करना। उदाहरण के लिए: filter: grayscale(100%); transition: filter 0.3s; के साथ :hover पर filter: none सेट करना। यह सहज, GPU-त्वरित होवर प्रभाव बनाता है।