Besucher Statistik
Bilder mit CSS-Schatten
Scripte > Bildobjekte
Einen Schatten mit CSS-Anweisungen an ein Bild legen
Auch mit CSS-Definitionen können Schatten bei einem Bild erzeugt werden.
Die Definition dazu nennt sich box-shadow, z. B.: box-shadow: 10px 20px 30px grey;
Zum Einbau einfach den CSS-Code kopieren und in den HEAD-Bereich <head>....</head>, den HTML-Code in den BODY-Bereich <body>....</body> der aufrufenden Seite einfügen und nach eigenen Bedürfnissen anpassen.
Der erste Wert: | je größer, je weiter rutscht der Schatten nach rechts; mit negativen Vorzeichen rutsch er nach links. |
Der zweite Wert: | je größer, je weiter rutscht der Scahtten nach unten; mit negativen Vorzeichen rutsch er nach oben. |
Der dritte Wert: | je größer, je weicher wirkt der Schatten. Dies gestaltet man je nach Farbwahl. |
Der vierte Wert: | die Farbe des Schattens. Dieser kann als Farbename oder mit dem HEX-Code ausgegeben werden. |
Um die Ausgabe in älteren Browserversionen zu sichern, sollten alle CSS-Anweisungen dazu hinterlegt werden:
-webkit-box-shadow: 10px 10px 50px grey; | -moz-box-shadow: 10px 10px 50px grey; | box-shadow: 10px 10px 50px grey;
Es ist nur darauf zu achten, dass der Standardeintrag box-shadow: 10px 10px 50px grey; als letztes erfolgt.
Code für den <HEAD> Bereich
<style typ="text/css">
.Obj171_1 { width: 230px; height: 145px; box-shadow: 10px 20px 10px grey;
-webkit-box-shadow: 10px 20px 10px grey; -moz-box-shadow: 10px 20px 10px grey; }
.Obj171_2 { width: 230px; height: 145px; -webkit-box-shadow: 10px 20px 20px blue;
-moz-box-shadow: 10px 20px 20px blue; box-shadow: 10px 20px 20px blue; }
.Obj171_3 { width: 230px; height: 145px; -webkit-box-shadow: 10px 30px 30px #5B0013;
-moz-box-shadow: 10px 30px 30px #5B0013; box-shadow: 10px 30px 30px #5B0013; }
</style>
Code für den <BODY> Bereich
<div class="Obj171_1">
<img style="width: 230px; height: 145px; border: 0px;" src="wsX5Obj/Obj_IMG/natur_04.jpg" alt="Bild Natur 1">
</div>
<div class="Obj171_2">
<img style="width: 230px; height: 145px; border: 0px;" src="wsX5Obj/Obj_IMG/natur_05.jpg" alt="Bild Natur 2">
</div>
<div class="Obj171_3">
<img style="width: 230px; height: 145px; border: 0px;" src="wsX5Obj/Obj_IMG/natur_06.jpg" alt="Bild Natur 3">
</div>
Feedbacks zu ""
Keine Kommentare gefunden.
Vielen Dank für Dein Feedback.
Bitte Dein Feedback
Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.
Login | Registrierung