CSS3 फिल्टर: शैली वापरून प्रतिमा बदलणे. CSS: बहु-रंगीत पार्श्वभूमीवर असलेल्या मजकुरासाठी विरोधाभासी रंग कसा बनवायचा CSS फिल्टरची कार्ये आणि वाक्यरचना

CSS3 फिल्टर हे SVG चे एक अतिशय मनोरंजक ऑफशूट आहेत, जे तुम्हाला ब्लर, ब्राइटनेस आणि इतर अनेक फिल्टर्स लागू करून HTML घटक आणि प्रतिमा सुधारण्याची परवानगी देतात. या ट्युटोरियलमध्ये आपण ते नेमके कसे कार्य करतात ते पाहू.

हे कसे कार्य करते?

फक्त CSS वापरून आम्ही काही अतिशय जटिल प्रभाव तयार करू शकतो. ते दोन्ही प्रतिमा आणि HTML घटकांवर लागू केले जाऊ शकतात. या सर्व प्रभावांवर नियंत्रण ठेवण्यासाठी वापरली जाणारी मालमत्ता आहे फिल्टर.

फिल्टर: फिल्टर(मूल्य);

तुमच्या अपेक्षेप्रमाणे, या गुणधर्मासाठी ब्राउझर उपसर्ग वापरणे आवश्यक आहे. पण वर हा क्षण, फक्त -वेबकिट-(Chrome आणि Safari) हे एकमेव ब्राउझर इंजिन आहेत जे या मालमत्तेला समर्थन देतात.

वेबकिट-फिल्टर: फिल्टर(मूल्य);
-moz-फिल्टर: फिल्टर(मूल्य);
-ओ-फिल्टर: फिल्टर(मूल्य);
-ms-फिल्टर: फिल्टर(मूल्य);

गाळणे

तेथे अनेक फिल्टर्स आहेत, म्हणून प्रत्येकाची अधिक चांगली समज मिळविण्यासाठी, आपण त्यांना स्वतंत्रपणे पाहू या. एका घटकावर अनेक फिल्टर लागू केले जाऊ शकतात (स्पेसद्वारे वेगळे केलेले), उदाहरणार्थ, चमकआणि अस्पष्ट:

फिल्टर: ब्लर (5px ) ब्राइटनेस (0.5 );

असे काही फिल्टर आहेत जे खाली समाविष्ट केले जाणार नाहीत, परंतु ते विद्यमान CSS (पारदर्शकता आणि सावल्या) सह सहजपणे लागू केले जाऊ शकतात. फिल्टर कसे कार्य करतात ते प्रदर्शित करण्यासाठी आम्ही मूळ प्रतिमा येथे वापरु:

मी फॉर्ममध्ये लागू केलेला फिल्टर (पहिला फोटो) आणि फिल्टरचा परिणाम असलेला फोटो देईन स्थिर प्रतिमा(दुसरा फोटो) जर तुम्ही एखादा ब्राउझर वापरत असाल जो फिल्टरला सपोर्ट करत नाही आणि परिणाम पाहू शकत नाही.

अस्पष्ट

फक्त CSS वापरून प्रतिमा किंवा मजकूरावर कधी गॉसियन ब्लर करायचे होते? फिल्टरसह आपण हे करू शकता! अस्पष्टता पिक्सेलमध्ये मोजली जाते, त्यामुळे तुम्ही असे काहीतरी करू शकता:

फिल्टर: अस्पष्ट (5px );
// ब्राउझर विशिष्ट
-वेबकिट-फिल्टर: ब्लर(5px);
-moz-फिल्टर: अस्पष्ट (5px);
-ओ-फिल्टर: अस्पष्ट (5px);
-ms-फिल्टर: अस्पष्ट (5px);

चमक

ब्राइटनेस शून्य ते एक पर्यंत मोजला जातो, 1 पूर्ण ब्राइटनेस (पांढरा) आणि 0 मूळ ब्राइटनेस आहे.

फिल्टर: चमक (0.2 );
// ब्राउझर विशिष्ट
-वेबकिट-फिल्टर: ब्राइटनेस(0.2);
-moz-फिल्टर: चमक (0.2 );
-ओ-फिल्टर: ब्राइटनेस(०.२);
-ms-फिल्टर: चमक (0.2 );

संपृक्तता

