KOMPOOS.NL

misty text

home » javascripts » text-effects » misty-text.html

uitleg misty effect

Het misty-script moet je zo laag als mogelijk in de body sectie van jouw pagina plaatsen. Het script is crossbroser. Hieronder staat een html-regel bijgevoegd (om als voorbeeld te dienen) hoe je het script "aanroept". In de code van het script kan je de eigenschappen en "verschijning" van de "mist" aanpassen.

voorbeeldregel voor misty-script


<h2><span class="misty-effect">misty text</span></h2>

het misty script


<script>
var de_css_code = '.misty-effect{' + 'color:#ccc;text-shadow:0px 0px 22px #bbbbbb, 0px 0px 4px #cccccc, 4px 4px 25px #bbbbbb;' + 
'height:1em;display:inline-block;-ms-filter:"progid:DXImageTransform.Microsoft.Glow(color=#eeeeee,strength=38)";' + 'filter: progid:DXImageTransform.Microsoft.Glow(color=#eeeeee,strength=38);}',
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>

positionering van de H1 en H2

Op deze pagina is voor IE nog een correctie aangebracht voor de positie. Op jouw pagina zal dat weer heel anders zijn. Toch nog even de code hieronder...
(plaats dit in de head-sectie van jouw pagina)


<!--[if IE]>
        <style type="text/css" media="screen">
                h1{margin:-21px 0 19px -38px}
                h2{margin:0 0 57px -38px}
        </style>
<![endif]-->