«
»

CSS 3: text-shadow – Schatten für Text

Hier auch noch mal eine Notiz (für mich selber) wie das mit CSS 3 und dem Text-Schatten funktioniert.

text-shadow: 2px 2p 2px #000;

Dabei stehen die Werte für folgende Eigenschaften:

  1. die X-Verschiebung
  2. die Y-Verschiebung
  3. Stärke des Weichzeichnungs-Effekts (Blur)
  4. Farbe des Schattens

Und hier noch 2 ganz schicke Beispiele (geklaut von kremalicious.com)

Beispiel 1:

color: #000;
background: #666;
text-shadow: 0px 1px 1px #fff;

Ich sehe ein wenig aus, wie eingravierter Text.

Beispiel 2:

color: #666;
background: #000;
text-shadow: 0px 1px 0px #ccc;

Ich bin grauer Text mit weißem Schatten auf fast schwarzem Hintergrund.

Schlagworte: ,

Dieser Beitrag wurde vor am Montag, 22. März 2010 um 22:01 Uhr veröffentlicht und unter CSS 3, digital, webdesign gespeichert. Sie können Kommentare zu diesem Eintrag über den RSS-2.0-Feed verfolgen. Sie können einen Kommentar hinterlassen oder einen Trackback von Ihrer Website hierher setzen.

Kommentieren