CSS filter Property क्या हैं पूरी जानकारी हिंदी में?

इस Tutorial में हम आपको CSS filter Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.

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 बता रहे हैं.

filter Property का Syntax बहुत ही आसान हैं. इसे भी अन्य CSS Properties कि तरह Declare किया जा सकता हैं. filter Syntax में मुख्य रूप से तीन भाग होते है.

1. selector – जिस Elements के लिए आप filter Declare करना चाहते हैं. उस Element को लिखा जाता हैं. CSS Selector के बारे में और जानने के लिए आप CSS Selector Tutorial को पढ सकते हैं.
2. filter – filter तो Property का नाम ही हैं. इसे लिखना जरूरी हैं. और इसे हमेशा Selector के पीछे {} Bracket के भीतर लिखा जाता हैं.
3. 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 हो जाती हैं. इस Function के बारे में और ज्यादा CSS Opacity Property Tutorial से ली जा सकती हैं.
• 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

इसे Try कीजिए

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

 

नीचे हम 2 Image Define कर रहे हैं. और दोनों Images पर अलग-अलग filter-functions इस्तेमाल कर रहे हैं.

इस Image को Blur किया गया हैं.

 

इस Image को Grayscale किया गया हैं.

 

 

आपने क्या सीखा?

इस Tutorial में हमने आपको CSS filter Property की पूरी जानकारी दी हैं. आपने विभिन्न प्रकार के filter-functions के उपयोग के बारे में भी जाना हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.

#BeDigital