Text-shadow in CSS

Dieser Artikel ist mehr ein Tipp als eine Anleitung. Durch das CSS Attribut “text-shadow” kann man einen sehr schönen Effekt erstellen und zwar mit sehr wenig Aufwand.

Durch diese Eigenschaft sieht der Text so aus, als wäre er in den Hintergrund eingestampft. Dazu benötigt man jedoch eine passende Hintergrundfarbe und die passende Textfarbe. Gut passen würde eine schwarze Schrift auf grauen Hintergrund. Dann muss man dem schwarzen Text nur noch einen weißen Schatten in der CSS-Datei geben, wie in diesem Beispielcode:

h1 {
color:#111;
text-shadow: 0 1px 0 #fff;
}

Die erste “0″ bezieht sich auf die Größe des Schattens, der nach oben geht, und die “1px” besagt, dass der Schatten nach unten 1px groß ist. Man könnte diese Zahlen tauschen, dann wäre der weiße Schatten über dem Text und nicht wie im Beispiel unter dem Text.
Die zweite “0″ bezieht sich auf die Schärfe des Schattens.  “0″ ist scharf und desto höher die Zahl wird (in px), desto verwischter und unschärfer wird der Schatten.

Dieser Effekt, der so den Text so aussehen lässt, als wäre er in den Hintergrund eingraviert, ensteht jedoch nur, wenn die Schärfe des “text-shadow” Null ist.

Ich finde durch dieses Attribut werden langweilige Überschriften und Texte sehr ansehnlich und man muss keinen langen und komplexen Code schreiben um den Effekt zu erzeugen.

Share on Twitter
This entry was posted in CSS, HTML and tagged , . Bookmark the permalink.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*


vier + 9 =

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">