Gewölbter oder gebogener Schlagschatten für einen 3D-Effekt

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Der Peitlerkofel in Südtirol

Photo © Monika & Klaus Franz

Wie realisiert man einen gebogenen Schatten unter Bilder?

14Okt2014

Dreidimensionaler Effekt durch nach oben geknickte Ecken.


Gebogene Schlagschatten oder Schlagschatten, die eine nach oben geknickte Ecke simulieren, sind ein cooler Effekt auf einer Website. Dadurch heben sich Objekte oder Bilder von dem normalen Text hervor.
Und solch einen dreidimensionalen Effekt, wie oben dargestellt, möchte ich nun mit CSS3 (Cascading Style Sheet) und HTML (HyperText Markup Language) erzielen.


Aber zuerst schreibe ich noch ein paar allgemeine, aber wichtige, Grundlagen für das Erstellen eines gewölbten oder gebogenen Schlagschattens auf.

box-shadow

Ein Schatten um ein beliebiges HTML (HyperText Markup Language)-Objekt kann mit Hilfe von CSS3 (Cascading Style Sheet) mit unterschiedlicher Richtung, Größe und Unschärfe erstellt werden. Hierfür wird die CSS3 (Cascading Style Sheet)-Anweisung "box-shadow: 2px 2px 2px 2px #666 inset" benutzt. Dabei ist es wichtig zu wissen, dass sich der Schatten in Größe und Form dem Objekt anpasst. Eine runde Ecke des Objektes erzeugt also auch einen runden Schattenwurf.
Für ein Objekt können auch mehrere unterschiedliche Schatten gleichzeitig, durch ein Komma voneinander getrennt, angegeben werden.

Die Bedeutung der einzelnen Angaben zu "box-shadow: 2px 2px 2px 2px #666 inset":

  • Der erste Wert steht für den Versatz in horizontaler Richtung.
    Je größer der Wert ist, desto weiter wandert der Schatten nach rechts und mit einem negativen Wert wandert der Schatten nach links.
  • Der zweite Wert steht für den Versatz in vertikaler Richtung.
    Bei der vertikalen Ausrichtung wandert der Schatten mit positiven Werten nach unten und mit negativen Werten nach oben.
  • Der dritte Wert bestimmt die Unschärfe des Schattenwurfs.
    Je größer der Wert ist, desto größer ist die Unschärfe des Schlagschattens.
  • Der vierte optionale Wert bestimmt den Schattenradius.
    Je größer der Wert ist, desto größer ist die Ausdehnung des Schattens.
  • Dann folgt die Farbe des Schattens.
    Auch mit dieser Angabe lässt sich die Wahrnehmung der Unschärfe beeinflussen.
  • "inset": Diese optionale Angabe steht für einen Schatten nach innen

Anstelle der Farbangabe "#666" wird durch "rgba" (rot, grün, blau, alphakanal), zum Beispiel "box-shadow: 4px 4px 4px rgba(0, 0, 0, .6)", der Schatten eines Objektes durchsichtiger und wirkt damit auf strukturierten Hintergründen noch natürlicher.
Im unteren Beispiel kann man den Unterschied auf einem roten Hintergrund sehr gut erkennen.

1. Beispiel: box-shadow: 4px 4px 4px 4px #666
2. Beispiel: box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, .6)
1. Beispiel: box-shadow: 4px 4px 4px 4px #666
2. Beispiel: box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, .6)

Auf dem hellen Hintergrundpapier ist der Unterschied schon nicht mehr so deutlich zu erkennen. Die Darstellungsart der Farbe ist zwar frei wählbar, aber der Vorteil diese per "rgba" anzugeben ist durch das gezeigte Beispiel ersichtlich.

Nun noch ein paar Beispiele für unterschiedliche Schlagschatten von denen ich das letzte Beispiel für den gewölbten Schlagschatten verwenden werde.