संपृक्तता टक्केवारी म्हणून मोजली जाते.

फिल्टर: संतृप्त (50% );
// ब्राउझर विशिष्ट
-वेबकिट-फिल्टर: संतृप्त (50% );
-moz-फिल्टर: संतृप्त (50% );
-ओ-फिल्टर: संतृप्त (50% );
-ms-फिल्टर: संतृप्त (50% );

टोन रोटेशन

हा फिल्टर तुम्हाला तो फिरवून टोन बदलण्याची परवानगी देतो (तुम्ही नंतर फिरवलेल्या रंगांच्या चाकाचा विचार करा). ते अंशांमध्ये मोजले जाते.

फिल्टर: रंग-फिरवा (20deg);
// ब्राउझर विशिष्ट
-वेबकिट-फिल्टर: ह्यू-रोटेट(20deg);
-moz-फिल्टर: ह्यू-फिल्टर (20deg);
-ओ-फिल्टर: ह्यू-फिल्टर (20 डिग्री);
-ms-फिल्टर: ह्यू-फिल्टर (20deg);

कॉन्ट्रास्ट

कॉन्ट्रास्ट, पुन्हा, टक्केवारी म्हणून मोजले जाते. 100% हे डीफॉल्ट मूल्य आहे, 0% पूर्णपणे तयार करेल काळी प्रतिमा. 100% पेक्षा जास्त काहीही कॉन्ट्रास्ट जोडते!

फिल्टर: कॉन्ट्रास्ट (150% );
// ब्राउझर विशिष्ट
-वेबकिट-फिल्टर: कॉन्ट्रास्ट(150%);
-moz-फिल्टर: कॉन्ट्रास्ट (150% );
-ओ-फिल्टर: कॉन्ट्रास्ट (150% );
-ms-फिल्टर: कॉन्ट्रास्ट (150% );

उलथापालथ

तसेच टक्केवारी म्हणून मोजले जाते. उपलब्ध मूल्ये 0% ते 100% पर्यंत आहेत. विचित्रपणे, याक्षणी, वेबकिट 100% पेक्षा कमी असल्यास व्युत्क्रमांना समर्थन देत नाही.

फिल्टर: उलटा (100%);
// ब्राउझर विशिष्ट
-वेबकिट-फिल्टर: उलटा (100%);
-moz-फिल्टर: उलटा (100% );
-ओ-फिल्टर: उलटा (100% );
-ms-फिल्टर: उलटा (100% );

ब्लीचिंग

पुन्हा, तुम्हाला इमेज डिसॅच्युरेट करण्याची टक्केवारी एंटर करा. उपलब्ध मूल्ये 0% ते 100% पर्यंत आहेत.

फिल्टर: ग्रेस्केल (100% );
// ब्राउझर विशिष्ट
-वेबकिट-फिल्टर: ग्रेस्केल (100% );
-moz-फिल्टर: ग्रेस्केल (100% );
-ओ-फिल्टर: ग्रेस्केल (100% );
-ms-फिल्टर: ग्रेस्केल (100% );

सेपिया

मला असे वाटते की आपण Instagram वर काहीतरी पोस्ट करू इच्छित असल्यास हे खूप उपयुक्त आहे. जरी मी असे गृहीत धरले आहे की आपण यासाठी CSS वापरणार नाही. कोणत्याही परिस्थितीत, राखाडी आणि नकारात्मक या छटा प्रतिमामध्ये सेपिया जोडण्यासाठी जोडतील. 100% संपूर्ण सेपिया असेल, 0% मूळ प्रतिमा असेल.

फिल्टर: सेपिया (100%);
// ब्राउझर विशिष्ट
-वेबकिट-फिल्टर: सेपिया(100%);
-मोज-फिल्टर: सेपिया(100%);
-ओ-फिल्टर: सेपिया (100% );
-एमएस-फिल्टर: सेपिया(100%);

ब्राउझर समर्थन

आपल्याला काही प्रश्न असल्यास, आम्ही आमचा वापर करण्याची शिफारस करतो

इनव्हर्ट() फंक्शन इमेजमधील रंग उलटे करते. त्याचा परिणाम छायाचित्राला नकारात्मक बनवण्यासारखा आहे.

मांडणी

फिल्टर: उलटा(<значение>);

