Unsere Augen interpretieren die Realität nicht nur durch Farben, sondern nehmen dabei u.a. Konturen,  Dreidimensionalität und Schatten als Wahrnehmung in Betracht. Um den Besucher ein nahes Gefühl zu geben, bemühen sich viele Web-Designer genau diese Eigenschaften in ihren Web-Projekten einzubinden.

CSS3 bringt bekanntlich viele Vorteile mit sich. Einer davon ist die Erstellung von Schatten für diverse Elemente. Zur Verdeutlichung zeige ich ein simples Beispiel wie man mit CSS3 einen leichten Schatten erstellen kann, welcher einen Wölbeffekt hervorruft.

Zuerst einmal erstellen wir unseren 1-zeiligen HTML-Code:

<div class="blueBox"></div>

Unsere CSS besteht aus lediglich einer Klasse, gefolgt von einem :before-Selector:

.blueBox {
width: 400px;
height: 300px;
margin: auto;
position: relative;
background-color: #1E8CBE;
}

.blueBox:before{
-webkit-transform: skew(0deg, 4deg);
box-shadow: 7px 7px 7px #000;
-moz-box-shadow: 7px 7px 7px #000;
-webkit-box-shadow: 7px 7px 7px #000;
position: absolute;
background-color: #000;
bottom: 2px;
right: 12px;
content: '';
z-index: -1;
width: 280px;
height: 25px;
}

Zur Erklärung:

  1. Mit der Klasse .blueBox erstellen wir eine klassische Box mit der Position relative.  Die Position ist für unseren nächsten Schritt besonders wichtig.
  2. Mit dem Selektor :before erstellen wir eine weitere Box. Dieser hat die Besonderheit sich mit der Hilfe von box-shadow und –webkit-transform zu schattieren und zu transformieren.  Damit unsere Haupt-Box, also die Klasse blueBox, unseren Selektor (oder zumindest nur ein Teil davon) als Schatten verwenden kann, setzen wir hierfür die z-index: -1 und ändern dabei die Position. Somit wird der Selektor hinter unserer Klasse platziert und das was zu sehen bleibt, ist lediglich ein leichter Schatten für unsere blueBox.

Demo

Eine Demo des Effekts ist hier verfügbar:

http://css3shadow.reza.cubelab.ch/