Text-Effekte im Internet Explorer

Microsoft kocht wie immer ein eigenes Süppchen. Schon seit längerer Zeit beherrscht der Internet-Explorer sogenannte Filter.

Alpha

Für den Alpha-Filter habe ich keine allgemeine Entsprechung (für andere Browser) gefunden. Trotzdem soll er hier kurz vorgestellet werden. Mit dem Alpha-Filter verschmelzen Vorder- und Hintergrundfarbe. Dabei lassen sich mit dem style=0,1,2,3 verschiedene Verlaufsformen definieren und mit opacity=x und finishopacity=x der Grad der Verschmelzung

Beispiel Filter Alpha 1 - mit style=1 wird ein linearer Verlauf erzeugt. Dabei können Anfangs- und Endpunkte frei defniiert werden.

.alpha1 { 

				filter:alpha(opacity=100, finishopacity=50, style=1); 

				}

Beispiel Filter Alpha 2 - mit style=2 wird ein radialer Verlauf erzeugt, der sich ohne Angabe von Start- und Endpunkten von der Mitte nach außen erstreckt.

.alpha2 { 

				filter:alpha(opacity=100, finishopacity=50, style=2); 

				}

Beispiel Filter Alpha 3 - mit style=3 wird ein rechteckiger Verlauf erzeugt, der sich wie bei style=2 ohne Angabe von Start- und Endpunkten von der Mitte nach außen erstreckt.

.alpha3 { 

				filter:alpha(opacity=100, finishopacity=50, style=3); 

				}

Beispiel Filter Alpha 4 - mit style=0 soll eine Farbaddition erfolgen. Hier konnte ich jedoch gar keinen Effekt feststellen.

.alpha4 { 

				filter:alpha(style=0); 

				}

Dropshadow

Ein Filter, mit dem sich Schrifteffekte anderer Browser gut simulieren lassen ist Dropshadow. Mit Dropshadow kann sowohl die Schattenfarbe wie auch die Weite des Schattenwurfes festgelegt werden.

Beispiel Filter Dropshadow 1

.dropshadow1{

				filter:dropshadow(color:#c0c0c0, offx=2, offy=2); 

				}

Mit negativen Werten für die Entfernung des Schattenwurfes wird außerdem dessen Richung bestimmt.

Beispiel Filter Dropshadow 2

.dropshadow2{

				filter:dropshadow(color:#ff0000, offx=-2, offy=-2); 

				}

Shadow

Mit Shadow kann man zwar auch einen Farbwert festlegen, nicht jedoch die Weite des Schattenwurfes. Die Richtung des Schattenwurfes lässt sich durch Gradangaben (acht unterschiedliche Werte in 45-Grad-Schritten) festlegen. Man sieht recht gut den Unterschied der Effektwirkung im Vergleich zu Dropshadow (Beispiel Filter Dropshadow 2).

Beispiel Filter Shadow

.shadow{

				filter:shadow(color:#ff0000, direction=315); 

				}

Glow

Ein weiterer Effekt wird mit dem Filter Glow erzeugt. Der Filter Glow lässt Parameter für die Farbe und für die Stärke des Effekte zu. Dabei sind Werte von 1 bis 255 möglich, allerdings sind sehr hohe Werte für eine gut lesbare darstellung nicht sinnvoll.

Besipiel Filter Glow 1

.glow1{

				filter:glow(color: #ff0000, strength: 2); 

				}

Beispiel Filter Glow 2

.glow1{

				filter:glow(color: #ff0000, strength: 4); 

				}

Dropshadow und Glow

Diese (und auch weitere, hier nicht aufgeführte) Filter sind auch miteinander kombinierbar. Achtung: Bei der Kombination unterschiedlicher Filter darf das Schlüsselwort filter: nur ein Mal erscheinen.

Beispiel Filter Shadow & Glow

.shadowglow{

				filter:shadow(color:#ff0000, direction=315) 

				glow(color: #ff0000, strength: 4);

				}

Beispiel Filter Dropshadow & Glow

.dropshadowglow{

				filter:glow(color: #ff0000, strength: 4) 

				dropshadow(color:#ff0000, offx=-2, offy=-2); 

				}

Navigation