सीएसएस धुंधला

जब आप एक वेबसाइट डिजाइन कर रहे हों, तो आप यह तय कर सकते हैं कि आप किसी विशेष छवि में धुंधला प्रभाव जोड़ना चाहते हैं। उदाहरण के लिए, यदि आप एक कॉफी हाउस के लिए एक वेबसाइट डिजाइन कर रहे हैं, तो आप एक छवि को धुंधला करना चाह सकते हैं ताकि आप उपयोगकर्ता को पढ़ने के लिए छवि के सामने टेक्स्ट रख सकें।

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

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

सीएसएस फ़िल्टर

CSS फ़िल्टर गुण आपको वेब पेज पर किसी तत्व पर ग्राफिकल प्रभाव लागू करने की अनुमति देता है। अक्सर, फ़िल्टर गुण का उपयोग वेब पेज पर छवियों और पृष्ठभूमि पर फ़िल्टर लागू करने के लिए किया जाता है।

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

फ़िल्टर लगाने का सिंटैक्स इस प्रकार है:

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

सीएसएस धुंधला

CSS ब्लर फ़िल्टर एक फ़िल्टर फ़ंक्शन है जो एक छवि में एक धुंधला प्रभाव जोड़ता है।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

ब्लर फ़िल्टर का उपयोग करने का सिंटैक्स इस प्रकार है:

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

आपके द्वारा निर्दिष्ट त्रिज्या मान किसी भी लंबाई मान को स्वीकार कर सकता है, जैसे कि एम, पीएक्स, रेम और सेमी।

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

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

हमारा कोड लौटाता है: हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।

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

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

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

निष्कर्ष

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

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