CSS/Eigenschaften/Textformatierung/text-shadow

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | Textformatierung(Weitergeleitet von Text-shadow)
Wechseln zu: Navigation, Suche

Die Eigenschaft text-shadow ermöglicht die Schattierung von Texten, vergleichbar mit box-shadow bei rechteckigen Elementen. Dabei sind auch komplexere Texteffekte möglich.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Syntax

text-shadow: offset-x | offset-y | blur-radius | [color]

  • offset-x offset-y: horizontaler und vertikaler Versatz des Schattens vom Element. Erlaubt ist eine Längen- jedoch keine Prozentangabe.
  • blur-radius: (optional) Radius der Unschärfe für einen Weichzeicheneffekt, 0 entspricht einer scharfen Darstellung. Erlaubt ist eine nicht negative Längenangabe.
  • color: (optionale) Farbangabe, kann an erster oder letzter Stelle festgelegt werden.
    Standardwert ist currentColor, der Wert der Textfarbe.
  • none: kein Textschatten
Beachten Sie: Die Angaben für den Textschatten eines Elements werden ohne Ihr Zutun an die Kindelemente vererbt.

Sie können für ein Element mehrere Schatten definieren. Die Schatten werden dabei in umgekehrter Reihenfolge der Definition „gestapelt“, das heißt, der zuerst festgelegte überdeckt die anderen.

Funktionsweise[Bearbeiten]

Beispiel ansehen …
      
.eins {
  text-shadow: 5px 5px 5px; 
}
.zwei {
  text-shadow: 5px 5px 10px; 
}
.drei {
  text-shadow: 10px 20px 0px red; 
}
.vier {
  text-shadow: -5px -5px 10px yellow; 
}
.fuenf {
  text-shadow: 2px 2px 2px white, 
               5px 5px 10px black;
}

p span {
  text-shadow: none;
}
Die Textabsätze erhalten Klassen, die als CSS-Selektoren für verschiedene Schattierungen dienen.
  • Beispiel 1 und 2 verzichten auf eine Farbangabe. Die Schattierung wird in der Schriftfarbe ausgeführt. Sie hat einen Versatz von jeweils 5px und einen blur-Radius von 5, bzw. 10px.
  • Beispiel 3 hat keinen blur-Radius, sodass der rote Schatten den Text repliziert.
  • Beispiel 4 verwendet negative Werte für den Versatz, sodass der gelbe Schatten nach links und oben geworfen wird.
  • Beispiel 5 verwendet zwei Schatten. Der weiße Schatten akzentuiert die Zeichen und liegt über dem schwarzen Schatten.
    
    <p class="eins">Dieser Absatz soll die <span>Vererbung</span> demonstrieren.</p>
Der unterste Absatz enthält ein span-Element. Hier wurde der normalerweise vom Elternelement vererbte Schatten durch text-shadow: none; ausgeschaltet.
ansehen …


Empfehlung: Verwenden Sie Textschatten gezielt und sparsam. Die meisten Menschen haben ein intuitives Gefühl für Lichtverhältnisse. Im Allgemeinen kommt Licht beim Lesen von einer Leselampe von links oben auf den Text und der Schatten fällt dann nach rechts unten.
Stellen Sie sicher, dass ihre Schatten immer von einer (gedachten) Lichtquelle kommen. Schatten, die in mehrere Richtungen gehen, wirken unruhig und nicht stimmig.


Anwendungsbeispiele[Bearbeiten]

Texteffekt: 3D-Look[Bearbeiten]

Mit der CSS-Eigenschaft text-shadow kann man erstaunliche Text-Effekte erzeugen. Durch eine Kombination mehrerer Schatten entsteht so ein dreidimensionaler Eindruck.

Beispiel ansehen …
p {
  font: bold 5em Helvetica, Arial, Sans-Serif;
  padding: .2em;
  margin: 0;	
}
 
#eins {
  color: yellow;
  text-shadow: 
    1px 1px blue, 
    2px 2px blue, 
    3px 3px blue;
  transition: all .12s ease-out;
}
#eins:hover {
  position: relative; top: -3px; left: -3px; 
  text-shadow: 
    1px 1px blue, 
    2px 2px blue, 
    3px 3px blue, 
    4px 4px blue, 
    5px 5px blue, 
    6px 6px blue;
}
 
#zwei {
  text-shadow: 
    1px -1px 0 hsla(0, 0%, 50%, 1),
    2px -2px 0 hsla(0, 0%, 55%, 1),
    3px -3px 0 hsla(0, 0%, 60%, 1),
    4px -4px 0 hsla(0, 0%, 65%, 1),
    5px -5px 0 hsla(0, 0%, 70%, 1),
    6px -6px 0 hsla(0, 0%, 75%, 1),
    7px -7px 0 hsla(0, 0%, 80%, 1),
    8px -8px 0 hsla(0, 0%, 85%, 1),
    9px -9px 0 hsla(0, 0%, 90%, 1);
}
ansehen …

