Tutorials > HTML > Tutorial-Detail: Texte mit Schatten versehen

Texte mit Schatten versehen

Texte haben einen eigenen Schatten. Nur mit Grafiken zu erledigen?
Falsch! Wie man es mit CSS lösen kann, steht hier.

Um einzelne Texte mit einem Schatteneffekt zu belegen, musste man immer Grafiken erstellen. Abgesehen davon, dass die Grafiken viel Speicherplatz wegnehmen, ist es auch recht aufwändig.
Mit CSS und dem Internet Explorer kann man aber diesen Efekt auch ohne Grafiken machen.

Um es erstmal kurz zu machen, so sähe so ein Befehl aus:

Code:

yubb.de

 ist ein HTML-Element, das nichts macht. Es macht keinen Text fett, unterstreicht ihn nicht und ist somit für CSS-Tags geradezu ideal. Alle Code-Hervorhebungen auf dieser Seite sind auch mit  realisiert.
Mit dem Attribut style beginnt nun die CSS-Formatierung für das Element und alles, was von ihm umgeben wird (Hier yubb.de).
Zuerst hätten wir den Schatteneffekt

Code:

filter:DropShadow(color=#C0C0C0, offx=5, offy=5)

. Zuerst setzen wir die Schattenfarbe (color) und dann die Versetzung des Schattens fest. In diesem Beispiel ist der Schatten um 5 Pixel nach rechts verschoben (offx=5) und 5 Pixel nach unten verschoben (offx=5).
Aber der Schatteneffekt wirkt alleine noch nicht, man muss noch die Textfgröße (font-size:15px, also 15 Pixel groß) und Textfarbe (color:#000088, also die Farbe #000088 (ist ein dunkles Blau)) festlegen.
Der letzte Anhang (width:100%) sagt dem Schatten, dass er sich auch wirklich über den ganzen Text erstreckt und nicht unrealistisch an den Rand gequetscht ist.

Aber was haben wir nun hier fabriziert? So etwas wie in diesem Beispiel

Hier in diesem Test-Schatten-Effekt ist noch das Attribut height:24px; IM style-Attribut drin, da sonst der Schatten nicht vollständig angezeigt wurde. Das solltet ihr ggf. noch mit beachten.
Aber leider funktioniert dieser Effekt nur im Internet Explorer, obwohl es ein äusserst netter Effekt ist.

Geschrieben von Phil Marx am 18.06.2004 (6121x gelesen)

weiterempfehlen

Druckversion

kommentieren