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

लेकिन CSS शैडो कैसे काम करते हैं? चलो ठीक अंदर गोता लगाएँ।

सीएसएस बॉक्स शैडो का उपयोग कैसे करें

आप CSS बॉक्स शैडो को CSS की एक पंक्ति के साथ लागू कर सकते हैं जिसमें अधिकतम छह मान हो सकते हैं। आपके सीएसएस बॉक्स छाया के काम करने के लिए मूल्यों का क्रम महत्वपूर्ण है, और ऐसा दिखता है:

बॉक्स-शैडो: ऑफ़सेट-एक्स ऑफ़सेट-वाई ब्लर स्प्रेड कलर इनसेट;

आइए प्रत्येक मान को क्रम से देखें।

सीएसएस बॉक्स छाया स्थिति

ऑफ़सेट-एक्स और ऑफ़सेट-वाई मान आपके बॉक्स छाया की स्थिति को नियंत्रित करते हैं। ऑफसेट-एक्स मान छाया की क्षैतिज स्थिति का प्रतिनिधित्व करता है, जबकि ऑफसेट-वाई ऊर्ध्वाधर ऑफसेट है।

 बॉक्स-शैडो: 10px 10px;

धनात्मक मानों के परिणामस्वरूप तत्व के नीचे और दाईं ओर एक छाया बनती है।

आप एच-ऑफसेट और वी-ऑफसेट के लिए ऋणात्मक मानों का भी उपयोग कर सकते हैं:

 बॉक्स-शैडो: -10पीएक्स -10पीएक्स;

एक नकारात्मक एच-ऑफ़सेट छाया को बाईं ओर ले जाता है, जबकि एक नकारात्मक वी-ऑफ़सेट इसे ऊपर की ओर ले जाता है:

instagram viewer

सीएसएस बॉक्स शैडो ब्लर

जैसा कि आप देख सकते हैं, अपनी छाया में एच-ऑफ़सेट और वी-ऑफ़सेट जोड़ने से बिना किसी पंख के एक ठोस छाया बनती है। धुंधला मान आपके CSS बॉक्स की छाया को धुंधला कर देता है और यदि आप तीसरा मान प्रदान करते हैं तो यह प्रभावी हो जाता है:

बॉक्स-शैडो: 10px 10px 20px;

ब्लर वैल्यू में आप जितनी अधिक संख्या जोड़ेंगे, आपकी सीएसएस बॉक्स शैडो उतनी ही अधिक ब्लर होगी। यह मान ऋणात्मक नहीं हो सकता।

सीएसएस बॉक्स शैडो स्प्रेड

प्रसार मूल्य आपको अपनी छाया की स्थिति को बदले बिना उसका आकार बदलने की अनुमति देता है।

 बॉक्स-शैडो: 10px 10px 20px 30px;

एक सकारात्मक फैलाव मूल्य आपके सीएसएस बॉक्स छाया को बड़ा कर देगा, जबकि एक नकारात्मक मूल्य इसे छोटा कर देगा।

सीएसएस बॉक्स छाया रंग

सीएसएस बॉक्स छाया तत्व के टेक्स्ट रंग के लिए डिफ़ॉल्ट है, लेकिन आप रंग जोड़कर इसे ओवरराइड कर सकते हैं:

डब्बे की छाया: 10पिक्सल 10पिक्सल 20पिक्सल 10पिक्सल #0000ff;

आपके द्वारा उपयोग किया जाने वाला रंग CSS कानूनी रंग प्रारूप में होना चाहिए, जैसे हेक्स कोड, RGB कोड या पूर्वनिर्धारित रंग। तुम कर सकते हो हेक्स कोड के बारे में जानें और अपनी छाया के साथ आरंभ करने से पहले अन्य CSS कानूनी रंग विकल्प।

सीएसएस बॉक्स शैडो इनसेट

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

डब्बे की छाया: 10पिक्सल 10पिक्सल 20पिक्सल 10पिक्सल #0000ff इनसेट;

यह एक पूर्वनिर्धारित पाठ मान है; मान सेट करने के लिए बस इसे जोड़ें या हटाएं।

CSS टेक्स्ट शैडो का उपयोग कैसे करें

सीएसएस टेक्स्ट शैडो बॉक्स शैडो की तरह होते हैं, हालांकि उनके पास संशोधित करने के लिए कम मान होते हैं। CSS टेक्स्ट शैडो के लिए सिंटैक्स इस तरह दिखता है:

टेक्स्ट-शैडो: ऑफ़सेट-एक्स ऑफ़सेट-वाई ब्लर-रेडियस कलर;

