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:
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?
oops!!! forgot to ask where from i can download
free templates
hey happy...yeah you can use css for developing sites...you can download templates from http://www.opendesigns.org/
Post a Comment