CSS-Schatten für Texte
»Flat design vector concept« von Shutterstock

CSS Code Snippets

CSS-Schatten für Texte

Diese Anleitung erklärt das CSS-Element text-shadow vor und zeigt nützliche und außergewöhnliche Beispiele.

Aufbau von text-shadow

div { text-shadow: 3px 3px 4px #777 }
      ^            ^   ^   ^   ^  
      |            |   |   |   |  
      |            |   |   |   |
      |            |   |   |   +- Schattenfarbe
      |            |   |   |
      |            |   |   +- Verlaufs-Radius des Schattens
      |            |   |
      |            |   +- Vertikaler Versatz
      |            |
      |            +- Horizontaler Versatz
      | 
      +- CSS3-Eigenschaft text-shadow 

Beispiele

Black Shadow

.shadow-black-2   {text-shadow: 0 2px 3px rgba(0,0,0,.4); }

Black Shadow

.shadow-black   {text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }

White Shadow

.shadow-white   {text-shadow: rgba(255, 255, 255, 0.498039) 0px 1px 2px;}
.shadow-no    {text-shadow: rgba(0, 0, 0, 0) 0 0 0;}
.shadow-3 {
   text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}