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.


11 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/

Anonymous said...

Infysolutions, one of the popular web application development companies in India, offers you web applications such as shopping cart software that enables easy and hassle-free shopping on your website which further accelerates your success in ecommerce. Alongside shopping cart software, you can approach Infysolutions.com for various other ecommerce solutions necessary for your growth in ecommerce and to avail of services from the company, come in touch with http://www.infysolutions.com and submit your requirements.

Anonymous said...

Thank you . To all participant, please have a look at our updated contest post.
Web development

e-Definers Technology - Web Design Company said...
This comment has been removed by the author.
e-Definers Technology - Web Design Company 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.