CSS-Boxen mit Schatten
![[Bildschirmfoto]
CSS-Boxen mit Schatten [Bildschirmfoto]
CSS-Boxen mit Schatten](img/box_und_textschatten.png)
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.
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
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>
Lorem ipsum dolor sit amet Elit Phasellus vestibulum
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.