Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Lösung zur Aufgabe:
Bild mit 2 Schatten über CSS3 box-shadow

Lösung zur Aufgabe mit dem Bild und 2 verschiedenen farbigen Schatten. Wichtig ist auch, dass ältere Browser die entsprechenden Anweisungen bekommen, dass die Schatten in möglichst vielen Browserversionen sauber angezeigt werden.

Aufgabelösung zu 2 Schatten für 1 Bild mit box-shadow
Aufgabelösung zu 2 Schatten für 1 Bild mit box-shadow

Im ersten Schritt benötigen wir das HTML5-Grundgerüst mit dem eingebauten Bild.

<!DOCTYPE html>
<html>
<head>
    <title>CSS3: box-shadow</title>
    <meta charset="UTF-8">
    <link href="css3-box-shadow.css"
          rel="stylesheet">
</head>
 
<body>
 
<img src="hund.jpg" width="320"
     height="340" alt="Welpe">
 
</body>
</html>

Das Bild mit dem Hund kann heruntergeladen werden unter https://www.html-seminar.de/bilder/hund.jpg

Im nächsten Schritt wollen wir ein wenig Platz um das Bild schaffen, damit die Schatten auch gut sichtbar werden. Dazu wird im HTML-Code der IMG-TAG ergänzt, um einen ID-Selektor mit der Bezeichnung „hund“.

<img id="hund" src="hund.jpg" width="320"
     height="340" alt="Welpe">

Jetzt können wir in der CSS-Datei die entsprechenden Anweisungen für die Platzierung geben. Wichtig ist für das Platzieren in diesem Fall ist, dass wir das Bild absolut platzieren:

#hund {
    position: absolute;
    top: 100px;
    left: 100px;
}

Jetzt geben wir die allgemein gültige CSS3-Anweisung für den ersten Schatten an:

box-shadow: 10px 10px 10px red;

Bitte daran denken – ansehen immer mit einem aktuellen Browser, der CSS3 unterstützt.

Unser zweiter Schatten soll nach links oben gehen. Wir erweitern unseren box-shadow Befehl um die weitere Angabe für den zweiten Schatten. Die Trennung zwischen den 2 Angaben erfolgt über ein Komma!

box-shadow: -10px -10px 10px green , 10px 10px 10px red;

Zwecks Übersichtlichkeit platziere ich jeden Schatten in einer eigenen Zeile im Quellcode.

box-shadow: -10px -10px 10px green ,
             10px  10px 10px red;

Ein Element kann mit beliebig vielen Schatten versehen werden. Es ist also nicht auf 2 Schatten beschränkt. Weitere Schatten werden einfach über Komma getrennt angefügt.

1 Element mit 4 Schatten über CSS3-Befehl box-shadow
1 Element mit 4 Schatten über CSS3-Befehl box-shadow

box-shadow: -10px -10px 10px green ,
             10px  10px 10px red,
            -20px  20px 80px blue,
             30px -10px 60px orange;

Angaben für einzelne Browser

Zusätzlich sollten noch die entsprechenden Angaben für verschiedene Browser gemacht werden. Diese werden vor dem allgemeinen Befehl gemacht, damit immer (sofern der Browser diesen versteht) der allgemeine CSS-Befehl zum Zug kommen kann.

#hund {
    position: absolute;
    top: 100px;
    left: 100px;
 
    -moz-box-shadow: -10px -10px 10px green ,
                10px 10px 10px red;
    -webkit-box-shadow: -10px -10px 10px green ,
                10px 10px 10px red;
    box-shadow: -10px -10px 10px green ,
                10px 10px 10px red;
}

Bitte folgende Ausgabe mit allen CSS3-Anweisungen nachbauen (auch für ältere Browser).

Erweiterung der box-shadow-Anweisung: inset

Box-Shadow kann auch mit inset erweitert werden. Dann fällt der Schatten nicht außerhalb des Elementes, sondern innerhalb.

Die CSS-Anweisung sieht dann so aus:

box-shadow: inset 10px 10px 10px red;

Bzw. wieder für alle Browser-Varianten:

-moz-box-shadow: inset 10px 10px 10px red;
-webkit-box-shadow: inset 10px 10px 10px red;
box-shadow: inset 10px 10px 10px red;

Einfach einmal testen.

weitere eigene Projekte: