CSS
Kleine CSS-Rezepte

CSS – insbesondere CSS3 – bietet zahlreiche Möglichkeiten HTML-Inhalte zu gestalten. In unserer CSS-Sammlung finden Sie CSS-Beispiele für die tägliche Anwendungen. Viele benutzen wir auch für unser Phlow Magazin.

CSS-Schatten für Texte

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

Der 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);
}

Initiale(n) mit CSS

Eine Initiale (auch Initial) ist ein schmückender Anfangsbuchstabe, der am Anfang eines Textes hervorgehoben wird. Mit Pseudoelementen in CSS lässt sich das leicht bewerkstelligen. Eine Auswahl verschiedenster CSS-Initialen.

See the Pen Initiale mit Pseudo-Elementen by Phlow (@phlow) on CodePen.

See the Pen Initiale mit Pseudo-Elementen und Textschatten by Phlow (@phlow) on CodePen.

<hr> – Horizontale Linien und Trenner

border: 0;
height: 1px;
background: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.5), transparent);
background: linear-gradient(left, transparent, rgba(0, 0, 0, 0.5), transparent);
margin: 35px 0 33px 0;