Im ersten Beispiel wird der Textschatten bei :hover um 3px vergrößert und der Text entsprechend nach links oben verschoben. Der Schatten ist einfarbig.

Einen realistischeren 3D-Effekt können Sie erreichen, wenn Sie die Farbangaben in den verschiedenen Lagen des Textschattens allmählich verdunkeln. Dies wird durch die Verwendung der hsla-Farbwerte deutlich.

Texteffekt: Umriss[Bearbeiten]

Eigentlich gibt es für einen Text, bei dem nur der Umriss zu sehen sein soll, die CSS3-Eigenschaft text-outline, die jedoch noch nicht unterstützt wird, sowie die proprietäre Eigenschaft -webkit-text-stroke, die jedoch nur von den Webkit-Browsern interpretiert wird.

Man kann diesen Schritt aber auch mit text-shadow erreichen:

Beispiel ansehen …
#zwei {
  text-shadow:  
     1px  1px 1px black,
     1px -1px 1px black,
    -1px  1px 1px black,
    -1px -1px 1px black;
}
#drei {
  font-family: Chewy;
  color: yellow ;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-shadow: 
     1px  1px 1px black,
     1px -1px 1px black,
    -1px  1px 1px black,
    -1px -1px 1px black;
}
ansehen …

Im zweiten Beispiel werden vier Schatten jeweils links oben, rechts oben, rechts unten und links unten platziert, sodass die Schrift einen gleichmäßigen Umriss- oder outline-Look erhält.

Im dritten Beispiel wird ein Google Font eingebunden, der mit letter-spacing und text-transform: uppercase gestaltet wird.

Texteffekt: Neon[Bearbeiten]

Mit text-shadow kann man auch eindrucksvolle Neon-Effekte erzielen:

Beispiel ansehen …
#zwei {
  text-shadow:  
     1px  1px 1px black,
     1px -1px 1px black,
    -1px  1px 1px black,
    -1px -1px 1px black;
}
#drei {
  font-family: Chewy;
  color: yellow ;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow:  
     1px  1px 1px black,
     1px -1px 1px black,
    -1px  1px 1px black,
    -1px -1px 1px black;
}
ansehen …

Benutzen Sie text-shadow um das Leuchten langsam aufzubauen:

  • Der erste Schatten sollte die Textfarbe haben.
  • Die folgenden Schatten können in einer gewählten Farbe sein, ohne horizontalen bzw. vertikalen Abstand des Schattens vom Element. Der Weichzeicheneffekt (blur) sollte stetig vergrößert werden (je mehr Schatten Sie verwenden, desto stärker das Leuchten)

Die dritte Neon-Reklame funktioniert nicht richtig - animation sorgt für ein Flackern.

RGBA[Bearbeiten]

Beispiel ansehen …
h2              { text-align: center; margin-top: 50px; letter-spacing: 1em; color: white; font-size: 72px; }
h2 .rot         { text-shadow: -15px -25px 10px red, 0 -40px 10px green, 15px -25px 10px blue; }
h2 .grün        { text-shadow: 0 -40px 10px green, -15px -25px 10px red, 15px -25px 10px blue; }
h2 .blau        { text-shadow: 15px -25px 10px blue, -15px -25px 10px red, 0 -40px 10px green; }
p               { line-height: 1.5em; }
p span          { font-weight: bold; }
p .rot          { color: red; text-shadow: -2px -2px 2px red; }
p .grün         { color: green; text-shadow: 0 -2px 2px green; }
p .blau         { color: blue; text-shadow: 2px -2px 2px blue; }

    
<!-- #1# -->
<h2><span class="rot">r</span><span class="grün">g</span><span class="blau">b</span></h2>

<!-- #2# -->
<p>rgb ist die Abkürzung für einen Farbraum, der die Farben durch das Mischen der drei Grundfarben 
   <span class="rot">rot</span>, <span class="grün">grün</span> und <span class="blau">blau</span> bildet.</p>
ansehen …

Anti-Aliasing mit text-shadow[Bearbeiten]

Des Weiteren können Sie text-shadow dazu benutzen, eine helle Schrift auf dunklem Untergrund zu schärfen.

Beispiel ansehen …
h2 {
 color: #fff;
 background-color: #999;
 padding: 10px;
 font-weight: bold;
}
h2.mit {
 text-shadow: 0 0 1px rgba(0,0,0,0.5);
}
h2.schwarzweiss {
 color: #000;
 background-color: #fff;
 text-shadow: 0 0 1px rgba(0,0,0,0.5);
}
In diesem Beispiel erzielt man eine Art Antialiasing-Effekt (Kantenglättung), die den hellen Text auf dem dunklen Untergrund schärfer erscheinen lässt. Umgekehrt, bei dunklem Text auf hellem Hintergrund, sieht man dann die eigentliche "Kantenglättung" des Textes.
ansehen …

Siehe auch[Bearbeiten]


Weblinks[Bearbeiten]

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Eigenschaften/Textformatierung/text-shadow&oldid=59192“