Text Shadow आपको इसके पीछे मौजूदा Text पर Shadow डालने की अनुमति देती है. लेकिन Background के Top पर इसको Simple Elegant Shadowing Effect के रूप मे उपयोग करना आसान होता है.
हालांकि यह सबसे उपयोगी है जब एक Background Image पर Text डालते है तो जिसमें बहुत यह अधिक विपरीत हो सकती है. और Text Background के खिलाफ आसानी से दिखाई नही दे सकता है.
Text Shadow जोड़ने से आपको Text के चारों ओर एक रूपरेखा मिलती है जिससे कि यह Image के साथ मिश्रण हो लेकिन यह अधिक Visible होता है.
<!DOCTYPE html>
<html>
<head>
<title>Example of Text shadow</title>
<style>
h1 {
text-shadow: 2px 2px #FF0000;
}
h2 {
text-shadow: 2px 2px yellow;
}
h3 {
text-shadow: 2px 2px 5px blue;
}
h4 {
color: white;
text-shadow: 2px 2px 4px green;
}
h5 {
text-shadow: 0 0 3px red;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
</style>
</head>
<body>
<h1>Tutorialsroot.com</h1>
<h2>Tutorialsroot.com</h2>
<h3>Tutorialsroot.com</h3>
<h4>Tutorialsroot.com</h4>
<h5>Tutorialsroot.com</h5>
<h6>Tutorialsroot.com</h6>
</body>
</html>
Box Shadow CSS3 मे एक बहुत शक्तिशाली Property है. CSS3 मे Box Shadow Properties आपको एक या एक से अधिक Inner और Outer Drop Shadows बनाने की अनुमति देता है.
Box Shadow Property के लिए आपको Horizontal और Vertical Offsets को Set करने की आवश्यकता होती है और फिर आप वैकल्पिक Blur और Color Set कर सकते है. और आप शुरू मे Default और साथ ही Inset Shadows को बना सकते हो.
<!DOCTYPE html>
<html>
<head>
<title>Example of Box Shadow</title>
<style>
div {
width: 400px;
height: 200px;
padding: 40px;
background-color: #FF0000;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow</div>
</body>
</html>