CSS/Eigenschaften/äußere Gestaltung/box-shadow

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft box-shadow ermöglicht die Darstellung von Schattenverläufen für Boxen.

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

Syntax

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

  • offset-x offset-y: horizontaler und vertikaler Versatz des Schattens,
    eine Längenangabe jedoch kein Prozentwert
  • blur-radius: (optionaler) Weichzeicheneffekt. Der Standardwert 0 entspricht einer scharfen Darstellung. Je größer der Wert, umso „verwaschener“ erscheint der Schatten.
  • spread: (optionales) Maß für eine zusätzliche Vergrößerung des Schattens. Der Standardwert 0 bedeutet hier, dass der Schatten die Abmessungen „seines“ Elementes hat. Für den Ausbreitungsradius sind auch negative Werte möglich. Prozentangaben sind nicht erlaubt.
  • color: (optionale) Farbangabe,
    Standardwert ist currentColor, die Schriftfarbe des Elementes
  • inset gibt an, dass der Schatten ins Innere der Box geworfen wird. Dies darf nur als erste oder letzte Angabe gesetzt werden.
  • none: kein Schatten (Standardwert)
Beispiel: verschiedene Bespiele mit box-shadow ansehen …
div {
	float: left;
	width: 8em;
	height: 8em;
	margin: 1em;
	padding: 0.5em;
	background-color: beige;
}

#one {
	box-shadow: 10px 10px 10px 15px grey;
}

#two {
	box-shadow: 10px 0 10px grey inset;
}

#three {
	box-shadow: -10px -10px 10px lightgrey inset, 10px 10px grey;
}

#three {
  border: 1px solid grey;
  border-radius: 5px;
  box-shadow: 10px 10px 10px white inset, 10px 10px 10px grey;
}

#four {
	border-radius: 1.5em;
	border: 10px solid red;
	box-shadow: 0 0 0 1em red inset;
	padding: 1em;
}

#five {
	box-shadow: 2em 0 khaki inset, -2em 0 khaki inset, 0 -5px 0 0 red inset
}
Das Beispiel enthält fünf div-Elemente, die unterschiedliche Schatten werfen.
  • Box 1 hat einen Versatz von je 10px, einen Blur von 10px und einen spread von 15px
  • Box 2 hat durch das Schlüsselwort inset einen inneliegenden Schatten nur nach rechts ohne einen Versatz auf der y-Achse
  • Box 3 hat einen weißen Innenschatten und, durch ein Komma getrennt, einen weiteren Außenschatten nach rechts unten
  • Box 4 hat einen abgeschnittenen Rahmen, was sich mit border nicht erreichen lässt. Der border-radius wirkt auf das div, dann wird ein roter Innenschatten von 1em drübergelegt.
  • Box 5 hat einen roten Innenschatten, der an beiden Seiten aber durch einen khaki-farbenen Innenschatten verdeckt wird, sodass es zu einer verkürzten Unterstreichung kommt.


Mehrere Schatten werden durch Kommata getrennt, sie werden dabei in umgekehrter Reihenfolge übereinander gelegt, dass heißt der zuerst genannte Schatten liegt ganz oben.

Hinweis zum Internet Explorer: Ein table Element mit border-collapse:collapse zeigt keinen box-shadow an.

Beachten Sie: box-shadow vergrößert das Element scheinbar. Wenn Sie Rahmen (wie Box 4 im Bsp.) mit box-shadow realisieren, ist dieser Außenbereich nicht anklick- und fokussierbar.

Anwendungsbeispiel[Bearbeiten]

Kennzeichnung von Links mit box-shadow[Bearbeiten]

Links erhalten bei :hover oft einen andersfarbigen Hintergrund. Dafür können sie anstelle der background-Eigenschaft auch box-shadow verwenden und mit transition einen weichen Übergang zwischen den Zuständen realisieren:

Beispiel: animierter Hintergund mit box-shadow ansehen …
a {
  color: blue;
  box-shadow: inset 0 -3px 0 -1px blue;
  padding: .25em 0;
  text-decoration: none;
  transition: all .5s;
}

a:hover,
a:focus {
  box-shadow: inset 0 -30px 0 skyblue;
}
Das Beispiel enthält drei Links. Sie sind durch die blaue Textfarbe und die blaue Unterstreichung mehrfach gekennzeichnet.
Dabei wird die Unterstreichung aber nicht mit text-decoration:underline realisiert, sondern durch einen scharfen Innenschatten. Wenn das Link-Element den Fokus erhält, wird der Innenschatten über die gesamte Fläche vergößert und wirkt nun nicht mehr als Unterstreichung, sondern als jetzt (hellerer) Hintergrund, da auch die Farbangabe geändert wurde.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]