Text Shadow - CSS 2 and DIV Based
Shadow is a very important part of web design. Generally a shadow is created in Photo editing software and the image is used to denote the text.
CSS 2.0 shadow is only supported in Safari. But if there is any need to create shadowed text using only CSS, there is a way in which we can create cross browser compatible shadowed text.
The idea is simple. We can use two layered divs to be used as text effect. The top and the bottom layer are positioned absolute so that they come one under another. The top and left positions are coded such as both classes for the top and the bottom element has 1px gap between them.
First write the CSS -
background-color:#eee;
height:20px;
width:200px;
}
#top-text {
color:#aaa;
font:bold 14px arial,sans-serif;
left:11px;
position:absolute;
top:8px;
}
#shadow-text {
color:#fff;
font:bold 14px arial,sans-serif;
left:12px;
position:absolute;
top:7px;
}
We then place the divs in a central div.
Then we write the HTML -
<div id="shadow-text">Sample Text</div>
<div id="top-text">Sample Text</div>
</div>
The only shortcoming of this technique is the left and top positions are fixed thus the page should be fixed width and not fluid width. Please give your comments.
Posted by admin in DIV, HTML Elements, Text Effects on Thursday, August 27, 2009
