WWW = Wieso? Weshalb? Warum?

Bei der Recherche zu den angehobenen Ecken stieß ich auf einen weiteren Effekt, der Elemente mit einem leichten räumlichen Effekt versieht: gewölbte Kantenschatten vermitteln den Eindruck, ein Element wurde nur mit den Ecken den Hintergrund berühren und sich ansonsten darüber wölben. Hier wird gezeigt, wie einfach man das nachbilden kann.

Am Ende wird das Ergebnis wiederverwendbar in einer eigenen CSS-Datei zusammengefasst, die zur freien Verfügung als Download angeboten wird.

WWW = Wieso? Weshalb? Warum?

Das hier ist die Basis-Technologie um gewölbte Schatten für ein Element zu erzeugen: ein einfaches ":before"-Pseudoelement mit zum Teil extrem abgerundeten Ecken (siehe Attribut "border-radius").

Die einzige Bedingung, die dabei erfüllt sein muss, ist dass das Element einen Hintergrund mit voller(!) Deckkraft haben muss! Um den Grund dafür zu veranschaulichen, haben hier den Hintergrund der Beispiele mit einer Transparenz von 25% (d.h. einer Deckkraft von 75%) versehen, so dass das mit ":before" erzeugte Pseudo-Element ganz leicht durchscheint.


.curved {
    position:           relative;
    -webkit-box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.3), 0 0 4em rgba(0, 0, 0, 0.1) inset;
            box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.3), 0 0 4em rgba(0, 0, 0, 0.1) inset;
}

.curved:before {
    content:            "";
    position:           absolute;
    z-index:            -1;
    -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0.8);
            box-shadow: 0 0 2em rgba(0, 0, 0, 0.8);
    border-radius:      10em / 1em;
}

Ja, das ist tatsächlich schon alles.

Darüber hinaus geht es "nur" noch darum, an welchen Seiten der Schatten sichtbar sein soll - und an welchen nicht. Das wird in den einzelnen Fällen über die Positionierung des Pseudo-Elements gesteuert.

Schauen wir uns doch im nächsten Kapitel gleich mal an, wie das ohne durchscheinendes Pseudo-Element aussieht.

Gewölbte Schatten an allen vier Seiten

<element class="curved"> [...] </element>

Das hier ist der einfachste Fall: die Position des :before-Pseudo-Elements wird an allen vier Seiten bis zum Rand des Eltern-Elements gezogen.

.curved:before             { top: 0;   left: 0;   bottom: 0;   right: 0;   }

Gewölbte Schatten nur an der Unterkante

<element class="curved bottom"> [...] </element>

Wenn der Schatten nur an der Unterkante zu sehen sein soll, wird er an allen anderen Kanten um mindestens 1em vom Rand ferngehalten.

.curved.bottom:before { top: 1em; left: 1em; bottom: 0;   right: 1em; }

Gewölbte Schatten nur an der rechten Kante

<element class="curved right"> [...] </element>

Wenn der Schatten nur an der rechten Kante zu sehen sein soll, wird er an allen anderen Kanten um mindestens 1em vom Rand ferngehalten.

.curved.right:before  { top: 1em; left: 1em; bottom: 1em; right: 0; }

Gewölbte Schatten nur an der Oberkante

<element class="curved top"> [...] </element>

Wenn der Schatten nur an der Oberkante zu sehen sein soll, wird er an allen anderen Kanten um mindestens 1em vom Rand ferngehalten.

.curved.top:before    { top: 0;   left: 1em; bottom: 1em; right: 1em; }

Gewölbte Schatten nur an der linken Kante

<element class="curved left"> [...] </element>

Wenn der Schatten nur an der linken Kante zu sehen sein soll, wird er an allen anderen Kanten um mindestens 1em vom Rand ferngehalten.

.curved.left:before   { top: 1em; left: 0;   bottom: 1em; right: 1em; }

Gewölbte Schatten außer an der linken Kante

<element class="curved noleft"> [...] </element>

Für den umgekehrten Fall, dass an allen Kanten ein Schatten zu sehen sein soll außer an der linken Kante, wenn der Schatten nur an der linken Kante zu sehen sein soll, dann setzt mal alle Positionierungen des Pseudo-Elemente auf 0, außer an der linken Kante - die setzt man dann z.B. auf 1em.

.curved.noleft:before    { top:   0; left: 1em; bottom:   0; right:   0; }

Gewölbte Schatten außer an der rechten Kante

<element class="curved noright"> [...] </element>

Für den umgekehrten Fall, dass an allen Kanten ein Schatten zu sehen sein soll außer an der linken Kante, wenn der Schatten nur an der linken Kante zu sehen sein soll, dann setzt mal alle Positionierungen des Pseudo-Elemente auf 0, außer an der linken Kante - die setzt man dann z.B. auf 1em.

.curved.noright:before    { top:   0; left: 1em; bottom:   0; right:   0; }

Gewölbte Schatten nur an Ober- und Unterkante

<element class="curved top_bottom"> [...] </element>

Die wohl häufigste Anwendung dürfte diese Technik finden, um Elementen an zwei gegenüberliegenden Seiten mit einem gewölbten Schatten zu versehen. Auch das ist kein Problem und mit einer einfachen Positionierungsangabe des Pseudo-Elements zu bewerkstelligen.

.curved.top_bottom:before  { top: 0;   left: 1em; bottom: 0;   right: 1em; }

Gewölbte Schatten nur an den seitlichen Kanten

<element class="curved left_right"> [...] </element>

Dasselbe nochmal, nur halt eben an den seitlichen Kanten.

.curved.left_right:before  { top: 1em; left: 0;   bottom: 1em; right: 0;   }