Ihr kennt doch hoffentlich alle die Apple-Seite für das iPhone 4S, oder? Wenn nicht solltet ihr sie euch unbedingt mal angucken und die ganzen CSS3-Spielereien genießen. Was mich aber beim betrachten verwundert hat, ist dass die gebogenen Schlagschatten ober- und unterhalb der Galerie statische Bilder sind und nicht auch mit CSS generiert wurden.

Dabei ist es doch so einfach gebogene Schatten mit CSS3 zu erstellen. Man braucht nur zwei Elemente dafür: den Schatten und eine überliegende Box.

Daraus ergibt sich folgender HTML-Teil:

<div id="overlay"><!-- Platz für Text (im Header oder ähnlich) --></div>
<div id="shadow"></div>

<!-- der Restliche Text -->​

Im CSS-Teil wird jetzt noch zum einen festgelegt, dass einen Schatten geben soll und dieser gebogen ist und zum anderen die überliegende Box so definiert, dass sie eben über dem Schatten liegt.

* {
    margin:0 auto;
}

body {
    background:#f9f9f9;
}

#overlay {
    width:100%;
    position:relative;
    height:100px;
    background:#fff;
}

#shadow {
    border-radius:50%;
    width:100%;
    background:#fff;
    height:4px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.8);
    margin-top:-6px;
    margin-bottom:20px;
}
​​

Das Ganze kann man auch hier “in action” bewundern.


Mit dieser Methode lassen sich ganz einfach nach aussen gebogene Schlagschatten erstellen. Wie man nach innen gebogene Schatten erzeugt, kann man hier nachlesen.