3. Beispiel: kein Schatten
4. Beispiel: Schatten nur nach oben
box-shadow: 0 -3px 5px -2px rgba(0, 0, 0, .6)
5. Beispiel: Schatten nach außen
box-shadow: 0 1px 4px rgba(0, 0, 0, .3)
6. Beispiel: Schatten nach innen
box-shadow: 0 0 20px rgba(0, 0, 0, .1) inset
7. Beispiel: Alle drei Einzelschatten zusammen
box-shadow: 0 -3px 5px -2px rgba(0, 0, 0, .6),
0 1px 4px rgba(0, 0, 0, .3), 0 0 20px rgba(0, 0, 0, .1) inset;

border-radius

Die Eigenschaft "border-radius" wird im Artikel "Was kann beim Erstellen von CSS-Dateien vereinfacht werden?" ausführlicher erklärt. Hier führe ich nur zwei Beispiele auf, die ich für den Schatteneffekt benötige.

Ein Beispiel für den Unterschied bei der Angabe von zwei Werten.

8. Beispiel: border-radius: 100px / 20px;
9. Beispiel: border-radius: 100px 20px;

Gewölbter und gebogener Schlagschatten

An dem folgenden HTML (HyperText Markup Language)-Grundgerüst braucht man für die nächsten Beispiele nichts mehr zu ändern, betrachtet wird deswegen nur noch was jeweils im CSS3 (Cascading Style Sheet) eingefügt werden muss. Anstelle des Bildes kann aber auch ein zweiter "div-Container" für einen Text eingebunden werden, aber das ist letztendlich das Gleiche.

<div class="schatten">
    <img src="reisen_suedtirol201010.jpg" width="800" height="551"
      alt="Der Peitlerkofel in Südtirol">
</div>

Damit man die Position des Schattens definieren kann, und sich dieser auch hinter dem Objekt befindet, benötigt der übergeordnete "div-Container" die Anweisung "position: relative" und wird mit "z-index: 1" in den Vordergrund gesetzt. Somit dient dieser Container als Bezugspunkt für den absolut positionierten Schlagschatten.

#schatten {
    position: relative;
    height: 34.4em;
    width: 50em;
    margin: 2em auto 0;
    left: -5px;
    z-index: 1;
}

Nun bekommt entweder der zweite "div-Container" seine Eigenschaften zugeteilt oder in diesem Beispiel das Bild.
Die Größe beträgt sowohl in der Breite als auch in der Höhe 100% des übergeordneten Container "#schatten" und erhält zusätzlich noch einen weißen Rand "border: 5px solid #fff" von 5 Pixel.
Damit sich der weiße Rand vom Hintergrund abhebt wird dem Bild noch ein Schatten zugeteilt. Dieser führt zu einem zusätzlichen Abheben des Objektes vom Hintergrund und verstärkt damit noch den 3D-Effekt.

#schatten img {
    position: relative;
    width: 100%;
    height: 100%;
    border: 5px solid #fff;
    box-shadow: 0 -3px  5px -2px rgba(0, 0, 0, .6),
                0  1px  4px      rgba(0, 0, 0, .3),
                0  0   20px      rgba(0, 0, 0, .1) inset;
}

Dank der Pseudo-Elemente ":before" und ":after" wird nun der gebogene Schatten definiert und dem "div-Container" angehangen. Die Elemente ":before" und ":after" werden grundsätzlich als inline-Objekte interpretiert und sozusagen dem HTML (HyperText Markup Language)-Element oben drauf gesetzt, mit anderen Worten, vor oder nach dem Element platziert. Durch die Positionsangabe "position: absolute" ist der Schatten vom eigentlichen Objekt abgekoppelt und kann individuell positioniert werden.

