CSS Blur Filter - इमेज पर ब्लर इफेक्ट लगाने का गाइड

CSS Filter प्रॉपर्टी

CSS filter प्रॉपर्टी आपको वेब पेज पर किसी एलिमेंट पर ग्राफिकल इफेक्ट्स लागू करने की अनुमति देती है। अक्सर, फिल्टर प्रॉपर्टी का उपयोग वेब पेज पर इमेजेज और बैकग्राउंड्स पर फिल्टर लागू करने के लिए किया जाता है।

CSS द्वारा कई अलग-अलग फिल्टर्स प्रदान किए जाते हैं। उदाहरण के लिए, opacity फिल्टर आपको किसी एलिमेंट को अधिक या कम विज़िबल बनाने की अनुमति देता है, और drop-shadow फिल्टर आपको वेब पेज पर किसी एलिमेंट के नीचे छाया जोड़ने की अनुमति देता है।

फिल्टर लागू करने का सिंटैक्स

filter: filterName(arguments);

इस ट्यूटोरियल के लिए, हम CSS blur फंक्शन पर ध्यान केंद्रित करेंगे, जो किसी इमेज पर ब्लर इफेक्ट जोड़ता है।

CSS Blur फंक्शन

CSS blur फिल्टर एक फिल्टर फंक्शन है जो किसी इमेज पर ब्लर इफेक्ट जोड़ता है।

Blur फिल्टर का सिंटैक्स

filter: blur(radius);

इस सिंटैक्स में, "radius" उस ब्लर इफेक्ट के त्रिज्या को संदर्भित करता है जिसे लागू किया जाना चाहिए। आपके द्वारा निर्दिष्ट रेडियस वैल्यू जितनी बड़ी होगी, इमेज एलिमेंट पर उतना ही तीव्र ब्लर जोड़ा जाएगा। यदि आप वैल्यू "0" निर्दिष्ट करते हैं, तो उस इमेज एलिमेंट पर कोई ब्लर नहीं जोड़ा जाएगा जिस पर स्टाइल लागू होता है।

आपके द्वारा निर्दिष्ट रेडियस वैल्यू किसी भी लेंथ वैल्यू को स्वीकार कर सकती है, जैसे em, px, rem, और cm।

उदाहरण: कॉफी हाउस वेबसाइट के लिए ब्लर इफेक्ट

मान लीजिए हम एक स्थानीय कॉफी हाउस के लिए वेबसाइट डिज़ाइन कर रहे हैं। कॉफी हाउस के होम पेज पर, वे एक कॉफी की स्टॉक इमेज दिखाना चाहते हैं। हालांकि, वे चाहते हैं कि वह इमेज 2px रेडियस के ब्लर इफेक्ट के साथ दिखाई दे।

हम इस कार्य को पूरा करने के लिए ब्लर फंक्शन और फिल्टर प्रॉपर्टी का उपयोग कर सकते हैं। यहां वह कोड है जिसका उपयोग हम ब्लर फंक्शन के साथ ऐसी इमेज बनाने के लिए कर सकते हैं:

<html>
  <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80" 
       height="400" width="600" />
</html>

<style>
  img { filter: blur(2px); }
</style>

CSS Blur Filter - इमेज पर ब्लर इफेक्ट लगाने का गाइड

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमारे HTML कोड में, हमने अपने वेब पेज पर एक इमेज जोड़ने के लिए <img> टैग का उपयोग किया। यह इमेज कॉफी की एक स्टॉक इमेज से लिंक करती है। हम "height" और "width" पैरामीटर्स का उपयोग करके अपनी इमेज की ऊंचाई और चौड़ाई को क्रमशः 400px और 600px पर सेट करते हैं।

हमारे CSS कोड में, हम filter प्रॉपर्टी और blur फंक्शन का उपयोग करके अपने वेब पेज पर सभी <img> टैग्स पर ब्लर इफेक्ट लागू करते हैं। इस मामले में, हम 2px का ब्लर रेडियस निर्दिष्ट करते हैं, जो हमारी इमेज पर हल्का ब्लर इफेक्ट जोड़ता है। जैसा कि आप ऊपर देख सकते हैं, हमारे द्वारा उपयोग की जा रही कॉफी कप की इमेज थोड़ी धुंधली दिखाई देती है क्योंकि हमने ब्लर इफेक्ट का उपयोग किया है।

वैकल्पिक रूप से, यदि हम किसी अन्य माप इकाई का उपयोग करके ब्लर रेडियस निर्दिष्ट करना चाहते हैं, तो हम "2px" को उस वैल्यू से बदल सकते हैं जिसका हम उपयोग करना चाहते हैं। इसलिए, यदि हम चाहते हैं कि हमारी इमेज में 1.15em ब्लर रेडियस का ब्लर हो, तो हम ऊपर निर्दिष्ट "2px" ब्लर रेडियस को बदलकर ऐसा कर सकते हैं।

निष्कर्ष

CSS blur फंक्शन आपको वेब पेज पर किसी इमेज एलिमेंट के लिए ब्लर बनाने की अनुमति देता है। इस फंक्शन का उपयोग filter प्रॉपर्टी के साथ संयोजन में ब्लर इफेक्ट को इमेज पर लागू करने के लिए किया जाता है।

इस ट्यूटोरियल में CSS फिल्टर्स की बुनियादी बातों और वेब पेज पर इमेज में ब्लर इफेक्ट जोड़ने के लिए ब्लर फंक्शन का उपयोग कैसे करें, इस पर चर्चा की गई। अब आप एक प्रोफेशनल की तरह इमेज पर ब्लर इफेक्ट्स जोड़ने के लिए ज्ञान से लैस हैं!