Murphy's World @ home
server holyghost alias dyndns.murphys-world.de
JavaScript Tipps & Tricks
Script JsCssFntFx() - Effektschriften mittels CSS und JavaScript erzeugen
Beschreibung:
Neulich stand ich vor dem Problem ohne ImageMagick, GDlib & Co. einen hochgradig dynamischen Text für die Darstellung im Web automatisiert mit Effekten zu versehen. Funktionieren musste das Ganze auf einem Standardwebserver ohne Erweiterungen und mit den gängigen Webbrowsern (Firefox, IE, Safari, ...) ohne jegliche Plugins.
Nach ein paar Tagen mit intensiven Tests und Optimierungen ist eine kleine JavaScript Funktion entstanden, die aus einem recht kurzen Funktionsaufruf unter Zuhilfenahme von CSS clientseitig den teilweise ziemlich umfangreichen HTML-Code für die Formatierung der Schriftdarstellung erzeugt und in die jeweilige Webseite einbindet, was den Traffic und damit die Ladezeit auf einem erfreulich niedrigen Stand hält.
Die Funktion kennt insgesamt sechs verschiedene Einzeleffekte, welche untereinander nahezu beliebig kombiniert werden können. Hiermit lassen sich eine Vielzahl bekannter Effekte wie z.B. Outlines oder Farbverläufe erzeugen.
Syntax:
void JsCssFntFx ( string tx , string fx )
Übergabewerte:
| tx | = darzustellender Text |
| fx | = anzuwendende Effekte als Pipe-getrennte Liste |
Effekte:
Die folgenden Effekte können beliebig oft und in beliebiger Kombination in einer Liste eingetragen werden. Die einzelnen Effekte werden dabei durch ein Pipe-Zeichen (|) voneinander getrennt.
Effekt "blur" für Bewegungsunschärfe
Erwartet neben dem Schlüsselwort "blur" noch vier weitere, durch Komma-getrennte Parameter. Syntax: blur,{color},{steps},{size},{opacity}
|
 |
Effekt "cut" für Ausschnitte
Erwartet neben dem Schlüsselwort "cut" noch drei weitere, durch Komma-getrennte Parameter. Syntax: blur,{color},{top},{size}
|
 |
Effekt "gradient" für Farbverläufe
Erwartet neben dem Schlüsselwort "gradient" noch einen weiteren, durch Komma-getrennten Parameter. Syntax: gradient,{colorlist}
|
 |
Effekt "plain" für einfaches Overlay
Erwartet neben dem Schlüsselwort "plain" noch einen weiteren, durch Komma-getrennten Parameter. Syntax: blur,{color}
|
 |
Effekt "raster" für Streifen
Erwartet neben dem Schlüsselwort "raster" noch drei weitere, durch Komma-getrennte Parameter. Syntax: blur,{color},{steps},{size},{opacity}
|
 |
Effekt "shadow" für Schatten oder Outlines
Erwartet neben dem Schlüsselwort "shadow" noch sechs weitere, durch Komma-getrennte Parameter. Syntax: blur,{color},{expand},{padx},{pady},{opacity},{blur}
|
 |