Zuerst wird die Größe des Schattenwurfs bestimmt und erhält damit durch die beiden Pseudo-Elemente zwei Rechtecke mit 50% Breite und 30% Höhe des übergeordneten Containers "#schatten". Die beiden Rechtecke werden dann um 2 Pixel nach oben versetzt und erhalten einen Schlagschatten mit einem Abstand von 15 Pixel und einer Unschärfe von 10 Pixel. Nachdem der Schattenwurf positioniert ist, wird mit der folgenden Drehung dem Ganzen noch der letzte Schliff gegeben.
Das Pseudo-Element ":before" ist für die Darstellung des Schattens im linken unteren Bereich bestimmt und erhält daher eine Drehung von 3° gegen den Uhrzeigersinn. Für den rechten Bereich ist dann das Pseudo-Element ":after" zuständig dessen Drehung entgegengesetzt des linken Schattenwurfs sein muss.

#schatten:before,
#schatten:after {
    position: absolute;
    content: "";
    width: 50%;
    height: 30%;
    bottom: 2px;
    left: 10px;
    box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
    transform: rotate(-3deg);
    z-index: -2;
}

#schatten:after {
    right: 0;
    left: auto;
    transform: rotate(3deg);
}

Damit ist der dreidimensionale Schattenwurf fertig gestellt und dem Bild vom Peitlerkofel hinterlegt.


Nun zeige ich weitere Beispiele für einen gewölbten oder gebogenen Schlagschatten.
Und wie oben schon beschrieben, wird anstatt einem Bild ein zusätzlicher "div-Container" wie folgt eingebunden.

<div class="box">
    <div class="schatten">
      freier Text
    </div>
</div>

Das grundsätzliche CSS3 (Cascading Style Sheet) für alle folgenden Beispiele bei denen jetzt der aus dem 8. Beispiel gebogene Radius beim Pseudo-Element ":before" zur Geltung kommt.

.box {
    position: relative;
    height: 12em;
    width: 31em;
    margin: 0 auto;
    z-index: 1;
}
.schatten {
    position: relative;
    color: #777;
    width: 80%;
    height: 80%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3),
                0 0  40px rgba(0, 0, 0, .1) inset;
}

.schatten:before {
    position: absolute;
    content: "";
    z-index: -2;
    box-shadow: 0 0 15px rgba(0, 0, 0, .6);
    border-radius: 100px / 20px;
}

Um den dreidimensionalen Effekt der Schlagschatten besser zu erkennen, gehen Sie bei den Beispielen mit dem Mauszeiger einmal über das jeweilige Rechteck.

Horizontal gebogener Schlagschatten

Ein horizontal gewölbter Schlagschatten mit folgendem zusätzlichem CSS3 (Cascading Style Sheet).

.schatten9:before {
top: 0; bottom: 0;
left: 10px; right: 10px;
}

Für einen gebogenen Schlagschatten auf der Unterseite wird der Schatten mit "top: 10px" nach unten versetzt und, um den Effekt noch zusätzlich zu unterstreichen, der Schattenwurf nach innen mit "box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 -30px 40px rgba(0, 0, 0, .1) inset" angepasst.

Für einen gebogenen Schlagschatten auf der Oberseite wird der Schatten mit "bottom: 10px" nach oben versetzt und der Schattenwurf nach innen kann mit "box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 30px 40px rgba(0, 0, 0, .1) inset" angepasst werden.

Vertikal gebogener Schlagschatten

Ein vertikal gewölbter Schlagschatten mit folgendem zusätzlichem CSS3 (Cascading Style Sheet).

.schatten10:before {
top: 10px; bottom: 10px;
left: 0; right: 0;
}

Für einen gebogenen Schlagschatten der nur auf der rechten Seite erscheinen soll, wird der Schatten mit "left: 10px" nach rechts versetzt und der Schattenwurf nach innen kann wieder mit "box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -30px 0 40px rgba(0, 0, 0, .1) inset" angepasst werden.

Für einen gebogenen Schlagschatten nur auf der linken Seite wird der Schatten mit "right: 10px" nach links versetzt und der Schattenwurf nach innen kann mit "box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 30px 40px rgba(0, 0, 0, .1) inset" angepasst werden.

