Text shadows
Shadows. On text.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text shadows</title>
<style>
body {
font: 20px/2 "times new roman", times, serif;
color: #000;
}
h1 {
text-shadow: -2px 2px 2px #999;
}
em {
font-weight: bold;
padding: 8px;
}
#elephant {
color: #eee;
background: #999;
text-shadow: 2px 1px 0 #000;
}
#plesiosaur {
background: #bde;
color: #06c;
text-shadow: 0 -3px 1px #fff;
}
#tourist {
color: #efa;
background: #be0;
text-shadow: 0 0 4px #360;
}
</style>
</head>
<body>
<h1>A little tale accompanied by a little text shadow</h1>
<p>In Botswana's Chobe National Park, <em id="elephant">an elephant with an especially large trunk</em> is minding its own business when <em id="plesiosaur">a plesiosaur with five heads, two tails, and the legs of a lion</em> falls out of the sky and lands on the elephant's back.</p>
<p>"Hah hah! That's hilarious!", says the plesiosaur, "Your trunk is huge!"</p>
<p><em id="tourist">A stunned tourist in a nearby Jeep</em> drops his camera, stares in amazement, and excitedly taps his wife on the shoulder.</p>
<p>"Look, honey! That's amazing! The talking prehistoric marine reptile with five heads, two tails, and the legs of a lion that fell out of the sky is right! That elephant's trunk is ginormous!"</p>
<!-- Link back to HTML Dog: -->
<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>