Om tekst een schaduw-effect te geven hoef je alleen maar het onderstaande javascript zo laag als mogelijk in de body-sectie van jouw pagina te plaatsen. Elke tekst die je een span met de class "shadow" geeft zal een schaduw-effect krijgen. Als voorbeeld: <span class="shadow">jouw tekst</span>.
In het script kan je drie variabelen instellen. de_tekst_kleur, schaduw_kleur en achtergrond_kleur. Experimenteer met de kleur-waarden om een gewenst resultaat te krijgen. In hele oude IE-browsers werkt de shadow niet lekker, maar omdat (bijna) niemand die browsers eigenlijk meer gebruikt is er geen work-around voor gemaakt.
<script>
/*global window: false */
var de_tekst_kleur = "#FF89D5";
var schaduw_kleur = "#000000";
var achtergrond_kleur = "#663340";
var de_css_code = ".script_schaduw{position:absolute;margin:0;background:transparent !important;z-index:2;padding:0 0.3em 0 0.3em}.shadow{color:" + schaduw_kleur + ";background-color:" + achtergrond_kleur + ";padding:0 0.3em 0 0.3em}",
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);
var i,
dekleur,
kompoos;
function doe_het_maar(e) {
var dus_de = e.cloneNode(1);
dus_de.className = "script_schaduw";
dus_de.className += e.className.replace("shadow", "");
dus_de.style.color = de_tekst_kleur;
e.parentNode.insertBefore(dus_de, e);
i++;
dus_de.style.top = (e.offsetTop - 1) + "px";
dus_de.style.left = (e.offsetLeft - 1) + "px";
}
function prepareer_schaduw() {
if (!document.createElement) {
return;
}
if (document.all) {
kompoos = document.all;
} else {
kompoos = document.getElementsByTagName("*");
}
for (i = 0; i < kompoos.length; i++) {
if ((" " + kompoos[i].className + " ").indexOf(" shadow ") != -1) {
doe_het_maar(kompoos[i]);
}
}
}
function start_shadow(wat, typetje, iets) {
if (wat.addEventListener) {
wat.addEventListener(typetje, iets, false);
return true;
} else if (wat.attachEvent) {
var imp = wat.attachEvent("on" + typetje, iets);
return imp;
} else {
return false;
}
}
start_shadow(window, "load", prepareer_schaduw);
</script>