Quelltext:
function JsCssFntFx(tx,fx) {
/*
JsCssFntFx - Font Effects via JavaScript and CSS
Copyright 2010 Patrick Assion <murphy@web.de>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
var x=new Array(
"0","0,1,1,2","0,1,1,2,2,3,3,4","0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,6",
"0,0,0,1,1,1,1,2,2,3,3,4,4,5,5,6,6,7,7,7,7,8,8,8",
"0,0,0,1,1,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,9,9,10,10,10");
var y=new Array(
"0","1,0,2,1","2,1,3,0,4,1,3,2","2,3,4,1,5,0,6,0,6,0,6,1,5,2,3,4",
"3,4,5,1,2,6,7,1,7,0,8,0,8,0,8,1,7,1,2,6,7,3,4,5",
"4,5,6,2,3,7,8,1,9,1,9,0,10,0,10,0,10,1,9,1,9,2,3,7,8,4,5,6");
var z="<div style=\"position:relative;top:0px;left:0px;height:1.3em;width:100%;"+
"white-space:nowrap;\">";
fx=fx.split("|");
for(var f in fx) {
var p=fx[f].split(",");
switch(p[0]) {
case "gradient":
p[1]=p[1].replace(/-+/g,"+++++++++++++++");var c=p[1].split("+");var l=-1;
for(i in c)if(c[i]!="") {
if(l!=i-1) {
var r1=parseInt(c[l].substr(0,2),16);
var g1=parseInt(c[l].substr(2,2),16);
var b1=parseInt(c[l].substr(4,2),16);
var r2=parseInt(c[i].substr(0,2),16)-r1;
var g2=parseInt(c[i].substr(2,2),16)-g1;
var b2=parseInt(c[i].substr(4,2),16)-b1;
for(j=l+1;j<i;j++) {
r=(r1+parseInt(r2*(j-l)/(i-l))).toString(16);
g=(g1+parseInt(g2*(j-l)/(i-l))).toString(16);
b=(b1+parseInt(b2*(j-l)/(i-l))).toString(16);
c[j]=(r.length<2?"0":"")+r+(g.length<2?"0":"")+g+(b.length<2?"0":"")+b;
}
}
l=1*i;
}
z+="<div style=\"position:absolute;width:100%;height:0.35em;top:0em;"+
"left:0px;overflow:hidden;\"><div style=\"position:absolute;width:100%;"+
"top:0em;left:0px;color:#"+c[0]+";\">"+tx+"</div></div>";
for(i=1;i<15;i++)
z+="<div style=\"position:absolute;width:100%;height:0.06em;top:"+
(Math.round((i*0.05+0.3)*100)/100)+"em;left:0px;overflow:hidden;\">"+
"<div style=\"position:absolute;width:100%;top:-"+
(Math.round((i*0.05+0.3)*100)/100)+"em;left:0px;color:#"+c[i]+";\">"+
tx+"</div></div>";
z+="<div style=\"position:absolute;width:100%;height:0.35em;top:1.05em;"+
"left:0px;overflow:hidden;\"><div style=\"position:absolute;width:100%;"+
"top:-1.05em;left:0px;color:#"+c[15]+";\">"+tx+"</div></div>";
break;
case "shadow":
xx=x[p[2]].split(",");
yy=y[p[2]].split(",");
z+="<div style=\"position:absolute;width:100%;top:"+p[4]+"px;left:"+p[3]+
"px;color:#"+p[1]+";\"><div style=\"width:100%;-moz-opacity:"+p[5]+
";opacity:"+p[5]+";filter:alpha(opacity="+parseInt(p[5]*100)+");\">";
for(var i=0;i<xx.length;i++) {
z+=(p[2]==0?tx:"<div style=\"position:absolute;width:100%;top:"+(yy[i]-p[2])+
"px;left:"+(xx[i]-p[2])+"px;\">"+(p[6]==1?tx:"<div style=\"width:100%;"+
"-moz-opacity:"+p[6]+";opacity:"+p[6]+";filter:alpha(opacity="+
parseInt(p[6]*100)+");\">"+tx+"</div>")+"</div>");
}
z+="</div></div>";
break;
case "blur":
for(var i=0;i<p[2];i++)
z+="<div style=\"position:absolute;width:100%;top:0px;left:"+
(i*p[3]-Math.floor((p[2]-1)*p[3]/2))+"px;color:#"+p[1]+
"\"><div style=\"width:100%;-moz-opacity:"+p[4]+";opacity:"+p[4]+
";filter:alpha(opacity="+parseInt(p[4]*100)+");\">"+tx+"</div></div>";
break;
case "raster":
for(var i=0;i<p[2];i+=p[3]*2)
z+="<div style=\"position:absolute;width:100%;height:"+p[3]+"px;top:"+i+
"px;left:0px;color:#"+p[1]+";overflow:hidden;\"><div style=\"position:absolute;"+
"width:100%;top:-"+i+"px;left:0px;\">"+tx+"</div></div>";
break;
case "cut":
z+="<div style=\"position:absolute;width:100%;height:"+p[3]+"px;top:"+p[2]+
"px;left:0px;color:#"+p[1]+";overflow:hidden;\"><div style=\"position:absolute;"+
"width:100%;top:-"+p[2]+"px;left:0px;\">"+tx+"</div></div>";
break;
case "plain":
z+="<div style=\"position:absolute;width:100%;top:0px;left:0px;color:#"+p[1]+
"\">"+tx+"</div>";
break;
default:
z+=tx;
}
}
document.write(z+"</div>");
}
Besonderheiten:
Anmerkungen zu Effekt "gradient"
FF = alles ok
IE = fehlerhafte Berechnung und Darstellung der DIV-Höhe bei Maßeinheit em, daher Überlappung der DIVs notwendig "height:0.06em;" statt "height:0.05em;"
Anmerkungen zu Effekt "shadow"
FF = alles ok
IE = keine Transparenz bei "opacity" wenn "size" größer 0
Schattenmatrix von Effekt "shadow" (0 bis 5 Pixel)
[0] [1] [2] [3] [4] [5]
0 0 1 2 0 1 2 3 4 0 1 2 3 4 5 6 0 1 2 3 4 5 6 7 8 0 1 2 3 4 5 6 7 8 9 0
0 # 0 # 0 # 0 # # # 0 # # # 0 # # #
1 # o # 1 # # 1 # # 1 # # # # 1 # # # #
2 # 2 # o # 2 # # 2 # # 2 # #
3 # # 3 # o # 3 # # 3 # #
4 # 4 # # 4 # o # 4 # #
5 # # 5 # # 5 # o #
6 # # # 6 # # 6 # #
7 # # # # 7 # #
8 # # # 8 # #
9 # # # #
0 # # #
Beispiele:
Die im Screenshot oben auf der Seite dargestellten Schrifteffekte wurden folgendermaßen realisiert:
<div style="font-family:verdana,vemana2000;font-size:40px;font-weight:bold;">
<script type="text/javascript">
// Farbverlauf mit Outline (shadow + gradient)
JsCssFntFx (
"Murphy",
"shadow,000000,5,0,0,1,0.2|shadow,ffff00,2,0,0,1,1|gradient,004400-009900" );
// Farbverlauf mit Outline (shadow + gradient)
JsCssFntFx (
"Murphy",
"shadow,0000ff,3,0,0,1,1|shadow,00ffff,2,0,0,1,1|shadow,0000ff,1,0,0,1,1|" +
"gradient,00ffff-0000ff" );
// Farbverlauf mit Outline (shadow + gradient)
JsCssFntFx (
"Murphy",
"shadow,000000,3,0,0,1,0.6|gradient,ffff00-ff0000" );
// Deutschland (shadow + cut)
JsCssFntFx (
"Murphy",
"shadow,333333,1,0,0,1,1|cut,000000,0,22|cut,ff0000,22,12|cut,ffcc00,34,22" );
// Oesterreich (shadow + cut)
JsCssFntFx (
"Murphy",
"shadow,333333,1,0,0,1,1|cut,ff0000,0,22|cut,ffffff,22,12|cut,ff0000,34,22" );
// USA (shadow + plain + cut)
JsCssFntFx (
"Murphy",
"shadow,333333,1,0,0,1,1|plain,ffffff|cut,0000cc,0,26|cut,cc0000,28,3|" +
"cut,cc0000,33,3|cut,cc0000,38,3|cut,cc0000,43,3|cut,cc0000,48,3" );
// 3D Amboss (shadow + plain)
JsCssFntFx (
"Murphy",
"shadow,ffffff,0,-1,-1,1,1|shadow,444444,0,1,1,1,1|plain,cccccc" );
// 3D Praegung (shadow + plain)
JsCssFntFx (
"Murphy",
"shadow,eeeeee,0,1,1,1,1|shadow,444444,0,-1,-1,1,1|plain,aaaaaa" );
// 3D mit Schatten (shadow + plain)
JsCssFntFx (
"Murphy",
"shadow,ffffff,2,0,0,1,0.1|shadow,000000,2,2,2,1,0.08|shadow,ffffff,0,-1,-1,1,1|" +
"shadow,444444,0,1,1,1,1|plain,cccccc" );
// Schlagschatten hart (shadow + plain)
JsCssFntFx (
"Murphy","shadow,000000,0,5,3,0.4,1|plain,000000" );
// Schlagschatten weich (shadow + plain)
JsCssFntFx (
"Murphy","shadow,333333,4,0,8,1,0.05|plain,000000" );
// Verschmierter Text (blur + plain)
JsCssFntFx (
"Murphy","blur,333333,23,1,0.05|plain,000000" );
// Regenbogen (gradient)
JsCssFntFx (
"Murphy",
"gradient,ff0000+++ffff00+++00cc00+++00ffff+++3333ff+++ff00ff" );
// Horizont (gradient)
JsCssFntFx (
"Murphy",
"gradient,99ccff+++++++ffffff+996600+++++++ffcc66" );
// Knick (gradient)
JsCssFntFx (
"Murphy",
"gradient,33ffff+++++++006666+33ffff+++++++006666" );
// Metallglanz (gradient)
JsCssFntFx (
"Murphy",
"gradient,9999aa++++ccccdd++ffffff++ccccbb+++++++555544" );
// Monitor (blur + raster)
JsCssFntFx (
"Murphy",
"blur,33cc00,6,1,0.25|raster,66ff00,54,1" );
// Streifen (plain + raster)
JsCssFntFx (
"Murphy",
"plain,884400|raster,aa6600,54,3" );
// Korona (shadow + plain)
JsCssFntFx (
"Murphy",
"shadow,999999,4,0,0,1,0.15|plain,000000" );
// Gluehen (shadow + plain)
JsCssFntFx (
"Murphy",
"shadow,ff0000,5,0,0,1,0.1|shadow,ff9900,3,0,0,1,0.2|shadow,ffff99,1,0,0,1,0.3|" +
"plain,ffffcc" );
// Unschaerfe (shadow)
JsCssFntFx (
"Murphy",
"shadow,ffaaff,4,0,0,1,0.05|shadow,ffaaff,2,0,0,1,0.2" );
</script>
</div>
Lizenzbestimmungen:
Das auf dieser Seite notierte Script JsCssFntFx() und seine Dokumentation unterliegen den Lizenzbedingungen der GNU General Public License der Free Software Foundation, Inc.
Zurück zur JavaScript Funktionsübersicht
© 2026 Murphy's World Alle Rechte vorbehalten Impressum