Axelology
Posted At : December 4, 2006 1:32 PM
| Posted By : Axel Jensen
Use CSS to create a drop shadow
Short and to the point.
<style>
<!--
#title{
font-family:Arial, Helvetica, sans-serif;
position:relative;
top:5px;
left:5px;
}
#text {
color:#000000;
position: relative;
z-index:2;
top:0;
left:0;
}
#shadow {
color:#999999;
position:absolute;
z-index:1;
top:1px;
left:1px;
}
-->
</style>
<body>
<div id="title">
<a href="#"><span id="text">Alice in Wonderland</span></a>
<span id="shadow">Alice in Wonderland</span>
</div>
</body>
<!--
#title{
font-family:Arial, Helvetica, sans-serif;
position:relative;
top:5px;
left:5px;
}
#text {
color:#000000;
position: relative;
z-index:2;
top:0;
left:0;
}
#shadow {
color:#999999;
position:absolute;
z-index:1;
top:1px;
left:1px;
}
-->
</style>
<body>
<div id="title">
<a href="#"><span id="text">Alice in Wonderland</span></a>
<span id="shadow">Alice in Wonderland</span>
</div>
</body>
Blog provided and hosted by CF Webtools. Blog Sofware by Ray Camden.
It would be interesting to know if screen readers for visually impared people would read the text twice. I wonder if there is a way around that also - then it would be perfect!