हे कोणत्याही स्क्रिप्ट किंवा प्री-प्रोसेसिंगशिवाय CSS वापरून केले जाऊ शकते. होय, तंत्रज्ञान स्थिर नाही :) अंमलबजावणी अगदी सोपी आहे आणि आजकाल लोकप्रिय असलेल्या SVG च्या कोणत्याही स्वरूपाचा वापर करण्याची आवश्यकता नाही.

फोटोमध्ये फॉन्टचा रंग कसा पुन्हा रंगवायचा

जर तुम्ही MDN काळजीपूर्वक वाचले तर तुम्ही मिश्रण मोड्स अंदाजे समजू शकता आणि त्यांच्यातील फरक पाहू शकता, जरी ते जवळजवळ सर्व समान आहेत. प्रतिमेच्या वर पांढरा मजकूर असल्याने आम्हाला उलटी प्रतिमा असे परिणाम मिळतो, जेथे मजकूर ओव्हरलॅप होतो. साध्या काळ्या आणि पांढऱ्या प्रतिमांसाठी, मूळ प्रतिमेतील काळा पांढरा होतो जिथे आपल्याकडे पांढरा मजकूर असतो आणि मूळ प्रतिमेत पांढरा मजकूर असतो तेव्हा तो काळा होतो.

उदाहरणार्थ, एक आदिम HTML कोड घेऊ:

आणि त्यात आणखी काही आदिम CSS जोडा:

पार्श्वभूमी (पार्श्वभूमी: url(super_cat.jpg); रुंदी:800px; उंची:450px; ) h2 (रंग: #FFF; मिक्स-ब्लेंड-मोड: फरक; फॉन्ट: 900 120px/120px Arial; मजकूर-संरेखित: मध्यभागी ) स्पॅन (डिस्प्ले:ब्लॉक; फॉन्ट-आकार:80px)

हे न करताही छान निघाले फोटोशॉप प्रोग्राम! मजकूर आणि प्रतिमा दोन्ही बदलल्या जाऊ शकतात आणि कोणत्याही JavaScript किंवा CSS किंवा SV मास्कमध्ये कोणतेही बदल न करता प्रभाव राखला जातो. परंतु हे साध्या प्रतिमांसाठी योग्य आहे. अधिक जटिलतेसह, अतिरिक्त फिल्टर लागू करणे आणि त्यांचे मिश्रण करणे आवश्यक आहे.

उदाहरणार्थ, मदत करण्यासाठी आम्ही आमच्या h2 टॅगमध्ये खालील CSS फिल्टर जोडू शकतो:

H2 ( फिल्टर: उलटा(1) ग्रेस्केल(1) कॉन्ट्रास्ट(9) )

पर्याय शेअरिंगफिल्टर्स केवळ तुमच्या कल्पनाशक्ती आणि शैलीच्या चवीनुसार मर्यादित आहेत.

CSS गुणधर्म विकासाच्या अशा स्तरावर पोहोचले आहेत की ते ग्राफिक संपादकांच्या काही महत्त्वाच्या कार्यांचा सामना करण्यास सक्षम आहेत. याचे उदाहरण म्हणजे CSS फिल्टर्स, ज्याच्या सहाय्याने तुम्ही प्रतिमांसाठी सुंदर प्रभाव तयार करू शकता.

जर पूर्वी कल्पना करणे देखील अवघड होते, तर आता जवळजवळ सर्व सॉफ्टवेअर फिल्टर्स कॅस्केड टेबलमध्ये अंमलात आणले जातात, अस्पष्ट ते कलात्मक रंग मॉडेलपर्यंत.

परंतु तरीही, CSS फिल्टरमध्ये एक लहान कमतरता आहे - सर्व वेब ब्राउझर समर्थन देत नाहीत व्हिज्युअल प्रभाव. अर्थात, ही फक्त काळाची बाब आहे. आणि जेव्हा तास “x” येतो, तेव्हा विकसकांना तयार असणे आवश्यक आहे. आत्तासाठी, आतापर्यंत काय लागू केले गेले आहे ते पाहूया.

CSS फिल्टरसाठी ब्राउझर समर्थन

मूलभूतपणे, सर्व लोकप्रिय ब्राउझर, फायरफॉक्स, क्रोम, ऑपेरा, फिल्टर प्रभावांसह "अनुकूल" संबंध आहेत. IE बद्दल असेच म्हटले जाऊ शकत नाही, जे नवीनतम आवृत्त्यांमध्ये देखील प्रभावांना समर्थन देण्यास पूर्णपणे नकार देते.

CSS फिल्टरची कार्ये आणि वाक्यरचना

सर्व CSS गुणधर्मांमध्ये काही विशिष्ट पॅरामीटर्स असतात ज्या क्रमाने मूल्ये लिहिली जातात. फिल्टर गुणधर्म अपवाद नाही, इतरांप्रमाणे, ते एका अनुप्रयोगात अनेक नियमांचे संयोजन वापरू शकते. उदाहरणार्थ, प्रतिमेसाठी ब्राइटनेस फिल्टर जोडा आणि स्पेस नंतर दुसरा - कॉन्ट्रास्ट निर्दिष्ट करा. अधिक चांगल्या प्रकारे समजून घेण्यासाठी आम्ही या लेखातील काही उदाहरणांसह सर्वकाही कव्हर करू.

मांडणी

फिल्टर: फिल्टरचे नाव (मूल्याची टक्केवारी); फिल्टर: url(img.svg); फिल्टर: अस्पष्ट (10px); फिल्टर: चमक (0.9); फिल्टर: कॉन्ट्रास्ट (150%); फिल्टर: ड्रॉप-शॅडो(5px 5px 10px काळा); फिल्टर: ग्रेस्केल (80%); फिल्टर: ह्यू-फिरवा (60deg); फिल्टर: उलटा (80%); फिल्टर: अपारदर्शकता (50%); फिल्टर: संतृप्त (50%); फिल्टर: सेपिया (40%); /* एकाधिक फिल्टर लागू करा */ फिल्टर: कॉन्ट्रास्ट(150%) ग्रेस्केल (80%);

फिल्टरची यादी

CSS फिल्टरची उदाहरणे

आम्ही लेखाच्या एका मनोरंजक भागावर आलो आहोत, ज्यामध्ये आम्ही प्रत्येक फिल्टरचा त्याच्या अनुप्रयोगाच्या उदाहरणांसह स्वतंत्रपणे विचार करू. स्पष्टतेसाठी, तीन चित्रे वापरली जातील. प्रथम प्रारंभ बिंदू, मौलिकतेचे स्वरूप दर्शवेल. दुसरे फिल्टर लागू करण्याचे स्थिर उदाहरण म्हणून काम करेल आणि तिसरे इमेजवर माउस कर्सर फिरवत होव्हर प्रभाव दर्शवेल.

अस्पष्ट फिल्टर

IN ग्राफिक संपादकब्लर फिल्टर आहे एक अपरिहार्य साधनआणि अनेकदा कामात वापरले जाते. हे सहजपणे एक अस्पष्ट प्रतिमा तयार करू शकते, परंतु उर्वरित प्रतिमा अस्पष्टतेखाली येत असताना विशिष्ट घटकावर लक्ष केंद्रित करण्याचा प्रभाव निर्माण करू शकते. आणि बरेच काही.

वेबसाइट डिझाइनमध्ये (उदाहरणार्थ, अस्पष्टता) चित्रात असलेल्या मजकूराच्या चांगल्या वाचनीयतेसाठी अस्तर म्हणून वापरला जाऊ शकतो. वास्तविक, अस्पष्टता 0 px च्या मूल्यापासून पूर्णपणे गायब होईपर्यंत गॉशियन आहे.

मूळ

फिल्टर करा

होव्हर प्रभाव

/*स्थिर नियम*/ .efbl1 img( फिल्टर: blur(2px); -webkit-filter: blur(2px); ) /*हॉवर प्रभावासाठी*/ .efbl2 img (संक्रमण: सर्व 0.6s ease 0s; ) : hover img( फिल्टर: blur(4px); -webkit-filter: blur(4px); संक्रमण: सर्व 0.6s सहज 0s; )

फिल्टर सावली

कॅस्केडिंग टेबलच्या तिसऱ्या आवृत्तीसह सावलीची मालमत्ता आमच्याकडे आली. अर्थात, वेबसाइट डेव्हलपमेंटमध्ये गुंतलेल्या प्रत्येकाला ते परिचित आहे, कारण बॉक्स-शॅडो डिझाइनमध्ये महत्त्वाची भूमिका बजावते. ड्रॉप-शॅडो फिल्टरला समान पॅरामीटर्ससह निकृष्ट पर्याय म्हटले जाऊ शकते आणि त्यातील फक्त 5 आहेत, आतील सावली मोजत नाहीत.

लेखनाचा क्रम खालीलप्रमाणे आहे: 5px/-5px (क्षैतिज ऑफसेट), 5px/-5px (उभ्या ऑफसेट), 15px (शॅडो ब्लर त्रिज्या), 5px/-5px (सावलीचा ताण), काळा (रंग). फिल्टर स्ट्रेचिंग आणि इनसेट व्हॅल्यूज वगळता सर्व सिंटॅक्सला सपोर्ट करतो, तसेच स्वल्पविरामाने विभक्त केलेल्या अनेक छाया जोडतो. परंतु हे सर्व असूनही, काही फायदे आहेत, उदाहरणार्थ, फिल्टर स्यूडो-एलिमेंट्स विचारात घेते, जे आपल्याला घटकाच्या सावलीचा अचूक आकार प्रदर्शित करण्यास अनुमती देते.

हे देखील मनोरंजक आहे की जेव्हा ब्लॉकला पार्श्वभूमी नसते, परंतु फक्त एक सीमा स्ट्रोक निर्दिष्ट केला जातो, तेव्हा बॉक्स-शॅडो वापरताना, पार्श्वभूमी लक्षात घेऊन एक सावली प्रदर्शित केली जाईल, म्हणजे एक घन. आणि ड्रॉप-शॅडो वापरण्याच्या बाबतीत, सावली पार्श्वभूमी विचारात न घेता स्ट्रोकचे रूप धारण करते.

मूळ

फिल्टर करा

होव्हर प्रभाव

/*स्थिर नियम*/ .efdrswd1 img( फिल्टर: ड्रॉप-शॅडो(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0) , 0.4)); ) /*हॉवर प्रभावासाठी*/ .efdrswd2 img( संक्रमण: सर्व 0.6s सहज 0s; ) .efdrswd2: hover img( फिल्टर: ड्रॉप-शॅडो(6px 7px 3px rgba(0, 0, 0, 0.4)); -वेबकिट-फिल्टर: ड्रॉप-शॅडो(6px 7px rgba(0, 0, 0, 0.4)); सर्व 0.6s ease;

डिकॉलरायझेशन फिल्टर

योग्य दिशेने सर्व काळासाठी क्लासिक फोटोग्राफी शैली. फिल्टर फक्त एक मूल्य अनुमती देतो - सकारात्मक. निर्दिष्ट टक्केवारीवर अवलंबून, राखाडी छटा प्रतिमेचा रंग सहजतेने बदलेल. तसेच, टक्केवारीऐवजी, तुम्ही पूर्ण संख्येपर्यंत (0.01/1) अपूर्णांक वापरू शकता.

मूळ

फिल्टर करा

होव्हर प्रभाव

/*स्थिर नियम*/ .efgrays1 img( फिल्टर: ग्रेस्केल(90%); -वेबकिट-फिल्टर: ग्रेस्केल(90%); ) /*हॉवर प्रभावासाठी*/ .efgrays2 img (संक्रमण: सर्व 0.6s सहज 0s;) .efgrays2:होव्हर img( फिल्टर: ग्रेस्केल(90%); -वेबकिट-फिल्टर: ग्रेस्केल(90%); संक्रमण: सर्व 0.6s सहज 0s; )

ब्राइटनेस फिल्टर

प्रतिमेच्या "अनपेक्षित" काळ्या कोपऱ्यांवर प्रकाश जोडणे. हे सहसा फोटो प्रोसेसिंगमध्ये वापरले जाते, कारण हौशी छायाचित्रे सहसा खराब प्रकाश असलेल्या ठिकाणी घेतली जातात. फिल्टरची ब्राइटनेस 0% (पूर्णपणे काळा चित्र) पासून प्रतिमा जवळजवळ पूर्णपणे गायब करण्यापर्यंत समायोजित करण्यायोग्य आहे. मूळ बिंदू 100% म्हणून परिभाषित केला आहे आणि मूल्य अपूर्णांक म्हणून देखील निर्दिष्ट केले जाऊ शकते.

मूळ

फिल्टर करा

होव्हर प्रभाव

/*स्थिर नियम*/ .efbrig1 img( फिल्टर: ब्राइटनेस(150%); -वेबकिट-फिल्टर: ब्राइटनेस(150%); ) /*हॉवर प्रभावासाठी*/ .efbrig2 img (संक्रमण: सर्व 0.6s सहज 0s; ) .efbrig2:होव्हर img( फिल्टर: ब्राइटनेस(150%); -वेबकिट-फिल्टर: ब्राइटनेस(150%); संक्रमण: सर्व 0.6s सहज 0s;)

कॉन्ट्रास्ट फिल्टर

प्रतिमा अधिक अर्थपूर्ण बनवण्याचा एक सोपा मार्ग म्हणजे चित्राच्या सर्वात हलक्या आणि गडद भागांच्या ब्राइटनेस सेटिंग्जसह प्रयोग करणे. यामध्ये मदत करण्यासाठी कॉन्ट्रास्ट फिल्टर तयार आहे. त्याचे पॅरामीटर्स, इतर अनेकांप्रमाणे, नकारात्मक मूल्य (-150%) वगळतात, आणि प्रारंभिक स्थिती 100% वर सूचित केले आहे. टक्केवारी व्यतिरिक्त, अपूर्णांक (1.5) देखील अनुमत आहेत.

मूळ

फिल्टर करा

होव्हर प्रभाव

/*स्थिर नियम*/ .efcontr1 img( फिल्टर: कॉन्ट्रास्ट(150%); -वेबकिट-फिल्टर: कॉन्ट्रास्ट(150%); ) /*होव्हर प्रभावासाठी*/ .efcontr2 img( संक्रमण: सर्व 0.6s सहज 0s;) .efcontr2: hover img( फिल्टर: कॉन्ट्रास्ट(150%); -वेबकिट-फिल्टर: कॉन्ट्रास्ट(150%); संक्रमण: सर्व 0.6s सहज 0s; )

कलर टोन फिल्टर

प्रतिमा डिझाइनमधील एक उत्कृष्ट डिझाइन तंत्र जे मुख्य संसाधन डिझाइनच्या शैलीशी जुळते. निवडलेल्या रंगाची छटा मूळ प्रतिमेवर आच्छादित करण्याची कल्पना आहे. गुणोत्तर दिलेल्या डिग्रीनुसार बाहेर येतात, जे कलर व्हीलवरील रंग बिंदू दर्शविते.

जर मूल्य सकारात्मक (150deg) असेल, तर रोटेशन घड्याळाच्या दिशेने होते. त्यानुसार, नकारात्मक असल्यास, घड्याळाच्या उलट दिशेने. दोन पोझिशनमध्ये ते 0deg ते 360deg पर्यंत सुरू होते.

मूळ

फिल्टर करा

होव्हर प्रभाव

/*स्थिर नियम*/ .efhrotai1 img( फिल्टर: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); ) /*हॉवर प्रभावासाठी*/ .efhrotai2 img( संक्रमण: सर्व 0.6s सहज 0s );

