Service Tipps HTML CSS JavaScript PHP MySQL Webdesign Linkliste SiteMap

Mit CSS 3 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.
Angezeigt werden die Schatten ab: Mozilla Firefox 4, Internet Explorer 9, Google Chrome und Opera 10.

 

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

Tipp Wem das alles zu kompliziert ist, der kann
den Box-Schadow Generator verwenden

 Das könnte Sie interessieren:
Loch im Browser! - Löcher mit Grafiken und CSS.  Bildgröße automatisch anpassen  CSS Hyperlink #16  CSS Befehle: Hintergrund  CSS Hyperlink #2  Größenveränderung von Elementen - CSS 3 bietet dem Benutzer die Möglichkeit Elemente in der Größe zu verändern. Sie können mit der Anweisung resize festlegen welche Elemente in der Größe veränderbar sind.  Links mit Infopop  Wasserzeicheneffekt - Hintergrundbild fixieren  CSS Befehle: Tabellen  CSS Hyperlink #8  CSS Hyperlink #15  Werbefenster mit CSS  CSS Hyperlink #11  …mehr