CSS शाड़ी प्रभाव

कॉफी
Shadows

CSS द्वारा शाड़ी प्रभाव बनाएं!

मेरे ऊपर हॉवर करें!

CSS शाड़ी प्रभाव

CSS का उपयोग करके, आप टेक्स्ट और एलिमेंट्स पर शाड़ी जोड़ सकते हैं。

हमारे पाठ्यक्रम में, आप इन गुणों को सीखेंगे:

  • text-shadow
  • box-shadow

CSS लेख शाड़ी

CSS text-shadow इस गुण को टेक्स्ट पर शाड़ी जोड़ता है。

सबसे सरल उपयोग में केवल आड़ा शाड़ी (2px) और ऊर्ध्व शाड़ी (2px) निर्दिष्ट करें:

टेक्स्ट शेडो इफेक्ट!

इंस्टैंस

h1 {
  text-shadow: 2px 2px;
}

स्वयं अभिजायक करें

अगले, शाड़ी को रंग जोड़ें:

टेक्स्ट शेडो इफेक्ट!

इंस्टैंस

h1 {
  text-shadow: 2px 2px red;
}

स्वयं अभिजायक करें

तब, शाड़ी में धुंधलापन जोड़ें:

टेक्स्ट शेडो इफेक्ट!

इंस्टैंस

h1 {
  text-shadow: 2px 2px 5px red;
}

स्वयं अभिजायक करें

इस उदाहरण में श्वेत लेख को काली शाड़ी के साथ प्रदर्शित किया गया है:

टेक्स्ट शेडो इफेक्ट!

इंस्टैंस

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

स्वयं अभिजायक करें

इस उदाहरण में लाल नाइट लाइट शाड़ी का प्रदर्शन किया गया है:

टेक्स्ट शेडो इफेक्ट!

इंस्टैंस

h1 {
  text-shadow: 0 0 3px #FF0000;
}

स्वयं अभिजायक करें

कई शाड़ियाँ

टेक्स्ट में कई शाड़ियाँ जोड़ने के लिए, आप शाड़ियों की सूची को कमा से अलग कर सकते हैं。

इस उदाहरण में लाल और नीले नाइट लाइट शाड़ी का प्रदर्शन किया गया है:

टेक्स्ट शेडो इफेक्ट!

इंस्टैंस

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

स्वयं अभिजायक करें

नीचे दिए गए उदाहरण में श्वेत टेक्स्ट के साथ काला, नीला और गहरा नीला शेडो दिखाया गया है:

टेक्स्ट शेडो इफेक्ट!

इंस्टैंस

h1 {
  color: white;
  text-shadow: 1px 1px 2px श्वेत, 0 0 25px नीला, 0 0 5px गहरा नीला;
}

स्वयं अभिजायक करें

आप टेक्स्ट के चारों ओर शुद्ध बॉर्डर (बिना शेडो) बनाने के लिए text-shadow अट्रिब्यूट का उपयोग कर सकते हैं:

टेक्स्ट के चारों ओर बॉर्डर बांधें!

इंस्टैंस

h1 {
  color: yellow;
  text-shadow: -1px 0 श्वेत, 0 1px श्वेत, 1px 0 श्वेत, 0 -1px श्वेत;
}

स्वयं अभिजायक करें