सीएसएस फिल्टर प्रभाव के साथ छवि समायोजन

छवि को समायोजित करना चमक तथा विरोध, या छवि में बदल रहा है ग्रेस्केल या Sephia एक सामान्य विशेषता है जो आपको छवि संपादन एप्लिकेशन में मिल सकती है, जैसे फोटोशॉप. लेकिन, अब सीएसएस का उपयोग करके वेब छवियों पर समान प्रभाव जोड़ना संभव है.

यह क्षमता फ़िल्टर इफेक्ट्स से आती है जो वास्तव में अभी भी वर्किंग ड्राफ्ट स्टेज में है। हालाँकि, इस सुविधा को लागू करने में वेबकिट ब्राउज़र एक कदम है.

तो, चलिए इसे एक कोशिश देते हैं और हम इस छवि का उपयोग मेहदी ख से प्रभावों को प्रदर्शित करने के लिए करेंगे.

असर

प्रभावों को लागू करना बहुत आसान है। छवियों को मोड़ने के लिए नीचे स्निपेट पर एक नज़र डालें ग्रेस्केल;

 img -वेबकैट-फिल्टर: ग्रेस्केल (100%);  

… और यह के लिए है एक प्रकार की मछली अला इंस्टाग्राम.

 img -वेबकैट-फिल्टर: सीपिया (100%);  

दोनों एक प्रकार की मछली और यह ग्रेस्केल मूल्यों को प्रतिशत में कहा गया है 100% अधिकतम और आवेदन है 0% छवि को अपरिवर्तित रखेगा, लेकिन जब मान स्पष्ट रूप से निर्दिष्ट नहीं होता है 100% डिफ़ॉल्ट के रूप में लिया जाएगा.

छवि को उज्ज्वल करना भी संभव है, और हम इसका उपयोग करके कर सकते हैं चमक फ़ंक्शन, निम्नानुसार;

 img -विशेषण-फ़िल्टर: चमक (50%);  

चमक प्रभाव ऊपर के विपरीत और सीपिया प्रभाव की तरह काम करता है जहां का मूल्य 0% छवि को वैसा ही रखेगा और वैसा ही रहेगा 100% पूरी तरह से छवि को उज्ज्वल करेगा, जो संभवतः एक छवि के बजाय केवल एक खाली सफेद पृष्ठ दिखाएगा.

चमक प्रभाव भी नकारात्मक मूल्यों के लिए अनुमति देता है, जिसमें यह होगा छवि को गहरा करें.

 img -विशेषण-फ़िल्टर: चमक (-50%);  

... और हम इस तरह से छवि विपरीत समायोजित कर सकते हैं.

 img -वेबकैट-फिल्टर: कंट्रास्ट (200%);  

इस पर थोड़ा अंतर है कि मूल्य कैसे काम करता है, जैसा कि आप उपरोक्त में देख सकते हैं, हम सेट करते हैं इसके विपरीत () द्वारा 200%, इसका कारण है इसका मूल्य 100% वह प्रारंभिक बिंदु है जहां छवि अपरिवर्तित रहेगी। जब मूल्य नीचे है 100%, मान लें कि 50%, छवि कम विपरीत हो जाएगी.

इसके अलावा, हम एक घोषणा ब्लॉक में भी प्रभाव जोड़ सकते हैं, जैसे नीचे दिए गए उदाहरण में। हम छवि को चालू करते हैं ग्रेस्केल और बढ़ाएँ विरोध एक ही समय में 50% से.

 img -विशेषण-फ़िल्टर: ग्रेस्केल (100%) कंट्रास्ट (150%);  

CSS3 के संक्रमण के साथ फ़िल्टर को जोड़कर हम एक सुंदर बना सकते हैं मंडराना प्रभाव.

 img: होवर -वेबकैट-फिल्टर: ग्रेस्केल (0%);  img: होवर -वेबकैट-फिल्टर: सीपिया (0%);  img: होवर -विशेषण-फ़िल्टर: चमक (0%);  img: होवर -वेबकैट-फिल्टर: कंट्रास्ट (100%);  

अंत में, एक और प्रभाव है जिसकी हम कोशिश कर सकते हैं; गौस्सियन धुंधलापन, जो लक्षित तत्व को धुंधला कर देगा.

 img: hover -webkit- फ़िल्टर: ब्लर (5px);  

फ़ोटोशॉप की तरह, धब्बा मान पिक्सेल त्रिज्या में कहा गया है और यदि मूल्य स्पष्ट रूप से नहीं कहा गया है, तो 0 को डिफ़ॉल्ट के रूप में लिया जाएगा और छवि को इसे छोड़ दिया जाएगा।.

फाइनल थॉट

वास्तव में कल्पना में बहुत अधिक प्रभाव हैं। जैसे कि रंग घुमाने, पलटना तथा तर, लेकिन मुझे लगता है कि वे वास्तविक वेब मामलों में कम लागू होते हैं। इस प्रकार, चर्चा केवल चार प्रभावों तक सीमित थी.

और, इस ट्यूटोरियल में छवियों पर लागू होने वाली चर्चा के बावजूद, संपत्ति को वास्तव में DOM में किसी भी तत्व पर लागू किया जा सकता है.

अंत में, आप नीचे दिए गए इन लिंक से लाइव डेमो देख सकते हैं। कृपया ध्यान दें कि वर्तमान में फ़िल्टर केवल समर्थित है क्रोम 19 और ऊपर.

• डेमो
• स्रोत डाउनलोड करें