CSS filter Property
Introduction to CSS filter Property
Elements की color सम्बन्धित properties जैसे की contrast, brightness, blurriness आदि को control करने के लिए CSS3 में filter property introduce की गयी है। यह property मुख्यतः <img> elements के साथ प्रयोग की जाती है।
Basically इस property द्वारा आप elements की brightness, contrast आदि को increase और decrease कर सकते है। यह property आपको कुछ हद तक image editors जैसी capabilities provide करती है।
इस property द्वारा color shifting भी की जा सकती है। यानी की यदि आप किसी color image को black and white में show करना चाहते है तो ऐसा आप इस property द्वारा कर सकते है।
इस property की value के रूप में functions pass किये जाते है। हर color property के लिए अलग से function मौजूद है। इन functions को filters भी कहा जाता है जिन्हें आप किसी <img> या दूसरे element पर apply करते है।
जब भी किसी element पर कोई filter apply किया जाता है तो render (display) होने से पूर्व वह element filter function से pass होता है। Filter function या simply filter द्वारा उस element की color properties change की जाती है और इसके बाद वह element webpage में render होता है।
Syntax of CSS filter Property
CSS filter property का general syntax निचे दिया जा रहा है।
filter : none | filter-function;
जैसा की आप ऊपर दिए गए syntax में देख सकते है filter property की value none या किसी filter function के रूप में pass की जाती है।
जब इस property की value none pass की जाती है तो किसी भी प्रकार का filter apply नहीं होता है। इसके अलावा आप इस property में निचे दिए जा रहे filter functions को भी pass कर सकते है।
blur(px)
यह function किसी image का blur effect define करने के लिए प्रयोग किया जाता है। इस function में value pixels के रूप में pass की जाती है।
brightness(%)
यह function किसी image की brightness को control करने के लिए use किया जाता है। इस function में value percentage के रूप में pass की जाती है।
contrast(%)
यह function किसी image के contrast को control करने के लिए प्रयोग किया जाता है। इसकी value percentage के रूप में pass की जाती है।
drop-shadow(v-shadow h-shadow blur spread color)
यह function किसी image का shadow effect create करने के लिए प्रयोग किया जाता है। इस function में vertical shadow, horizontal shadow, blur, spread और shadow का color आदि values pass की जाती है।
Vertical shadow value द्वारा define किया जाता है की shadow top में show होगी या bottom में show होगी। इसी प्रकार horizontal shadow value द्वारा define किया जाता है की shadow right में show होगी या left में show होगी।
Blur value define करती है shadow कितनी धुँधली show होगी। Spread value define करती है की shadow कितनी फैलेगी। Color value द्वारा shadow का color define किया जाता है।
grayscale(%)
यह function किसी image पर black and white effects apply करने के लिए प्रयोग किया जाता है। इस function की value percentage के रूप में pass की जाती है।
hue-rotate(deg)
यह function image पर hue rotation apply करने के लिए प्रयोग किया जाता है। Hue rotation एक color circle पर किया जाने वाला rotation होता है। Value के रूप में इस function में degree pass की जाती है जिस पर आप image को rotate करना चाहते है। जिस degree पर आप rotate करते है वही color combination image पर apply हो जाता है।
invert(%)
यह function किसी image के colors को उनके विपरीत colors में invert कर देता है। इस function की value percentage के रूप में pass की जाती है।
opacity(%)
इस function द्वारा image की opacity define की जा सकती है। Opacity define करने के लिए आप opacity properties भी use कर सकते है।
saturate(%)
यह function image को saturate करने के लिए प्रयोग किया जाता है। इसकी value percentage के रूप में pass की जाती है।
sepia(%)
यह function image को काले और भूरे रंग के combination में convert करता है। इसकी value percentage में define की जाती है।
url()
यह function SVG elements को filter करने के लिए प्रयोग किया जाता है। इस function में उस XML file का address pass किया जाता है जो SVG element को filter करेगी।
Example of CSS filter Property
निचे CSS filter property को simple उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS filter Property Demo</title>
<style>
img
{
filter:blur(5px);
}
</style>
</head>
<body>
<h1>CSS filter Property Example</h1>
<img src="images/bht-logo.jpg">
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
