KOMPOOS.NL

blur tekst

home » javascripts » text-effects » blur.html

sitemap


Cross browser blur effect

uitleg blur procedure

Het javascript hieronder zorgt er voor dat je tags of headers (voor wat betreft de tekst daar-in) een blur effect kan geven. Een voorbeeld van een html-regel is: <h2 class="blur">blur script</h2>. Plaats het javascript van de blur zo laag als mogelijk in de body-sectie van jouw pagina en pas, naar wens, de variabelen aan om het gewenste effect te verkrijgen.

Javascript blur procedure


<script>
var is_ie = document.all ? true: false;
if (is_ie) {
    var de_css_code = ".blur{filter: blur(add=false, direction=135, strength=4);font-weight:700;display:block;height:40px;color:#00cc00;letter-spacing:1px}";
} else {
    var de_css_code = ".blur{color: #00cc00;letter-spacing:1px;text-shadow: 0pt 0pt 5px #005500, 0pt 0pt 4px #005500, 1px 1px 3px #005500;}";
}
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>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.