विज़ुअल इफ़ेक्ट बनाने के लिए CSS फ़िल्टर और ब्लेंड मोड का उपयोग कैसे करें

CSS फ़िल्टर और ब्लेंड मोड आपको अपने वेब पेज पर विज़ुअल इफ़ेक्ट आसानी से लागू करने की अनुमति देते हैं। फ़िल्टर छवियों या अन्य HTML तत्वों के प्रतिपादन को समायोजित करने के लिए उपयोग किए जाने वाले पूर्वनिर्धारित CSS फ़ंक्शंस का एक सेट है। जबकि सम्मिश्रण मोड यह निर्धारित करते हैं कि किसी तत्व को उसकी पृष्ठभूमि या पड़ोसी तत्वों के साथ कैसे मिश्रित होना चाहिए।

CSS फ़िल्टर का उपयोग करना

आप का उपयोग करके CSS फ़िल्टर लागू करते हैं फ़िल्टर संपत्ति और लागू प्रभाव प्रकार निर्दिष्ट करने वाली संपत्ति। प्रत्येक फ़िल्टर गुण एक CSS फ़ंक्शन है, अर्थात एक CSS चर के समान काम करता है समारोह। यह निर्दिष्ट करने के लिए एक पैरामीटर स्वीकार करता है कि फ़िल्टर को स्टाइल किए गए तत्व को कितना प्रभावित करना चाहिए।

आपके HTML एलिमेंट को स्टाइल करने के लिए 10 CSS फ़िल्टर फ़ंक्शंस उपलब्ध हैं:

• धुंधला ()
• चमक ()
• अंतर()
• परछाई डालना()
• ग्रेस्केल ()
• ह्यू-रोटेट ()
• उलटा ()
• अस्पष्टता ()
• संतृप्त ()
• सीपिया ()

आप अद्वितीय शैली बनाने और अपने HTML तत्वों की उपस्थिति बढ़ाने के लिए इन फ़िल्टरों का अलग-अलग या संयोजन में उपयोग कर सकते हैं।

इनमें से कुछ फ़िल्टर सही तरीके से उपयोग किए जाने पर दूसरों के साथ बेहतर काम करते हैं।

छवि तत्व पर विभिन्न दृश्य प्रभावों को प्राप्त करने के लिए यहां सीएसएस फ़िल्टर के संयोजन के उदाहरण दिए गए हैं।

1. ग्रेस्केल और सेपिया

ग्रेस्केल () फ़िल्टर एक छवि या पाठ तत्व से सभी रंग की जानकारी को हटा देता है। फ़िल्टर 0 और 1 के बीच का मान लेता है, जिसमें 0 का अर्थ मूल रंग और 1 पूर्ण ग्रेस्केल प्रभाव होता है।

सीपिया () फ़िल्टर एक छवि या पाठ तत्व पर एक सेपिया-टोन प्रभाव लागू करता है। फ़िल्टर 0 और 1 के बीच का मान भी लेता है।

उदाहरण के लिए:

आईएमजी {
फ़िल्टर: स्केल(14%) एक प्रकार की मछली(30%);
}

का मेल ग्रेस्केल () 14% पर और सीपिया () 30% पर आपकी छवि पर विंटेज या रेट्रो प्रभाव बना सकता है।

2. उलटा और संतृप्त

संतृप्त () फ़िल्टर छवि या पाठ तत्व की संतृप्ति को बढ़ाता या घटाता है। फ़िल्टर 0 और अनंत के बीच एक मान लेता है, जिसमें 1 मूल रंग होता है और उच्च मान संतृप्ति को बढ़ाते हैं।

उलटा () फिल्टर कलर व्हील पर मौजूद हर रंग के रंग को 180 डिग्री तक फ्लिप करके इमेज या टेक्स्ट एलिमेंट के रंगों को उल्टा कर देगा। इसका मतलब यह है कि फ़िल्टर रंग को बनाए रखते हुए तत्व की चमक और संतृप्ति के स्तर को बदलता है।

उदाहरण के लिए:

आईएमजी {
फ़िल्टर: औंधाना(30%) तर(75%);
}

यह कोड छवि के रंगों को उलट देता है और संतृप्ति को 75% बढ़ा देता है।

3. ह्यू-रोटेट और कंट्रास्ट

ह्यू-रोटेट () फ़िल्टर एक छवि या पाठ तत्व के रंग को घुमाता है, जिसका अर्थ है कि यह चमक और संतृप्ति के स्तर को बनाए रखते हुए तत्व के समग्र रंग को बदलता है। रोटेशन की मात्रा को डिग्री में निर्दिष्ट किया जा सकता है, जिसमें 0 मूल रंग का प्रतिनिधित्व करता है और 360 मूल रंग में पूर्ण रोटेशन का प्रतिनिधित्व करता है।

मिलाना ह्यू-रोटेट () और अंतर() फ़िल्टर आपकी छवियों पर जीवंत और रंगीन प्रभाव पैदा कर सकते हैं।

उदाहरण के लिए:

आईएमजी {
फ़िल्टर: रंग-घूर्णन(10डिग्री) अंतर(150%);
}

ह्यू-रोटेट का मान स्वीकार कर सकता है डिग्री, ग्रैड, रेड, या मोड़. उपरोक्त कोड छवि के रंग को 10 डिग्री से घुमाता है और कंट्रास्ट बढ़ाता है।

4. चमक और धुंधलापन

ब्राइटनेस और ब्लर फिल्टर बहुत ज्यादा आत्म-व्याख्यात्मक हैं। पहला आपकी छवि की चमक को समायोजित करता है, और बाद वाला लागू धुंधलेपन के स्तर को नियंत्रित करता है।

मिलाना चमक () और धुंधला () फ़िल्टर आपकी छवियों पर एक स्वप्निल और कोमल प्रभाव पैदा कर सकते हैं।

उदाहरण के लिए:

आईएमजी {
फ़िल्टर: चमक(0.8) कलंक(5पिक्सल);
}

उपरोक्त कोड द्वारा चमक कम हो जाती है 0.8 (80%) और ए लागू करता है 5 पीएक्स छवि पर धुंधला प्रभाव।

5. ड्रॉप-शैडो और अपारदर्शिता

एक बूंद छाया प्रभाव एक दृश्य प्रभाव है जिसमें एक तत्व गहराई और आयामीता का भ्रम देते हुए, उसके पीछे की सतह पर एक छाया डालता है। तत्व और पृष्ठभूमि के बीच अलगाव की भावना पैदा करने के लिए ड्रॉप शैडो को अक्सर पाठ या छवियों पर लागू किया जाता है।

इस बीच, अपारदर्शिता फ़िल्टर किसी तत्व की पारदर्शिता को नियंत्रित करता है।

मिलाना परछाई डालना() और अस्पष्टता () फ़िल्टर आपके पाठ तत्वों पर एक सूक्ष्म प्रभाव पैदा कर सकते हैं।

उदाहरण के लिए:

पाठ-प्रभाव {
परिवर्तन: अनुवाद(-50%, -50%);
रंग: काला;
परछाई डालना: 10पिक्सल 9पिक्सल 9पिक्सलबेज;
अस्पष्टता: 70%;
}

इस उदाहरण में, ड्रॉप शैडो को 10 पिक्सेल दाईं ओर और 9 पिक्सेल नीचे की ओर स्थित किया गया है, जिसमें 9 पिक्सेल का ब्लर त्रिज्या है। छाया का रंग बेज के रूप में निर्दिष्ट किया गया है। 70% की अस्पष्टता भी निर्दिष्ट है।

CSS ब्लेंड मोड्स का उपयोग करना

CSS मिश्रण मोड नियंत्रित करते हैं कि किसी तत्व की सामग्री पृष्ठभूमि या अन्य तत्वों के साथ कैसे मिश्रित होती है, जिससे रचनात्मक रचना प्रभाव की अनुमति मिलती है।

सीएसएस मिश्रण मोड के कुछ सबसे लोकप्रिय उपयोग मामलों में शामिल हैं:

• ग्रेडिएंट बनाना: बनाने के लिए ब्लेंड मोड का इस्तेमाल किया जा सकता है कई सीएसएस पृष्ठभूमि ग्रेडियेंट रंगों के बीच संक्रमण, आपको अपने डिजाइनों में गहराई और आयाम जोड़ने का एक आसान और कुशल तरीका प्रदान करता है।
• बनावट जोड़ना: आप पृष्ठ पर पृष्ठभूमि, छवियों और अन्य तत्वों में बनावट जोड़ने के लिए ब्लेंड मोड का भी उपयोग कर सकते हैं। यह एक अनूठा रूप बनाने और अन्यथा सादे तत्वों के लिए दृश्य रुचि जोड़ने का एक शानदार तरीका हो सकता है।
• रंग समायोजित करना: सम्मिश्रण मोड के साथ, आप किसी पृष्ठ पर तत्वों के रंगों को समायोजित कर सकते हैं, जिनमें शामिल हैं पृष्ठभूमि रंग समायोजित करना. यह आपको रंग ओवरले या टिंटेड छवियों जैसे प्रभावों को आसानी से बनाने की अनुमति देगा।

दो सबसे आम मिश्रण मोड हैं पृष्ठभूमि-मिश्रण-मोड और मिक्स-ब्लेंड-मोड. दोनों गुण समान 15 मान साझा करते हैं: सामान्य, गुणा, स्क्रीन, ओवरले, गहरा, हल्का, रंग-चकमा, संतृप्ति, रंग-बर्न, चमक, अंतर, हार्ड-लाइट, सॉफ्ट-लाइट, अपवर्जन और रंग।

आपको उपयोग करना चाहिए पृष्ठभूमि-मिश्रण-मोड जब आपके पास एक से अधिक पृष्ठभूमि लेआउट हों, जैसे किसी तत्व पर पृष्ठभूमि छवियां, और चाहते हैं कि वे सभी एक दूसरे में मिल जाएं।

