CSS text-shadow Property
Introduction to CSS text-shadow Property
CSS आपको text की shadow display करने की ability provide करती है। किसी भी text की shadow display करके आप उसे और भी attractive बना सकते है।
अभी तक यह popular feature सिर्फ कुछ word processors जैसे की MS Word आदि में ही available था। इस feature को webpages में implement करने के लिए CSS3 में text-shadow property introduce की गयी है।
इस property द्वारा आप किसी text की एक से अधिक shadows भी create कर सकते है। इसके लिए values को दुबारा comma से separate करके लिखा जाता है।
इस property को आप website की heading या फिर किसी important note को display करने के लिए use कर सकते है।
Syntax of CSS text-shadow Property
निचे text-shadow property का general syntax दिया जा रहा है।
text-shadow : horizontal-shadow vertical-shadow blur color;
जैसा की आप ऊपर दिए गए syntax में देख सकते है text-shadow property के लिए 4 values define की जाती है। इनके बारे में निचे बताया जा रहा है।
- horizontal-shadow - यह value define करती है की shadow horizontally किस प्रकार show होगी। यह value एक pixel number होता है जो यह बताता है की shadow right या left में कितना दिखाई देगी। जब यह value positive में define की जाती है तो shadow right side में show होती है। जब यह value negative में define की जाती है तो shadow left में show होती है। जब इस value को increase या decrease किया जाता है तो shadow उतनी ही left और right में बढ़ती है।
- vertical-shadow - यह value define करती है की shadow vertically किस प्रकार show होगी। यह value एक pixel number होता है जो यह बताता है की shadow top या bottom में कितनी दूर तक दिखाई देगी। यह value negative define किये जाने पर shadow top में show होती है और value positive होने पर shadow bottom में show होती है। जब इस value को increase या decrease किया जाता है तो shadow उतनी ही top और bottom की तरफ बढ़ती हे।
- blur - यह value pixel number होता है जो यह बताता है की shadow कितनी धुँधली show होगी।
- color - यह value color के लिए होती है इसे आप नाम के द्वारा या hex value के रूप में define कर सकते है।
किसी text की एक से अधिक shadow define करने के लिए आप इन सभी values को comma से separate करके दूसरी shadow के लिए दुबारा से define करते है।
Example of CSS text-shadow Property
निचे text-shadow property का simple उदाहरण दिया जा रहा है।
<html>
<head>
<title>CSS text-shadow Property Demo</title>
<style>
span
{
text-shadow : 8px 8px 8px #939597;
color:#272727;
font-size:3em;
}
</style>
</head>
<body>
<span>Best Hindi Tutorials</span>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करती है।