उलटा फिल्टर

एक विशिष्ट प्रभाव जो आपल्याला प्रतिमेचा रंग उलटा बदलण्याची परवानगी देतो. ग्राफिक संपादकांमध्ये त्याची एक विशिष्ट भूमिका असते आणि असे घडते की त्याच्या सहभागाशिवाय इच्छित परिणाम मिळू शकत नाही. इन्व्हर्ट फिल्टर पॅरामीटर केवळ 0% ते 100% मूल्यापर्यंत सकारात्मक दिशेने निर्दिष्ट केले आहे.

मूळ

फिल्टर करा

होव्हर प्रभाव

/*स्थिर नियम*/ .efinve1 img( फिल्टर: invert(100%); -webkit-filter: invert(100%); ) /*हॉवर प्रभावासाठी*/ .efinve2 img (संक्रमण: सर्व 0.6s सहज 0s; ) .efinve2: hover img( फिल्टर: invert(100%); -webkit-filter: invert(100%); संक्रमण: सर्व 0.6s ease 0s; )

संपृक्तता फिल्टर

जेव्हा एखादी प्रतिमा अज्ञात कारणास्तव तिचा नैसर्गिक रंग गमावते (काहीतरी जसे सूर्य-ब्लीच केलेले टी-शर्ट), संपृक्तता वाढल्याने त्याचे मूळ स्वरूप त्वरित पुनर्संचयित होऊ शकते. आणि जर हा फिल्टर इतर फिल्टर्सच्या संयोजनात वापरला गेला तर परिणाम खूप समाधानकारक असेल. सेटिंग 0 प्रारंभिक दृश्यापासून मोठ्या संख्येपर्यंत केली जाते.