आप भी इस्तेमाल कर सकते हैं मिक्स-ब्लेंड-मोड किसी दिए गए तत्व की सामग्री को उसके प्रत्यक्ष माता-पिता की सामग्री के साथ मिलाने के लिए। मिक्स-ब्लेंड-मोड आमतौर पर अग्रभूमि सामग्री जैसे पाठ, आकृतियों या छवियों को मिलाने के लिए उपयोग किया जाता है।

यहाँ उपयोग करने का एक उदाहरण है मिक्स-ब्लेंड-मोड टेक्स्ट और इमेज को ब्लेंड करने के लिए।

एचटीएमएल:

<डिवकक्षा="कंटेनर">
<आईएमजी
 src=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? ऑटो=संपीड़ित&सीएस=tinysrgb&w=1260&एच=750&डीपीआर=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? ऑटो = सेक और सीएस = टिनीएसआरजीबी और डब्ल्यू = 1260 और एच = 750 और डीपीआर = 2"
 वर्ग = "पृष्ठभूमि छवि"
 />
<डिवकक्षा="संतुष्ट">
<एच 1>स्वागतएच 1>
<पी>हैलो उपयोगकर्ता!पी>
डिव>
डिव>

सीएसएस:

कंटेनर {
पद: शुद्ध;
चौड़ाई: 100%;
ऊंचाई: 100%;
}
।पृष्ठभूमि छवि {
चौड़ाई: 100%;
ऊंचाई: 100%;
वस्तु फिट: ढकना;
}
।संतुष्ट {
पद: शुद्ध;
ऊपर: 50%;
बाएं: 50%;
परिवर्तन: अनुवाद(-50%, -50%);
पाठ संरेखित: केंद्र;
मिक्स-ब्लेंड-मोड: अंतर;
}
एच 1 {
फ़ॉन्ट आकार: 60पिक्सल;
रंग: सफ़ेद;
}
पी {
फ़ॉन्ट आकार: 40पिक्सल;
रंग: सफ़ेद;
}

अंतर सम्मिश्रण मोड पाठ के रंग मूल्यों और अंतर्निहित अंधेरे छवि के बीच पूर्ण अंतर की गणना करता है।

इस परिदृश्य में, टेक्स्ट का रंग गहरी पृष्ठभूमि के साथ इंटरैक्ट करेगा, जिसके परिणामस्वरूप एक उच्च कंट्रास्ट प्रभाव होगा।

फिल्टर और ब्लेंड मोड का संयोजन

आप और भी दिलचस्प प्रभाव बनाने के लिए फ़िल्टर और मिश्रण मोड को जोड़ सकते हैं। दोनों गुणों का एक साथ उपयोग करके, आप अद्वितीय और रचनात्मक परिणाम प्राप्त कर सकते हैं जिन्हें अन्य CSS गुणों के साथ दोहराना कठिन है।

यहां एक उदाहरण दिया गया है जो अधिक जटिल प्रभाव बनाने के लिए फ़िल्टर और ब्लेंड मोड को जोड़ता है:

मेरा तत्व {
फ़िल्टर: चमक(150%) रंग-घूर्णन(180डिग्री) परछाई डालना(0पिक्सल 0पिक्सल 10पिक्सलrgba(0, 0, 0, 0.5));
मिक्स-ब्लेंड-मोड: स्क्रीन;
}

यह कोड फ़िल्टर को जोड़ता है; चमक, रंग-घूर्णन, परछाई डालना, और ए मिक्स-ब्लेंड-मोड मूल्य का स्क्रीन छवि के लिए। यह चमक को 150% तक बढ़ा देता है, जबकि hue-घूर्णन छवि के रंगों को 180 डिग्री से उल्टा कर देगा।

फिर एक ड्रॉप शैडो भी लगाया जाता है। अंत में, स्क्रीन सम्मिश्रण मोड के लिए मूल्य छवि के रंगों को अंतर्निहित पृष्ठभूमि के साथ जोड़ देगा, जिसके परिणामस्वरूप एक प्रभाव होता है जहां हल्के रंग तीव्र होते हैं, और गहरे रंग मिश्रित होते हैं पृष्ठभूमि।

मास्टरिंग फिल्टर और ब्लेंड मोड

आपने विभिन्न प्रकार के CSS फ़िल्टर के बारे में सीखा है और आप उन्हें अपने HTML तत्वों पर कैसे लागू कर सकते हैं। ब्लर, कंट्रास्ट और ह्यु-रोटेट जैसे विभिन्न फ़िल्टर फ़ंक्शंस का उपयोग करके, आप अपनी छवियों के स्वरूप को संशोधित कर सकते हैं। आपने क्रिया में सम्मिश्रण मोड के उदाहरण भी देखे हैं और अद्वितीय डिज़ाइन बनाने के लिए उनका उपयोग कैसे किया जा सकता है।

यदि आप इन तकनीकों के साथ अधिक प्रयोग करते हैं, तो आप अपने डिजाइनों में एक अतिरिक्त स्तर की दृश्य रुचि जोड़ सकते हैं।