Someone write this Plugin! Text-shadow for IE

  • geezerd

    (@geezerd)


    14 years ago

    OK, someone out there is snow bound and looking for a project. ??

    This could be done with javascript only, also, I would think. But I’m no programmer.

    Anyway, what essentially needs to be done is to inject a span into whatever tag is chosen, with a repeat of whatever text is in that tag.
    Most likely all the header tags.

    So <h1>Hello World!</h1> becomes
    <h1>Hello World!<span class="shadow">Hello World!</span></h1>

    Here’s the magic. It’s a full html page, so you can save it as whatever.html and check out what goes on:

    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='https://www.w3.org/1999/xhtml'>
<head>
<style type="text/css">
* {margin: 0px; padding: 0px;}
body {padding:100px 300px 0;}
h1 {display:inline; width:100%; position:relative; z-index:1; font: bold 24px/28px "Trebuchet MS", sans serif; color:red;
             text-shadow: 2px 1px 1px #999;}
.shadow {display:none;}
</style>
<!--[if IE]>
<style type="text/css">
.shadow {display:inline; width:100%; position:absolute; z-index:0; font: bold 24px/28px "Trebuchet MS", sans serif; color:#999;
              top:3px; left:2px; filter:alpha(opacity=30); opacity:0.3;}
</style>
<![endif]-->
</head>
<body>

<h1><span class="shadow">Don’t Waste Your Time on the “Latest & Greatest”</span>Don’t Waste Your Time on the “Latest & Greatest”</h1>

</body>
</html>

    The top and left properties will probably need to be adjusted in the .shadow css for each element, so it might need another class in the span tag it injects, like <span class="shadow shad01"> or something. Again, I’m no coder, so I’m just guessing.

    Would be a neat plug in or javascript. Just sayin’ ;).

  • The topic ‘Someone write this Plugin! Text-shadow for IE’ is closed to new replies.