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.
Im ersten Schritt benötigen wir das HTML5-Grundgerüst mit dem eingebauten Bild.
<!DOCTYPE html>
<html lang="de">
<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.
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.
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
