CSS Filter Property
Elements पर Visual Effects Add करने के लिए CSS filter Property का प्रयोग किया जाता हैं। Filter Property से Elements पर कुछ हद तक किसी Image Editor Program की तरह कार्य कर सकते हैं। Filter का Use वैसे तो सभी Elements पर किया जा सकता हैं।लेकिन, Image Element पर Filter का सबसे ज्यादा प्रयोग किया जाता हैं। Image के अलावा Border Element, Background के साथ भी Use किया जाता हैं। इस Property से Elements की Brightness, Contrast, Color Scale आदि Visual Properties को Edit किया जा सकता हैं। इसके अलावा Elements की Blur Setting भी की जा सकती हैं।
Filter Property General Syntax
Elements पर filter Property का Use करने के लिए filter को समझना जरुरी हैं, इसलिए हम इसका General Syntax बता रहे हैं।
selector {filter: filter-functions;}
Filter Property का Syntax बहुत ही आसान हैं। इसे भी अन्य CSS Properties कि तरह Declare किया जा सकता हैं।
Filter Syntax में मुख्य रूप से तीन भाग होते है।
- Selector – जिस Elements के लिए filter Declare करना चाहते हैं। उस Element को लिखा जाता हैं।
- Filter – filter तो Property का नाम ही हैं। इसे लिखना जरूरी हैं। और इसे हमेशा Selector के पीछे {} Bracket के भीतर लिखा जाता हैं।
- Filter Functions – Filter Functions का मतलब होता हैं Values। यहाँ Filter Property की अलग-अलग Values को लिखा जाता हैं।
Different Filter Functions & Values
Filter Property की Values को Filter Functions कहा जाता हैं। जिनके नाम और उपयोग के बारे में हम यहाँ बता रहे हैं।
- Blur(px) – इस Values के द्वारा Elements की blur Setting को Set किया जाता हैं। Value में Positive Increase Element को ज्यादा blur बनाती हैं। इसकी Value को px में Declare किया जाता हैं।
- Brightness(%) – Image की Brightness को Edit करने के लिए brightness filter-function का प्रयोग किया जाता हैं। 100% इसकी Default Value होती हैं और Original Image को Represent करती हैं। 100% से ऊपर Image का Brightness Level बढता जाता हैं। इसकी Value को प्रतिशत में लिखा जाता हैं।
- Contrast(%) – इस Value से Contrast को Set किया जाता हैं। 100% इसकी Default Value होती हैं 100% से ऊपर Image का Contrast Increase होता हैं।
- Drop Shadow (v-shadow h-shadow blur spread color) – इस filter-function द्वारा Image पर Shadow Effect को Apply किया जाता हैं। यह Function बिल्कुल CSS Box Shadow Property की तरह काम करती हैं।
- Grayscale(%) – Image को Black & White बनाने के लिए इस filter-function का उपयोग किया जाता हैं। 0% Original Image को Represent करती हैं और 100% Image को पूरी तरह Grayscale बना देती हैं।
- Hue Rotate(deg) – इस Function से hue rotation को Set किया जाता हैं। इसकी Value को Degree में लिखा जाता हैं। अधिकतम Value 360 Degree हो सकती हैं।
- Invert(%) – Image की Invert Setting करने के लिए इस Value का प्रयोग किया जाता है। इसकी Default Value 0% होती हैं। और 100% Image को पूरी तरह Invert कर देती हैं।
- Opacity(%) – Image का Opacity Level Set करने के लिए इस filter-function का प्रयोग किया जाता हैं। 100% पर Original Image होती हैं और 0% पर पूरी तरह Transparent हो जाती हैं।
- Saturate(%) – इस Function से Image को Saturate किया जाता हैं। इसकी Value को प्रतिशत में लिखा जाता हैं।
- Sepia(%) – यह Function Image को Sepia में Convert करता हैं। इसकी Value प्रतिशत में लिखी जाती हैं।
- URL() – इस Function से SVG Elements को filter किया जाता हैं। URL में XML File का Address लिखा जाता हैं। जो SVG Element को filter करेगा।
CSS filter Property Example in Hindi
<!DOCTYPE html>
<html>
<head>
<title>CSS filter Property Example</title>
<style type=”text/css”>#img1 {
blur(5px);
}
#img2 {
grayscale(50%);
}
</style>
</head>
<body>
<p>नीचे हम 2 Image Define कर रहे हैं। और दोनों Images पर अलग-अलग filter-functions इस्तेमाल कर रहे हैं।</p>
<img src=”flower.png” id=”img1″ />
<img src=”flower.png” id=”img2″ />
</body>
</html>
OUTPUT-
For Any Doubt Clear on Telegram Discussion Group
