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.


9 comments:

Happy said...

I like your tutorial about how to create text with shadow without using any image.It is good tutorial.can we use css for website development and web design?

Happy said...

oops!!! forgot to ask where from i can download
free templates

Ganesh said...

hey happy...yeah you can use css for developing sites...you can download templates from http://www.opendesigns.org/

e-Definers Technology said...
This comment has been removed by the author.
e-Definers Technology said...
This comment has been removed by the author.
John said...
This comment has been removed by the author.
John said...
This comment has been removed by the author.
John said...
This comment has been removed by the author.
John said...
This comment has been removed by the author.