• 
• 

Text mit Schatten über CSS

Seit einige Jahren bereits ist CSS (Cascading Style Sheets) eine sehr mächtige Technologie um die Dinge im Internet zu gestallten. Mit jeder neuen Version von CSS wird die Sprache mächtiger und kann mehr Dinge Formatieren.

Heute wollen wir Ihnen zeigen, wie man das Attribut text-shadow einsetzen kann. Beim Schattenwurf generell ist der Abstand des Schattens vom ursprünglichen Text, die Schattenfarbe sowie die Schärfe wichtig (also wie verschwommen oder scharf soll der Schatten auf dem Hintergrund angezeigt werden).

Das CSS-Statement hat dann in etwa folgende Struktur: text-shadow: horizontalerAbstand vertikalerAbstand Schärfe Farbe, horizontalerAbstand2 vertikalerAbstand2 Schärfe Farbe

Dabei fällt auf, dass auch mehr als ein Schatten pro Text angezeigt werden kann. Die einzelnen Werte können auch weggelassen werden. Mit dem text-shadow-Attribut können sie einerseits bewirken, dass beispielsweise weisser Text auf weissem Untergrund gelesen werden kann, der Text eine 3D-Struktur kriegt oder einfach ganz normal einen Schatten hat.

Auf Safari, Firefox und Chrome Broser zeigt es die Schattierungen an. Unter Internet Explorer 9 werden die Schatten nicht angezeigt. Ein sehr gutes Tutorial zur konkreten Verwendung finden Sie bei wss-expert.de. Viel Spass beim Umsetzen auf Ihrer Homepage.

Zuletzt aktualisiert am Dienstag, 31. Mai 2011 06:58