Monday, February 4, 2008

Create Awesome Text Shadows With Pure CSS

I love finding ways to use css to replace unnecessary usage of images. In this tutorial I will teach you to create cool text with shadow without using any images or javascript. Here is my end result

The CSS:

#title{
z-index: 2;
color: #333333;
position:fixed;
font-size: 30px;
left:5px;
top:5px;
}
#shadow{
z-index: 1;
font-size: 30px;
color: #C0C0C0;
position:fixed;
left:8.5px;
top:8.5px;
}


The HTML:


<!doctype html public "-//W3C//DTD HTML 4.01//EN">

<html>

<head>
<title>Test</title>
</head>

<body>
<div id="title">
<h1>Test</h1>
</div>
<div id="shadow">
<h1>Test</h1>
</div>

</body>
</html>


This is done by using z-index property of elements in CSS. The shadow should be placed behind the text by assigning it a z-index lesser to that of the text. If you want to increase the distance of the shadow from the text then change the left and top properties.

So the next time you want to create a nice little text with shadow instead of jumping onto your Photoshop, use this technique.

Post in the commnets if you have anything to say about this technique, blog or want to show off your implementation of this technique.