Vier Ecken kleben am Hintergrund

.schatten20:before {top: 0; bottom: 0;
left: 10px; right: 10px; }
.schatten20:after {left: 0; right: 0;
top: 10px; bottom: 10px; }

Perspektivischer Schlagschatten

Für den perspektivischen Schlagschatten wird das Pseudo-Element ":before" im CSS3 (Cascading Style Sheet) etwas anders definiert, und für den Schatten auf der rechten Seite kommt das Pseudo-Element ":after" noch hinzu.

.schatten11:before,
.schatten11:after {
    position: absolute;
    content: "";
    z-index: -2;
    bottom: 5px;
    width: 80%;
    height: 3.1em;
}

.schatten11:before {
    left: 50px;
    box-shadow: -80px 0 8px rgba(0, 0, 0, .4);
    transform: skew(45deg);
}

.schatten11:after {
    left: 40px;
    box-shadow: 80px 0 8px rgba(0, 0, 0, .4);
    transform: skew(-45deg);
}

Der Radius aus den beiden vorherigen Beispielen entfällt und auch der Schatten wird anders und auch etwas deutlicher dargestellt. Mit der 3D-Transformation "transform: skew(45deg)" wird der Schatten dann noch um 45° horizontal geneigt.
Um den perfekten dreidimensionalen Schlagschatten zu erhalten muss die Größe und Platzierung den eigenen Wünschen angepasst werden.
Für einen einzelnen Schatten auf der linken Seite der Box, wird nur das Pseudo-Element ":before" benötigt, und für einen Schatten auf der rechten Seite benötigt man das Pseudo-Element ":after".

Perspektivischer Schlagschatten

Nach oben geknickte Ecken

Das ist am Anfang des Artikels bereits ausführlich beschrieben und wird hier nur der Vollständigkeit noch einmal aufgeführt.
Auch hierbei gilt: für eine nach oben geknickte Ecke auf der linken Seite der Box, wird nur das Pseudo-Element ":before" benötigt, und für eine Ecke auf der rechten Seite benötigt man das Pseudo-Element ":after".

Nach oben geknickte Ecken

Schwebende Box

Und nun noch ein Beispiel, dass ohne Pseudo-Elemente und ohne "border-radius" auskommt.

.schatten13 {
    top: 0;
    box-shadow: 0  25px 10px -10px rgba(0, 0, 0, .6),
                0   1px  4px       rgba(0, 0, 0, .3),
                0 -30px 40px       rgba(0, 0, 0, .1) inset;
}

.schatten13:hover {
    top: 15px;
    box-shadow: 0  10px 10px -10px rgba(0, 0, 0, .6),
                0   1px  4px       rgba(0, 0, 0, .3),
                0   0   40px       rgba(0, 0, 0, .1) inset;
}

Lediglich der Container "#schatten" hat noch einen zusätzlichen Schatten nach unten erhalten.
Der Clou ergibt sich beim Überfahren der Box mit der Maus. Hierbei wird der Container um 15 Pixel nach unten versetzt und der zusätzliche Schatten um 15 Pixel nach oben, wobei dadurch der Schatten seine Position in Relation zum Hintergrund nicht verändert.

Schwebende Box

Schwebende Box - zum Zweiten

Dieses Beispiel erzeugt einen perspektivischen Schatten, aber dafür wird wieder ein Pseudo-Element benötigt.

.box2 {
    perspective: 1200px;
    height: 12em;
    width: 31em;
    margin: 0 auto;
}

.schatten14 {
    position: relative;
    color: #777;
    width: 80%;
    height: 9.5em;
    top: 0;
    background: #fff;
    box-shadow: 0   1px  4px rgba(0, 0, 0, .3),
                0 -30px 40px rgba(0, 0, 0, .1) inset;
    transition: 1s ease-in-out;
    transform-style: preserve-3d;
}

