Schatteneffekte mit CSS 3 by Stefanie Graf

Für die Gestaltung von Subnav-Boxen einer Kundenwebsite, wollten wir  Schatteneffekte mit reinem CSS erstellen – ohne die Verwendung von background-images.

Das gelingt mit der CSS3 Eigenschaft”box-shadow” sehr schön, die Styledefinition lautet dann z.B. für den Firefox (Gecko) so:
-moz-box-shadow: 8px 8px 18px #6f7072;

Diese CSS-Eigenschaft benötigt folgende Angaben:

Der 1. Wert: “x-Abstand”
Er verschiebt  den Schattens horizontal. Ein positiver Wert verschiebt den Schatten nachch rechts, ein negativer nach links.

Der 2. Wert:  “y-Abstand”
Er verschiebt  den Schattens vertikal.  Ein positiver Wert positioniert den Schatten unten, ein negativer oben.

Der 3. Wert : “Blur-Radius” (optional)
Die Größe des Weichzeichnereffektes.
Je größer der Wert, desto größer und transparenter wird der Schatten. Wenn kein Wert angegeben wird, wird der Wert auf 0 gesetzt.

Der 4. Wert  hier definiert die Schattefarbe.

Es ist noch ein  weitere Wertangabe, vor der Farbdefinition, möglich:
“Spread-Radius” (optional)
Der “Überfüllungs-Radius”, er vergrößert bei positivem Wert den Schatten und weitet ihn aus – und umgekehrt.
Wenn kein Wert angegeben wird, wird der der Wert auf 0 gesetzt.

Anmerkung:
Wenn “inset” (optional)  als keyword angegeben ist, wird der Schatten nicht außen, sondern innerhalb des Rahmens gezeichnet.
Inset Schatten werden über dem Hintergrund, aber unter Rahmen und Inhalt dargestellt.

Browserangaben:
Für Firefox (Gecko):
-moz-box-shadow: 8px 8px 18px #6f7072;

Für Safari 3.0 (WebKit):
-webkit-box-shadow: 8px 8px 18px #6f7072;

Opera:
keine Unterstützung

Beispiele:

#box-shadow
{
-moz-box-shadow:8px 8px 15px #6f7072;
-webkit-box-shadow: 8px 8px 18px #6f7072;
background-color:#eee;
margin: 30px 0;
padding:5px 5px 5px 15px;
width:250px;
}

<div id=”box-shadow”>Beispielbox mit grauem Schatten.</div>

Damit man die Unterschiede sieht, habe ich hier ein paar Screenshots eingefügt:

Firefox:

Safari:

Der Internet Explorer:
Der IE unsterstützt dieses CSS3-Feature leider nicht, aber man kann mit folgenden Angaben auch einen Schlagschatten erreichen. Allerdings sieht das Ergebnis dann bei weitem nicht so schön aus – der Schatten ist wird viel härter dargestellt (sh. Screenshots).

Anmerkung: Die filter-Angabe beißt sich  mit dem  jquery-Effekt  “fadeIn”.

Browserangaben IE:
Ab IE 8:
-ms-filter:”progid:DXImageTransform.Microsoft.DropShadow(color=#6f7072, offx=2, offy=2)”;

Andere IE-Versionen:
filter:progid:DXImageTransform.Microsoft.DropShadow(color=#6f7072, offx=2, offy=2);

Screenshot IE 8:

Screenshot IE 7:

Tags: html

This entry was posted on Tuesday, December 22nd, 2009 at 15:23 and is filed under Javascript/ HTML/ CSS. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.