yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Texte mit Schatten versehen



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:
<span style="filter:DropShadow(color=#C0C0C0, offx=5, offy=5); font-size:15px; color:#000088; width:100%;">yubb.de</span>


<span> 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 <span> realisiert.
Mit dem Attribut style beginnt nun die CSS-Formatierung für das Element <span> 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 (7735x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren