CSS
फ़िल्टर संपत्ति
खोज…
वाक्य - विन्यास
- फ़िल्टर: कोई नहीं (डिफ़ॉल्ट मान)
- फिल्टर: प्रारंभिक (कोई नहीं के लिए चूक);
- फ़िल्टर: इनहेरिट (मूल मूल्य के लिए चूक);
- फ़िल्टर: ब्लर (px)
- फ़िल्टर: चमक (संख्या |%)
- फ़िल्टर: इसके विपरीत (संख्या |%)
- फिल्टर: ड्रॉप-छाया (क्षैतिज-छाया-पीएक्स लंबवत-छाया-पीएक्स छाया-धुंधला-पीएक्स छाया- - फैल रंग)
- फ़िल्टर: greyscale (संख्या |%)
- फ़िल्टर: ह्यू-रोटेट (नीचा)
- फ़िल्टर: उल्टा (संख्या |%)
- फ़िल्टर: अपारदर्शिता (संख्या |%)
- फ़िल्टर: संतृप्त (संख्या |%)
- फ़िल्टर: सीपिया (संख्या |%)
पैरामीटर
| मूल्य | विवरण |
|---|---|
| कलंक (एक्स) | छवि को x पिक्सेल द्वारा ब्लर्स करता है। |
| चमक (एक्स) | छवि को 1.0 या 100% से ऊपर किसी भी मूल्य पर रोशन करता है। उसके नीचे, छवि को गहरा किया जाएगा। |
| इसके विपरीत (एक्स) | 1.0 या 100% से ऊपर किसी भी मूल्य पर छवि के विपरीत प्रदान करता है। उसके नीचे, छवि को कम संतृप्त मिलेगा। |
| ड्रॉप-छाया (एच, वी, एक्स, वाई, जेड) | छवि को एक ड्रॉप-छाया देता है। h और v में नकारात्मक मान हो सकते हैं। x, y और z वैकल्पिक हैं। |
| ग्रेस्केल (एक्स) | छवि को greyscale में दिखाता है, जिसकी अधिकतम मान 1.0 या 100% है। |
| रंग घुमाने (एक्स) | छवि पर एक ह्यू-रोटेशन लागू करता है। |
| उलट (एक्स) | अधिकतम 1.0 या 100% मान के साथ छवि का रंग बदल देता है। |
| अस्पष्टता (एक्स) | यह सेट करता है कि छवि 1.0 या 100% के अधिकतम मूल्य के साथ अपारदर्शी / पारदर्शी कैसे है। |
| तर (एक्स) | 1.0 या 100% से ऊपर किसी भी मूल्य पर छवि को संतृप्त करता है। उसके नीचे, छवि डी-संतृप्त होना शुरू हो जाएगी। |
| सेपिया (एक्स) | 1.0 या 100% के अधिकतम मूल्य के साथ छवि को सेपिया में परिवर्तित करता है। |
टिप्पणियों
चूंकि फ़िल्टर एक प्रायोगिक विशेषता है, इसलिए आपको -webkit उपसर्ग का उपयोग करना चाहिए। यह वाक्य रचना और व्यवहार में बदल सकता है, लेकिन परिवर्तन शायद छोटे होने जा रहे हैं।
यह प्रमुख ब्राउज़रों के पुराने संस्करणों में समर्थित नहीं हो सकता है। यह मोबाइल ब्राउज़र में पूरी तरह से असमर्थित हो सकता है।
इसके अपेक्षाकृत सीमित समर्थन के कारण,
filter: drop-shadow()बजायbox-shadowका उपयोग करने का प्रयास करेंfilter: drop-shadow()।filter: opacity()बजायopacityउपयोग करेंfilter: opacity()।यह जावास्क्रिप्ट / jQuery के माध्यम से एनिमेटेड हो सकता है। जावास्क्रिप्ट के लिए,
object.style.WebkitFilterउपयोगobject.style.WebkitFilter।W3Schools में विभिन्न प्रकार के फ़िल्टर मानों के लिए एक डेमो पृष्ठ भी होता है।
ड्रॉप शैडो (यदि संभव हो तो इसके बजाय बॉक्स-शैडो का उपयोग करें)
एचटीएमएल
<p>My shadow always follows me.</p>
सीएसएस
p {
-webkit-filter: drop-shadow(10px 10px 1px green);
filter: drop-shadow(10px 10px 1px green);
}
परिणाम
एकाधिक फ़िल्टर मान
एकाधिक फ़िल्टर का उपयोग करने के लिए, प्रत्येक मान को एक स्थान के साथ अलग करें।
एचटीएमएल
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
सीएसएस
img {
-webkit-filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
}
परिणाम
ह्यू रोटेट
एचटीएमएल
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
सीएसएस
img {
-webkit-filter: hue-rotate(120deg);
filter: hue-rotate(120deg);
}
परिणाम
रंग उल्टा
एचटीएमएल
<div></div>
सीएसएस
div {
width: 100px;
height: 100px;
background-color: white;
-webkit-filter: invert(100%);
filter: invert(100%);
}
परिणाम
सफेद से काले रंग में बदल जाता है।
कलंक
एचटीएमएल
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
सीएसएस
img {
-webkit-filter: blur(1px);
filter: blur(1px);
}
परिणाम
बनाता है आप अपने चश्मे रगड़ना चाहते हैं।