Elementschatten mit CSS3 Box Shadow

1 | 18921 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Elementschatten mit CSS3 Box Shadow" mit Ihrem Wissen!

Anzeige Hier werben

Firefox2Nein3Nein3.5Unterstützt3.6Unterstützt
IE6Nein7Nein8Nein
Opera9.5Nein10Unterstützt
Safari3Nein4Nein
Elementschatten mit CSS3 Box Shadow

Schatten sind eine gute Möglichkeit einzelne Elemente aus dem Fluss der Website speziell hervorzuheben oder um einfach einen dreidimensionalen Effekt zu erhalten. Die möglichkeiten Schatten zu formatieren hat sich mit CSS3 um einiges verbessert.

Prinzipiell lässt sich ein Schatten für viele Elemente verwirklichen, aber besonders bei frei stehenden Bildern oder Formularen lassen sich schöne 3D-Effekte damit erzielen.
Der hier verwendete box-shadow sieht folgende Werte vor:
box-shadow: [horizontale position] [vertikale position] [verlauf-effekt] [größe] [farbe] [innen/außen]
Position sowie Verlauf und Größe müssen in Pixel angegeben werden.
Die Darstellungsart der Farbe ist frei wählbar, sie sollte aber per rgba angegeben werden. Dazu später mehr.
Zuletzt bietet der box-shadow noch die Möglichkeit den Schatten per inset als Innen-Schatten darzustellen, die Angabe ist allerdings optional.

Anfangen wollen wir mit einem Beispiel für einen schräg nach hinten verlaufenden Schatten bei einem Bild. Um Spielraum für den Schatten zu bekommen werden wir ihn vom Bild abkoppelt und absolut positionieren. Die beschreibenden Bilder lassen sich per Klick vergrößern um die Ergebnisse zu betrachten.

Hier das Beispiel zuerst im Original und dann mit dem schräg verlaufenden Schatten.

Bild zu Elementschatten mit CSS3 Box Shadow
Schräger Schatten
Bild zu Elementschatten mit CSS3 Box Shadow
Original

Zur Erklärung werden wir das CSS dazu Stück für Stück aufbauen. Der Übersicht halber direkt in der HTML-Datei und zuerst nur für Mozilla. Im letzten Schritt werden wir dann auch andere Browser dazunehmen:

Grundgerüst:  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Elementschatten mit CSS3 Box Shadow</title>
    <style>
    </style>
</head>
<body>
    <div class="boxshadow">
        <img src="../img/webmasterlogo.jpg" alt="Webmasterpro Logo" />
    </div>
</body>
</html>

Das soll unser Grundgerüst sein. Am eigentlichen HTML brauchen wir nichtsmehr zu ändern, wir betrachten deswegen nurnoch was im <style> eingefügt werden muss.

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
body {
    width: 500px;
    margin: 100px auto;
}

.boxshadow {
    display: inline-block;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
}

.boxshadow img {
    vertical-align: middle;
    max-width: 100%;
}

Zuerst definieren wir den umgebenen div als display:inline-block;, damit sich dieser an das innenliegende Bild anpasst. Danach verpassen wir ihm einen Schatten der um 1px nach unten und 2px nach rechts verschoben ist. Der Verlauf soll 4px sein und wir geben ihm per rgba ein transparentes Schwarz als Farbe.
Der Schatten führt zu einem zusätzlichen Abheben des Bildes vom Hintergrund und verbessert damit den 3D-Effekt.
Das innen liegende Bild zentrieren wir per vertical-align: middle; und sorgen per max-width: 100%; das es sich dem Block immer anpasst.
Um unsere Ergebnisse besser betrachten zu können nehmen wir einen 500px breiten body, zentrieren diesen per auto und setzen ihn 100px von der Oberkante ab.
Alle angegebenen Werte im ganzen Artikel sind nicht fix und sollen zum Spielen einladen.

Jetzt machen wir uns an das Einfügen des eigentlichen Schattens:

Bild zu Elementschatten mit CSS3 Box Shadow
 
css
1
2
3
4
.boxshadow:after {
    content: '';
    -moz-box-shadow: 0px 0px 10px 20px rgba(0, 0, 0, .5);
}

Damit haben wir zwar den Schatten erzeugt, der Effekt ist aber nicht gerade berauschend. Zu beachten ist, dass der content den Schatten wirft, er kann also nicht einfach weggelassen oder per none definiert werden. Das wird zwar noch zu einem etwas unangenehmen Verhalten führen, allerdings lässt sich das nicht einfach umgehen. Dazu später mehr, ersteinmal werden wir den Schatten von der Box abkoppeln.

Bild zu Elementschatten mit CSS3 Box Shadow
 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.boxshadow {
    display: inline-block;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    position: relative;
}

.boxshadow:after {
    content: '';
    -moz-box-shadow: 0px 0px 10px 20px rgba(0, 0, 0, .5);
    position: absolute;
}

