CSS is the key presentational technology that is used in website design.
In this tutorial we will learn about the shadow effects, layering multiple shadows, text-shadow effects.
CSS property “box-shadow” allows us to add an shadow effect to selected HTML element, whereas “text-shadow” allows us to add effect to selected text.
We can also layer shadows one after another by using “box-shadow” property.
Following is the example which will show you how to add shadow effects using CSS:
For safari, chrome, etc:
Box-shadow: -webkit-box-shadow:15px 15px 20px 5px #000;
Text-shadow: text-shadow: 2px 2px 10px #FEFF49;
For mozilla :
Box-shadow: -moz-box-shadow:15px 15px 20px 5px #000;
Text-shadow: text-shadow: 2px 2px 10px #FEFF49;
For Opera, IE 9, IE 10, firefox 4.0:
Box-shadow: box-shadow:15px 15px 20px 5px #000;
Text-shadow: text-shadow: 2px 2px 10px #FEFF49;<!–NOT For IE 9, IE 10–>
Note that only IE 9 & IE 10 supports box-shadow property whereas previous versions do not.
Even firefox 4.0 supports box-shadow property, for previous versions to it you need to prefix moz before it.
Text-shadow property is not at all supported by any versions of IE browsers.
We can insert 3 values maximum upto 4 values to both box-shadow as well as text-shadow property:
1st value is for the horizontal length of the shadow.
Eg: box-shadow:15px 15px 20px 5px #000;
Eg:text-shadow: 2px 2px 10px #FEFF49;
2nd value is for the vertical length of the shadow.
Eg: box-shadow:15px 15px 20px 5px #000;
Eg:text-shadow: 2px 2px 10px #FEFF49;
3rd value is for the blur radius – the degree of the blur shadow.
Eg: box-shadow:15px 15px 20px 5px #000;
Eg:text-shadow: 2px 2px 10px #FEFF49;
4th value is for a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract. Note that for inner shadows, expanding the shadow (creating more shadow area) means contracting the shadow’s perimeter shape.
Eg: box-shadow:15px 15px 20px 5px#000;
Text shadow doesn’t have any value for spread distance.
5th is the color of shadow.
Eg: box-shadow:15px 15px 20px 5px#000;
Eg:text-shadow: 2px 2px 10px #FEFF49;
The keyword ‘inset’ is used to change the drop shadow from an outer shadow to an inner shadow.
Inset keyword is not used in text-shadow property
Eg: box-shadow:inset 15px 15px 20px 5px #000;
Code:
<!doctype html><html><head> <title>Box shadow</title> <!–************** CSS ****************–> <style type=”text/css”> .a {width: 150px;height: 40px;border: 1px solid black; margin: 30px; position: relative; -moz-box-shadow:15px 15px 20px 5px #044A4F; /*For mozilla*/-webkit-box-shadow:15px 15px 20px 5px #044A4F;/*For safari, chrome*/box-shadow:15px 15px 20px 5px #044A4F;/*For Opera, IE 9, firefox 4.0 */ } .b {width: 150px;height: 40px;border: 1px solid black; margin: 30px; position: relative; box-shadow:15px 15px #4A086D;/*For mozilla*/-webkit-box-shadow:15px 15px #4A086D;/*For safari, chrome*/box-shadow:15px 15px #4A086D;/*For Opera, IE 9, firefox 4.0 */ } .c {width: 150px;height: 40px;border: 1px solid black;margin: 30px; position: relative; -moz-box-shadow:inset 15px 15px 20px 5px #600852;/*For mozilla*/-webkit-box-shadow:inset 15px 15px 20px 5px #600852; /*For safari, chrome*/box-shadow:inset 15px 15px 20px 5px #600852;/* For Opera, IE 9, firefox 4.0*/ } .d {width: 150px;height: 40px;border: 1px solid black; margin: 30px; position: relative; -moz-box-shadow:inset -15px -15px 20px 5px #600808;/*For mozilla*/-webkit-box-shadow:inset -15px -15px 20px 5px #600808; /*For safari, chrome*/box-shadow:inset -15px -15px 20px 5px #600808;/* For Opera, IE 9, firefox 4.0*/ } .e {width: 150px;height: 40px;border: 1px solid black; margin: 30px; position: relative; -moz-box-shadow:inset -15px -15px #154902;/* For mozilla*/-webkit-box-shadow:inset -15px -15px #154902; /*For safari, chrome*/box-shadow:inset -15px -15px #154902;/*For Opera, IE 9, firefox 4.0*/ } .f {width: 150px;height: 40px;border: 1px solid black; margin: 30px; position: relative; -moz-box-shadow:-15px -15px 20px 5px #AD9406;/*For mozilla*/-webkit-box-shadow:-15px -15px 20px 5px #AD9406; /* For safari, chrome*/box-shadow:-15px -15px 20px 5px #AD9406;/*For Opera, IE 9, firefox 4.0 */ } .g {width: 100px;height: 30px;border: 1px solid black; margin: 70px; position: relative; -moz-box-shadow: 0 0 10px 5px black, 40px -30px #F6FF68, -40px 30px #1D9E06, -50px 50px 10px 5px #EA1919, 40px 40px 30px #912CEE,-40px -15px 10px 5px #4BFFFF, -60px -40px 10px 5px #FF40CF, 50px -60px 20px #0E30F2; /*For mozilla*/box-shadow:0 0 10px 5px black, 40px -30px #F6FF68, -40px 30px #1D9E06, -50px 50px 10px 5px #EA1919, 40px 40px 30px #912CEE, -40px -15px 10px 5px #4BFFFF, -60px -40px 10px 5px #FF40CF, 50px -60px 20px #0E30F2;/*For Opera, IE 9, IE 10, firefox 4.0*/;-webkit-box-shadow:0 0 10px 5px black, 40px -30px #F6FF68, -40px 30px #1D9E06, -50px 50px 10px 5px #EA1919, 40px 40px 30px #912CEE, -40px -15px 10px 5px #4BFFFF, -60px -40px 10px 5px #FF40CF, 50px -60px 20px #0E30F2;/*For safari, chrome, etc*/ } .h {font: bold 25px Arial;width: 300px;height: 150px; margin: 10px; border: 1px solid black; } h3 {color: #070707;padding: 30px 130px;text-shadow:-30px -20px 0 #FF4B4B,-60px -40px 0 #0B4BA5, -85px -50px 0 #BFB418, -100px -65px 5px #0B7A32, -125px -75px 5px #4F2405, 40px 20px 0 #034F47, 60px 40px 0 #54085E,
85px 65px 5px #FC770A; /*For mozilla, safari, chrome, Opera*/ } .i {font: bold 35px Arial;width: 200px;height: 75px; margin: 5px; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#360451′, endColorstr=’#936464′); /* for IE */background: -webkit-gradient(linear, left top, left bottom, from(#360451), to(#936464)); /* for webkit browsers */ background: -moz-linear-gradient(top, #360451, #3A013F); /* for firefox 3.6+ */ } h4 {color: #FFF;margin:10px 0 10px 40px;text-shadow: 2px 2px 15px #FFD700;/*For mozilla, safari, chrome, Opera*/ } .j {font: bold 35px Arial;width: 200px;height: 100px; margin: 10px; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#06351B’, endColorstr=’#617565′); /* for IE */background: -webkit-gradient(linear, left top, left bottom, from(#06351B), to(#617565)); /* for webkit browsers */ background: -moz-linear-gradient(top, #06351B, #617565); /* for firefox 3.6+ */ } h5 {color: #FFF;padding: 5px 50px;text-shadow:0 0 4px white,0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200; /*For mozilla, safari, chrome, Opera*/ } div {display: block; margin: 0px; padding: 15px; color: #FFF; font: bold 20px/20px Arial;} </style> </head> <body> <div class=”a”> 1 </div>
<p>____________________________________________</p>
<div class=”b”> 2 </div>
<p>____________________________________________</p>
<div class=”c”> 3 </div>
<p>____________________________________________</p>
<div class=”d”> 4 </div>
<p>____________________________________________</p>
<div class=”e”> 5 </div>
<p>____________________________________________</p>
<div class=”f”> 6 </div>
<p>____________________________________________</p>
<div class=”g”> 7 </div>
<p>____________________________________________</p>
<div class=”h”> <h3> Taiijas </h3> </div>
<p>____________________________________________</p>
<div class=”i”> <h4> Taiijas </h4> </div>
<p>____________________________________________</p>
<div class=”j”> <h5> Taiijas </h5> </div> </body; </html>
The above code will result given below output.
In the output given below 1st block will show vertical & horizontal shadow effect with spread radius & blur effect.
2nd block will show same shadow effect without spread radius & blur effect.
3rd block will show inner shadow effect (with spread radius & blur effect) including positive values
4th block will show again inner shadow effect but with negative values.(with spread radius & blur effect)
5th block will show again inner shadow effect with negative values but without spread radius & blur effect.
6th block will show again vertical & horizontal shadow effect (with spread radius & blur effect) but including negative values.
7th block displays layering multiple shadows. While layering shadows you just need to change the horizontal & vertical values to change the position of shadows, blur-radius value & spread radius value to change every type of layer & insert different color values so you come to know which layer is placed where. (with positive & negative values both)
From here, text shadow effects are shown….
8th block shows example of multiple shadows for text using text-shadow property.
Experimenting with values inserted in text-shadow property we can give a glow effect to a particular text which is shown in 9th block.
The same experiment of inserting different values resulted in fire effect which is displayed in 10th block.
Note that positive value when inserted for outer shadow effects results in lower position of shadows of the box & when negative values inserted results in upper position of shadows of the box. But its vice-versa when values are inserted for inner shadow effect using keyword “inset”. In inner shadow effect positive values result in upper positioning of shadows whereas negative values result in lower positioning of shadows.
