<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Shadows</title>
<style>
.shadow_1 { text-shadow: 2px 2px; font-size:26px; padding:15px 0px;}
.shadow_2 { text-shadow: 2px 2px red; font-size:26px; padding:15px 0px; }
.shadow_3 { text-shadow: 2px 2px 5px red; font-size:26px; padding:15px 0px; }
.shadow_4 { color: #FFF; text-shadow: 2px 2px 4px #000000; font-size:26px; }
.shadow_5 { text-shadow: 0 0 3px #FF0000; font-size:26px; padding:15px 0px; }
.shadow_6 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; font-size:26px;
padding:15px 0px;
}
.shadow_7 { color: #FFF;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
font-size:26px;
padding:15px 0px;
}
</style>
</head>
<body>
<div class="shadow_1">www.freetimelearning.com</div>
<div class="shadow_2">www.freetimelearn.com</div>
<div class="shadow_3">www.freetimelearning.com</div>
<div class="shadow_4">www.freetimelearn.com</div>
<div class="shadow_5">www.freetimelearning.com</div>
<div class="shadow_6">www.freetimelearn.com</div>
<div class="shadow_7">www.freetimelearning.com</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Box Shadows</title>
<style type="text/css">
.box_shadow{
width:250px;
height:20px;
padding:40px 10px;
font-size:18px;
background-color:#F60;
box-shadow: 10px 10px;
margin:25px;
}
.shadow_gray{
width:250px;
height: 20px;
padding:40px 10px;
font-size:18px;
background-color:#F60;
box-shadow: 10px 10px #CCCCCC;
margin:25px;
}
.shadow_gray_2{
width:250px;
height:20px;
padding:40px 10px;
font-size:18px;
background-color:#F60;
box-shadow: 10px 10px 5px #CCCCCC;
margin:25px;
}
</style>
</head>
<body>
<div class="box_shadow">www.freetimelearning.com</div>
<div class="shadow_gray">www.freetimelearn.com</div>
<div class="shadow_gray_2">www.freetimelearning.com</div>
</body>
</html>