Geef een header, div of een <p> de class "shadow" mee, en alle links in dié header of de tag krijgen een schaduw-effect. Als voorbeeld: <h1 class="shadow">Dit is een <a href="/">link</a></h1>. Om het effect te laten werken moet je (zo laag als mogelijk) het onderstaande javascript in de body-sectie van jouw pagina plaatsen. De procedure is cross browser en maakt gebruik van het progressive enhancement mechaniek. Als er geen javascript voorhanden is zal de link gewoon weer-gegeven worden. Het is eenvoudig om, in het script, de vorm en kleurstelling aan te passen. Wijzig de code om een link te maken die aan jouw wensen voldoet.
<script>
var is_ie = document.all ? true: false;
if (is_ie) {
var de_css_code = ".shadow a{filter:progid:DXImageTransform.Microsoft.Shadow(color=#444444,direction=135)"+
";height:1em;letter-spacing:1px;display:inline-block;"+
"text-decoration:none;vertical-align:top;color:#44eeee;background:inherit;}"+
".shadow a:hover{color:#99ffff;background:inherit}";
} else {
var de_css_code = ".shadow a{letter-spacing:1px;display:inline-block;text-decoration:none;vertical-align:top;"+
"color:#44eeee;background:inherit;text-shadow:-1px 1px 2px #000000;}.shadow a:hover{color:#99ffff;background:inherit}";
}
var stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = de_css_code;
} else {
stijl_element.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
</script>