सीएसएस फ़िल्टर प्रभाव के साथ छवियों के लिए फ़िल्टर

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



डेमो / डाउनलोड स्रोत / विशिष्टता फ़िल्टर प्रभाव 1.0

ब्राउज़र का समर्थन

हमेशा की तरह, इस विकल्प का समर्थन करने वाले ब्राउज़र को caniuse.com पर देखा जा सकता है:

प्रभाव

प्रभावों का अनुप्रयोग बहुत सरल है, उदाहरण के लिए, इस डिजाइन का उपयोग काले और सफेद रंग की छवि को बदलने के लिए किया जाता है:

img { -webkit-filter: grayscale(100%); } 

सीपिया, अला इंस्टाग्राम:

 img { -webkit-filter: sepia(100%); } 

दोनों प्रभावों में, आप प्रभाव स्तर को 0 से 100% तक सेट कर सकते हैं।

चमक, 50%:

 img { -webkit-filter: brightness(50%); } 

चमक नकारात्मक मूल्यों को ले सकती है, छवि गहरा जाएगी:

 img { -webkit-filter: brightness(-50%); } 

100% विपरीत प्रभाव पर छवि नहीं बदलती है, इसलिए आप 200% सेट कर सकते हैं:

 img { -webkit-filter: contrast(200%); } 

प्रभाव संयुक्त हो सकते हैं:

 img { -webkit-filter: grayscale(100%) contrast(150%); } 

तो आप एक सुंदर होवर प्रभाव प्राप्त कर सकते हैं:

 img:hover { -webkit-filter: grayscale(0%); } img:hover { -webkit-filter: sepia(0%); } img:hover { -webkit-filter: brightness(0%); } img:hover { -webkit-filter: contrast(100%); } 

धुंधला प्रभाव:

 img:hover { -webkit-filter: blur(5px); } 

विनिर्देश अन्य प्रभावों, जैसे ह्यू-रोटेट, इनवर्ट और सैचुरेट का विवरण देता है। लेकिन वे लाइव परियोजनाओं पर बहुत कम लागू होते हैं।

Hongikat.com से उदाहरण