वेब चित्र पर Instagram फ़िल्टर कैसे लागू करें

कई लोग इंस्टाग्राम का उपयोग करते हैं और ऐप के साथ आने वाले फिल्टर अपनी तस्वीरों को अधिक रोचक और सुंदर बनाते हैं। हालांकि अब तक, इन फिल्टर का उपयोग ऐप के अंदर उपयोग करने के लिए प्रतिबंधित है। अगर तुम चाहो तो वेब छवियों पर Instagram फिल्टर का उपयोग करें, ऐप के बाहर, जैसे फोटो आप अपने व्यक्तिगत ब्लॉग या वेबसाइट में डालना चाहते हैं?

ठीक है, आप CSSGram का उपयोग कर सकते हैं, एक छोटा पुस्तकालय जो आपको अनुमति देता है अपनी फ़ोटो को उन फ़िल्टर के साथ संपादित करें, जो इंस्टाग्राम ऐप पर आपको मिल सकते हैं. फ़ोटोशॉप के विपरीत जहां एडिट मैन्युअल हैं या फ़ोटोशॉप क्रियाओं के माध्यम से सीएसएसग्राम के साथ, पूरी प्रक्रिया सीएसएस के माध्यम से की जाती है.

यह काम किस प्रकार करता है

प्रभाव उत्पन्न करने के लिए, CSSGram उपयोग करता है सीएसएस फिल्टर तथा सीएसएस मिश्रण मोड, मूल रूप से उस बिंदु पर प्रभावों को सम्मिश्रित करना जहाँ यह आपके इच्छित Instagram फ़िल्टर की नकल करता है। प्रभाव छद्म तत्वों के माध्यम से छवि कंटेनर पर लागू होते हैं। आइए देखें कि यह "1977" उदाहरण के साथ कैसे किया जाता है:

यहाँ छद्म तत्व जोड़ा गया है.

 ._1977 स्थिति: रिश्तेदार;  ._1977: सामग्री: "के बाद; प्रदर्शन: ब्लॉक; ऊंचाई: 100%; चौड़ाई: 100%; शीर्ष: 0; बाएं; 0: स्थिति: निरपेक्ष;; 

और यह सीएसएस फिल्टर और ब्लेंड जोड़ा गया है:

 ._1977 -वेबकिट-फ़िल्टर: कंट्रास्ट (1.1) ब्राइटनेस (1.1) सैचुरेट (1.3); फ़िल्टर: कंट्रास्ट (1.1) ब्राइटनेस (1.1) सैचुरेट (1.3);  ._1977: पृष्ठभूमि: rgba (243, 106, 188, 0.3) के बाद; मिश्रण-मिश्रण-मोड: स्क्रीन;  

कैसे इस्तेमाल करे

हम फिल्टर क्लास को सीधे इमेज एलिमेंट में नहीं जोड़ सकते हैं, इसे कंटेनर या पेरेंट क्लास में जोड़ना होगा, उदाहरण के लिए

 @import 'विक्रेता / cssgram'; 

 .my-class … @extend% _1977;