CSS-Boxen mit Schatten

Mit CSS3 können Sie Block-Elemente mit Schatten gestalten (box-shadow). Schatten sind eine gute Möglichkeit einzelne Elemente aus dem Fluss der Website speziell hervorzuheben oder um einfach einen dreidimensionalen Effekt zu erhalten.

<div style="box-shadow: px px px px ; background-color: ;
 font-size: px; color: ; width: px; text-align: center;
 margin: auto;">Block mit Schatten</div>

Beispiele

<div style="box-shadow: 0px 0px 15px #FFD700;
 width: 200px; padding: 10px;">
Lorem ipsum dolor ...</div>

0px = Angabe des horizontalen und vertikalen Versatzes, es kann auch eine negative Zahl eingetragen werden.
15px = Der Verlauf-Effekt des Schattens.
#FFD700 = Die Farbe des Schattens.

<div style="box-shadow: inset 0px 0px 20px #FFD700;
 width: 200px; padding: 10px;">
Lorem ipsum dolor ...</div>

Wenn der Schatten nach innen gehen soll, dann fügen Sie inset hinzu.

<div style="box-shadow: 0px 0px 2em #FFD700;
 width: 200px; padding: 10px;
 background-color: #FFD700;">
Lorem ipsum dolor ...</div>

<div style="box-shadow: 10px 5px 5px #FFD700;
 width: 200px; padding: 10px;
 background-color: #FFFCEF;">
Lorem ipsum dolor ...</div>

<div style="box-shadow: 60px -16px #FFD700;
 width: 200px; padding: 10px;
 background-color: #FFFCEF;">
Lorem ipsum dolor ...</div>

Mehrere Schatten

<div style="box-shadow: -10px -10px 5px Green, 10px 10px 5px Red;
 width: 200px; padding: 10px;
 background-color: Yellow;">
Lorem ipsum dolor ...</div>

Siehe auch: Box-Shadow Animation

<div style="box-shadow:  0.5em -0.5em 0.4em Red, 0.5em 0.5em 0.4em Gold,
 -0.5em 0.5em 0.4em Lime, -0.5em -0.5em 0.4em Blue;
 width: 200px; padding: 10px;
 background-color: White;">
Lorem ipsum dolor ...</div>

div#kugel {
 width: 300px;
 height: 300px;
 margin: Auto;
 border-radius: 50%;
 box-shadow:
  inset 0 0 50px #fff,
  inset 20px 0 80px #f0f,
  inset -20px 0 80px #0ff, 
  inset 20px 0 300px #f0f, 
  inset -20px 0 300px #0ff,
  0 0 50px #fff, 
  -10px 0 80px #f0f,
  10px 0 80px #0ff;
}

Tipps

CSS - DiscoLights - Box-Shadow Animation

CSS-Formen Generator - Block-Elemente mit CSS beliebig formen und gestalten.