Textschatten? Wie geht das?

[Kadir]

Hallo,
ich habe mit einem neuen Projekt angefangen. Ich bin auch schon sehr weit gekommen. Nur habe ich gehört, dass man ab jetzt mit CSS 3 auch einen Schatten zu dem Text hinzufügen kann.
Wisst ihr vielleicht wie das geht?

Danke im voraus.

[wolfgang]

Ist eigentlich gar nicht schwer:

Code:

.deineklasse {
text-shadow: 4px 4px 5px #999;
}

Die Parameter sind: Verschiebung in X-Richtung, Verschiebung in Y-Richtung, Blur (Weichheit), Farbe.

Idealerweise gibt man die Farbe aber als RGBa-Wert an, dann hat man einen echten Transparenten Schatten, also z.B.

Code:

.deineklasse {
text-shadow: 4px 4px 5px rgba(0,0,0,0.5);
}

Einen schönen Artikel mit ein paar Beispielen findest du z.B. im Blog von Sven Wolfermann.

[Kadir]

Danke, das probiere ich dann jetz mal aus

Grüße, Kadir

[Lemi]

einziger Haken daran, dass es im IE 6/7/8 nicht läuft. Leider erst ab Version 9 verfügbar..

[Kadir]

Danke für den Tipp.

Aber jetzt mal ehrlich: Ich kenne wirklich keine Person - außer meinen Vater -, der den Internet Explorer benutzt

[Lemi]

Kennst du so wenig Leute?
Der IE wird leider sehr oft benutzt.

Ich muss mich selber noch korrigieren. Gemäss Microsoft selber wird text-shadow auch ab Version 9 nicht unterstützt

IE CSS Kompatilitätstabelle
http://msdn.microsoft.com/en-us/library/...85%29.aspx

[Kadir]

Doch ich kenne jede Menge Leute. Nur haben diese entweder keine Ahnung von Browsern und Webdesign oder sie sind überhaupt nicht im Internet. Und die meisten meiner Freunde und Bekannten benutzen alle den Firefox.

Danke für den Tipp. Naja egal, dann müssen die Leute, die den IE benutzen halt ohne Schatten auskommen

[wolfgang]

Ja, der IE zickt da mal wieder rum.

Deshalb sollte man die CSS3-Geschichten eigentlich nur als "Bonus" verwenden, d.h. das Layout sollte auch ohne die Schatten und runden Ecken funktionieren. Die IE-User bekommen halt eine abgespeckte, aber trotzdem noch funktionierende Variante.

[Kadir]

Irgendwie mache ich das schon.

[wolfgang]

Noch ein sehr guter Artikel über Schatten bei den Webkrauts: http://www.webkrauts.de/2010/12/24/schat...-mit-css3/