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:
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/
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.
Thank you . To all participant, please have a look at our updated contest post.
Web development
Post a Comment