मूळ

फिल्टर करा

होव्हर प्रभाव

/*स्थिर नियम*/ .efsatut1 img( फिल्टर: saturate(165%); -webkit-filter: saturate(165%); ) /*hover effect*/ .efsatut2 img (संक्रमण: सर्व 0.6s सहज 0s;) .efsatut2: hover img( फिल्टर: saturate(165%); -webkit-filter: saturate(165%); संक्रमण: सर्व 0.6s ease 0s; )

सेपिया फिल्टर

जुन्या छायाचित्रांच्या प्रभावाचे अनुकरण (किंचित तपकिरी रंगाची छटा). हे प्रतिमेची रेट्रो शैली प्राप्त करते, जी विशेषतः लोकप्रिय आहे. सेपिया फिल्टर 0% (होम पोझिशन) पासून 100% पर्यंत समायोज्य आहे.

मूळ

फिल्टर करा

होव्हर प्रभाव

/*स्थिर नियम*/ .efsepiaa1 img( फिल्टर: sepia(100%); -webkit-filter: sepia(100%); ) /*हॉवर प्रभावासाठी*/ .efsepiaa2 img (संक्रमण: सर्व 0.6s सहज 0s;) .efsepiaa2: hover img( फिल्टर: sepia(100%); -webkit-filter: sepia(100%); संक्रमण: सर्व 0.6s सहज 0s; )