.schatten14:after {
    content: "";
    display: block;
    height: 80%;
    width: 75%;
    transform: rotateX(80deg) translate3d(0, 0, -44px);
    box-shadow: 50px 200px 25px 10px rgba(0, 0, 0, .3);
    transition: 1s ease-in-out;
}

.schatten14:hover {
    top: 35px;
    box-shadow: 0 1px  4px rgba(0, 0, 0, .3),
                0 0   40px rgba(0, 0, 0, .1) inset;
}

.schatten14:hover:after {
    transform: rotateX(94deg) translate3d(0, 0, -70px);
    box-shadow: 50px 200px 25px 10px rgba(0, 0, 0, .4);
}

Diesmal wird der Schatten dem "Pseudoelement" mit dem Namen ".schatten14:after" zugewiesen.
Das Besondere bei diesem Schatten ist die Angabe "transform: rotateX(80deg) translate3d(0,0,-44px)". Mit "rotateX(80deg)" wird der Schattenverlauf einem Trapez ähnlich erstellt.
Der Clou ergibt sich wieder beim Überfahren der Box mit der Maus. Hierbei wird der übergeordnete Container um 35 Pixel nach unten versetzt und der Schatten wird weiter auf 94° gedreht, so dass er als Strich unter der Box erscheint. Außerdem wird die Deckkraft des Schattens erhöht.

Schwebende Box - zum Zweiten

Schwebende Box - zum Dritten

Und nun das letzte Beispiel für eine schwebende Box und diesmal mit einem wirklich separaten Schatten. Dafür wird dann aber auch wieder ein Pseudo-Element benötigt.

.box3 {
    position: relative;
    color: #777;
    height: 10em;
    width: 25em;
    top: 0;
    background: #fff;
    box-shadow: 0   1px  4px rgba(0, 0, 0, .3),
                0 -30px 40px rgba(0, 0, 0, .1) inset;
    transition: 1s ease-in-out;
    z-index: 2;
}

.box3:hover {
    top: 20px;
    box-shadow: 0 1px  4px rgba(0, 0, 0, .3),
                0 0   40px rgba(0, 0, 0, .1) inset;
}

.schatten15 {
    position: relative;
    height: 16em;
    z-index: 1;
}

.schatten15:after {
    content: "";
    display: block;
    height: 8%;
    width: 50%;
    margin-left: 25%;
    opacity: .5;
    background: radial-gradient(closest-side,
                rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    transition: 1s ease-in-out;
}

.schatten15:hover:after {
    margin-left: 17%;
    width: 66%;
    opacity: .8;
}

Diesmal wird der Schatten dem "Pseudoelement" mit dem Namen ".schatten15:after" zugewiesen und mit "z-index: 1" hinter die Box geschoben.
Das Besondere bei diesem Schatten ist die Angabe "background: radial-gradient (closest-side, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))". Mit "radial-gradient" wird ein radialer Farbverlauf erstellt, der sich vom Zentrum nach außen ausbreitet. Und dadurch dass das Pseudo-Element durch die Angaben "height: 8%" und "width: 50%" nicht quadratisch ist, entsteht ein ellipsenförmiger Verlauf. Mit "closest-side" wird dann der Farbverlauf genau dem eingestellten Größenverhältnis angepasst.
Der Clou ergibt sich wieder beim Überfahren der Box mit der Maus. Hierbei wird der übergeordnete Container um 20 Pixel nach unten versetzt und beim zusätzlichen Schatten wird die Schattenbreite vergrößert sowie die Deckkraft erhöht.

Schwebende Box - zum Dritten

Diese schwebende Box hat ihren Namen zu Recht und damit sind viele Ideen umsetzbar.
Ich hoffe es waren ein paar schöne Anregungen und Denkanstöße dabei. Den gewölbten Schlagschatten hatte ich bereits bei dem Fade-Effekt von zwei Bildern benötigt.

Zum Seitenanfang springen Λ