CSS Box-Shadow / CSS3 schnell erklärt

Schlagschatten für alle Objekte

Beitrag am erstellt von

Der CSS box-shadow erzeugt ein oder mehrere Schlagschatten, für ein willkürlichen Container. Dies bedeutet, dass jeden HTML Objekt angesprochen werden kann. Wenn gleichzeitig ein border-radius festgelegt wurde, wird die Abrundung mit betrachtet, so das der Schatten ebenfalls abgerundet wird. Für die Faulen gibt es diverse Generatoren im Internet, wie auf cssmatic.com. Dort muss man lediglich paar Regler verschieben um den gewünschten box-shadow zu bekommen.

box-shadow:[Horizontale Position] [Vertikale Position] [Blur Radius] [Größe] [Farbe];

Normaler Schatten nach außen

#aussen {
  -moz-box-shadow:1px 1px 6px #292929; /* Firefox */
  -webkit-box-shadow:1px 1px 6px #292929; /* Chrome, Safari */
  -khtml-box-shadow:1px 1px 6px #292929; /* Konqueror */
  box-shadow:1px 1px 6px #292929; /* CSS3 */
}  
    

Schatten nach innen

#innen {
  -moz-box-shadow:1px 1px 6px #292929 inset; /* Firefox */
  -webkit-box-shadow:1px 1px 6px #292929 inset; /* Chrome, Safari */
  -khtml-box-shadow:1px 1px 6px #292929 inset; /* Konqueror */
  box-shadow:1px 1px 6px #292929 inset; /* CSS3 */
}  
    

2 Farben Schatten

#farben {
  -moz-box-shadow: 1px 1px 3px #E2007A,
  -1px -1px 3px #000; /* Firefox */
  -webkit-box-shadow: 1px 1px 3px #E2007A,
  -1px -1px 3px #000; /* Chr, Saf */
  -khtml-box-shadow: 1px 1px 3px #E2007A, 
  -1px -1px 3px #000; /* Konqueror */
  box-shadow: 1px 1px 3px #E2007A, 
  -1px -1px 3px #000; /* CSS3 */
}