KOMPOOS.NL

outline text

home » javascripts » text-effects » outline-tekst.html

sitemap

uitleg van de cross browser outline tekst procedure

Niet nodig om uit te leggen wat dit script doet. De rood-zwarte h1 spreekt voor zichzelf. Om dit outline "font" op jouw webpagina te kunnen gebruiken, moet je het onderstaande javascript zo laag als mogelijk in de body-sectie van jouw pagina plaatsen. Als je dan een h1, h2, div of een p (etc. etc.) het id "outline_tekst" geeft, zullen de letters in het script getransformeerd worden. Op deze pagina luidt de html-regel: <h1 id="outline_tekst">KOMPOOS.NL</h1>. In het script kan eenvoudig alles worden aangepast. Alle variabelen hebben duidelijke namen. Het script is foutloos volgens de strenge JSLint-norm, en de pagina valideert verder op alle mogelijke manieren.

javascript voor de outline tekst procedure


<script>
var border_kleur = "#000";
var letter_kleur = "#f00";
var tekst_variabele = document.getElementById("outline_tekst").innerHTML;
var voeg_hier_extra_css_items_toe = "";
var dikte_outline_border = 2;
var x = -dikte_outline_border;
var y = x;
var outline_variabelen = "";
var outline_css = '#outline_tekst{font-family:"Comic Sans MS",Arial,helvetica,sans-serif;height:1.14em;position:relative}',
outline_style_element = document.createElement("style");
outline_style_element.type = "text/css";
if (outline_style_element.styleSheet) {
    outline_style_element.styleSheet.cssText = outline_css;
} else {
    outline_style_element.appendChild(document.createTextNode(outline_css));
}
document.getElementsByTagName("head")[0].appendChild(outline_style_element);
while (y <= dikte_outline_border) {
    while (x <= dikte_outline_border) {
        outline_variabelen = outline_variabelen + "<span style='" + voeg_hier_extra_css_items_toe + " color:" + border_kleur + "; position:absolute; left:" + x + "px; top:" + ( - y) + "px;'>" + tekst_variabele + "</span><span style='" + voeg_hier_extra_css_items_toe + " color:" + border_kleur + "; position:absolute; left:" + x + "px; top:0;'>" + tekst_variabele + "</span><span style='" + voeg_hier_extra_css_items_toe + " color:" + border_kleur + "; position:absolute; left:" + x + "px; top:" + y + "px;'>" + tekst_variabele + "</span>";
        document.getElementById("outline_tekst").innerHTML = outline_variabelen;
        x = x + 1;
    }
    y = y + 1;
}
outline_variabelen = outline_variabelen + "<span style='" + voeg_hier_extra_css_items_toe + " color:" + letter_kleur + "; position:absolute; left:0px; top:0px;'>" + tekst_variabele + "</span>";
document.getElementById("outline_tekst").innerHTML = outline_variabelen;
</script>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.