Begriffe Grundgerüst Wichtige HTML-Tags CSS Arbeitsaufträge

Box-Shadow

Einem block-Element kann ein Schatten hinzugefügt werden. Die gebräuchliste Angabe dieser Formatierung siehst du unten. h-offset definiert, wie weit der Schatten in horizontaler Richtung verschoben ist, v-offset in vertikaler Richtung. Mit der Angabe von blur wird der Grad der Verwischung festgelegt. Diese drei Angaben werden in Pixel angegeben. Schlussendlich folgt noch die Farbe (color) des Schattens.

div {
  box-shadow: h-offset v-offset blur color
}

<p style="background-color: blue; box-shadow: 10px 10px 15px darkblue">Viel Text...</p>

Es gibt noch mehr Möglichkeiten, den Schatten zu gestalten. Unter www.3schools.com findest du eine komplette Referenz.