Dazu geben wir dem Block eine relative Position, und dem dazu gehörenden :after-Elemente eine zu dieser Position absolute.
Der jetzt abgekoppelte Schatten lässt sich ganz nach unseren Wünschen positionieren.

Bild zu Elementschatten mit CSS3 Box Shadow
 
css
1
2
3
4
5
6
7
8
9
.boxshadow:after {
    content: '';
    -moz-box-shadow: 0px 0px 10px 20px rgba(0, 0, 0, .5);
    position: absolute;
    bottom: 0px;
    right: 0px;
    height: 0px;
    width: 0%;
}

Mit den Werten: bottom, right, height und width haben wir fast die volle Kontrolle über die Positionierung des Schattens.
bottom: Gibt die y-Position des Schattens an, ein positiver Wert verschiebt den Schatten nach oben.
right: Gibt die x-Position des Schattens durch seinen Abstand zum rechten Rand an, ein positiver Wert verschiebt den Schatten nach links.
width: Gibt die Breite des Schattens an, ein %-Wert ist hier besser geeignet.
height: Gibt die Höhe des Schattens an.

Bild zu Elementschatten mit CSS3 Box Shadow
 
css
1
2
3
4
5
6
7
8
9
.boxshadow:after {
    content: '';
    -moz-box-shadow: 0px 0px 10px 20px rgba(0, 0, 0, .5);
    position: absolute;
    bottom: 0px;
    right: 0px;
    height: 30px;
    width: 20%;
}

Da der eigentliche Schatten vom content geworfen wird, tritt bei der Veränderung des height-Parameters ein unschöner Effekt auf. Der height-Parameter ändert die Höhe des content, und erzeugt dadurch ein transparentes Fenster im Schatten.
Die Höhe des Schattens lässt sich, über den height-Parameter, für unsere Zwecke nicht beliebig einsetzen. Ein geschicktes Spiel der Schattengröße im box-shadow (hier 20px) und des height-Parameters bietet aber trotzdem eine gute Möglichkeit den Schatten nach eigenen Wünschen zu formatieren. Bei niedrigen Elementen wie unserem Beispiel reicht bereits ein sehr geringer Wert.
Achtung:
Opera benötigt eine minimale height von 1px, sonst wird kein Schatten angezeigt.

Bild zu Elementschatten mit CSS3 Box Shadow
 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.boxshadow:after {
    content: '';
    -moz-box-shadow: 0px 0px 10px 20px rgba(0, 0, 0, .5);
    -moz-transform: skew(-30deg);
    position: absolute;
    bottom: 20px;
    right: 10px;
    height: 1px;
    width: 90%;
    z-index: -1;
}

Nachdem wir den Schatten schön positioniert haben, geben wir ihm mit den folgenden Werten den letzten Schliff:
transform: skew(-30deg): Gibt dem Schatten eine Neigung von 30 Grad
z-index: -1: Verschiebt den Schatten hinter alle anderen Elemente.
Anmerkung:
Per z-index: -1; formatierte Elemente werden im IE einfach garnicht angezeigt.

Der gesamte Code sieht dann zusammen mit der Einbindung anderer gängiger Browser so aus:

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Elementschatten mit CSS3 Box Shadow</title>
    <style>
    body {
        width: 500px;
        margin: 100px auto;
    }

    .boxshadow {
        display: inline-block;
        -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
        -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
        box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
        position: relative;
    }

    .boxshadow:after {
        content: '';
        -moz-box-shadow: 0px 0px 10px 20px rgba(0, 0, 0, .5);
        -moz-transform: skew(-30deg);
        -webkit-box-shadow: 0px 0px 10px 20px rgba(0, 0, 0, .5);
        -webkit-transform: skew(-30deg);
        -o-transform: skew(-30deg);
        box-shadow: 0px 0px 10px 20px rgba(0, 0, 0, .5);
        transform: skew(-30deg);  
        position: absolute;
        bottom: 20px;
        right: 10px;
        height: 1px;
        width: 90%;
        z-index: -1;
    }

    
    .boxshadow img {
        vertical-align: middle;
        max-width: 100%;
    }
    </style>
</head>
<body>
    <div class="boxshadow">
        <img src="../img/webmasterlogo.jpg" alt="Webmasterpro Logo"/>
    </div>
</body>
</html>

Per box-shadow lassen sich auch mehrere Schatten gleichzeitig definieren. Die Positionierung ist dann allerdings sehr kompliziert.
Geschickter ist es einen zweiten Schatten mit dem :before-Pseudo-Element zu erstellen. Dieser lässt sich dann wieder Schatten im :after-Element beliebig formatieren.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "Elementschatten mit CSS3 Box Shadow" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Elementschatten mit CSS3 Box Shadow" hier bearbeiten.

Mitarbeiter