फिल्टर पारदर्शकता

कॅस्केडिंग टेबल आवृत्ती 3 मधील अपारदर्शकता गुणधर्मासारखे फिल्टर. वाक्यरचना समान आहे, परंतु पारदर्शकता मूल्य 0% ते 100% (मूळ स्थिती) पर्यंत समायोजित करण्यायोग्य आहे.

मूळ

फिल्टर करा

होव्हर प्रभाव

/*स्थिर नियम*/ .efopaty1 img( फिल्टर: अपारदर्शकता(50%); -वेबकिट-फिल्टर: अपारदर्शकता(50%); ) /*हॉवर प्रभावासाठी*/ .efopaty2 img( संक्रमण: सर्व 0.6s सहज 0s; ) .efopaty2: hover img( फिल्टर: अपारदर्शकता(50%); -वेबकिट-फिल्टर: अपारदर्शकता(50%); संक्रमण: सर्व 0.6s सहज 0s; )

दुवा फिल्टर करा

विशिष्ट अभिज्ञापक असलेल्या SVG घटकांवर आधारित कस्टम फिल्टर तयार केला जातो, जो नंतर लिंक फिल्टरद्वारे CSS मध्ये वापरला जाऊ शकतो. स्टँडर्ड फिल्टर्सपासून, ओव्हरले मास्कपासून बॅनल पारदर्शकतेपर्यंत परिणाम खूप वेगळे असू शकतात.

CSS फिल्टर जनरेटर

विविध CSS गुणधर्मांचे जनरेटर तयार करण्याची प्रथा फार पूर्वीपासून आहे. , आणि इतर अनेक. ते काम सोपे करण्यासाठी एक साधन म्हणून काम करतात. आणि नवशिक्या वेबमास्टरसाठी त्यांना दुहेरी फायदे मिळू शकतात. ते वापरण्यास अतिशय सोपे आहेत: स्लाइडर हलवा आणि तुम्ही लगेच परिणाम पाहू शकता. आणि पूर्ण झाल्यावर, व्युत्पन्न केलेला कोड कॉपी करणे बाकी आहे. हेच CSS फिल्टर जनरेटरसाठी आहे. आपल्या संदर्भासाठी त्यापैकी दोन येथे आहेत:

निष्कर्ष

पुनरावलोकन बरेच मोठे असल्याचे दिसून आले, परंतु मला आशा आहे की ते सराव मध्ये एखाद्यासाठी उपयुक्त ठरेल. तसेच, फिल्टर एकत्र करण्यास विसरू नका, एक चांगले आहे, परंतु काही विशिष्ट प्रकरणांमध्ये दोन चांगले असतील.