लेकिन ये मूल्य कैसे काम करते हैं?

सीएसएस पाठ छाया स्थिति

सीएसएस टेक्स्ट शैडो ऑफ़सेट एक ही बॉक्स शैडो वैल्यू के समान ही काम करते हैं:

टेक्स्ट-शैडो: 10px 10px;

सकारात्मक मान पाठ के नीचे और दाईं ओर छाया की स्थिति बनाएंगे।

नकारात्मक मान पाठ के ऊपर और बाईं ओर छाया रखकर विपरीत कार्य करते हैं।

 टेक्स्ट-शैडो: -10px -10px;

आप अपने CSS पाठ छाया को पूरी तरह से स्थान देने के लिए नकारात्मक और सकारात्मक मान मिला सकते हैं।

सीएसएस टेक्स्ट शैडो ब्लर रेडियस

सीएसएस टेक्स्ट शैडो ब्लर रेडियस आपको अपने टेक्स्ट के पीछे की छाया को धुंधला करने में सक्षम बनाता है।

टेक्स्ट-शैडो: 10px 10px 10px;

इस मान के लिए डिफ़ॉल्ट 0 (कोई धुंधला नहीं) है।

सीएसएस पाठ छाया रंग

डिफ़ॉल्ट रूप से, CSS पाठ छाया पाठ के रंग से मेल खाती है। आप अपने टेक्स्ट को CSS टेक्स्ट शैडो प्रॉपर्टी के अंत में जोड़कर उसका रंग बदल सकते हैं।

पाठ की छाया: 10पिक्सल 10पिक्सल 10पिक्सल #0000ff;

CSS बॉक्स शैडो कलर्स की तरह इसके लिए आपको CSS लीगल कलर का इस्तेमाल करना होगा।

सीएसएस बॉक्स और टेक्स्ट शैडो डिज़ाइन के उदाहरण

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

दो सीएसएस बॉक्स शैडो के साथ डुअल-कलर बॉर्डर

आप HTML एलीमेंट में एक से अधिक बॉक्स शैडो या टेक्स्ट शैडो जोड़ सकते हैं। जब तक उनके बीच अल्पविराम हैं, तब तक आप एक ही संपत्ति में नई छाया जोड़ सकते हैं।

डब्बे की छाया: 30पिक्सल 30पिक्सल#0000ff, -30 पीएक्स-30 पीएक्स 0पिक्सल#00ff00;

यह दोहरे रंग का बॉर्डर इसका एक अच्छा उदाहरण है। विपरीत स्थितियों के साथ दो CSS बॉक्स शैडो और कोई ब्लर/स्प्रेड एक उत्कृष्ट रचनात्मक बॉर्डर नहीं बनाते हैं।

नाटकीय प्रभाव के लिए डुअल सीएसएस टेक्स्ट शैडो

ऊपर दिए गए विचार के समान ही, आप दिलचस्प परिणामों के लिए टेक्स्ट को कई टेक्स्ट शैडो में जोड़ और रख सकते हैं।

टेक्स्ट-शैडो: 35px 20px 4px डार्कग्रे, -35px -20px 4px डार्कग्रे;

यह उदाहरण टेक्स्ट की एक लाइन दिखाता है जिसके ऊपर एक शैडो और नीचे एक शैडो होता है, दोनों में टेक्स्ट-आधारित रंग मान होते हैं।

इनसेट सीएसएस बॉक्स शैडो के साथ बहुरंगा पृष्ठभूमि

सीएसएस बिना किसी बाहरी फाइल के अनूठी और दिलचस्प संपत्ति बनाने के लिए पर्याप्त शक्तिशाली है। पृष्ठभूमि के रूप में इनसेट CSS बॉक्स शैडो का उपयोग करना इसका एक बेहतरीन उदाहरण है।

डब्बे की छाया: 20पिक्सल 10पिक्सल 10पिक्सल 40पिक्सल #000000 इनसेट, -50px -30px 8px 60px ग्रे इनसेट, 30px 20px 6px 90px लाइटग्रे इनसेट;

इस बॉक्स में अलग-अलग रंगों में तीन इनसेट शैडो के साथ एक सफेद बैकग्राउंड है। एक अनूठी पृष्ठभूमि बनाने के लिए छायाएं एक दूसरे को ओवरलैप करती हैं।

इस प्रभाव को और बढ़ाना एक साधारण मामला है स्टाइलिश CSS बैकग्राउंड ग्रेडिएंट जोड़ना अपने तत्व को।

क्रिएटिव वेब डिज़ाइन के लिए सीएसएस बॉक्स शैडो और टेक्स्ट शैडो

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