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.

- Text-Schatten Generator

Block mit Schatten
<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

Lorem ipsum dolor sit amet Elit Phasellus vestibulum

<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.

Lorem ipsum dolor sit amet Elit Phasellus vestibulum

<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.

Lorem ipsum dolor sit amet Elit Phasellus vestibulum

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

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

Lorem ipsum dolor sit amet Elit Phasellus vestibulum

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

Mehrere Schatten

Lorem ipsum dolor sit amet Elit Phasellus vestibulum

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

<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>

Tipp

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