Bilder mit CSS-Schatten - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

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;
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.
Zum Einbau einfach den CSS-Code kopieren und in den HEAD-Bereich <head>....</head>, den HTML-Code in den BODY-Bereich <body>....</body> einfügen und nach eigenen Bedürfnissen anpassen.
Download Button
Um die Ausgabe in älteren Browsern zu sichern, sollten alle 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="border: 0px;" width="230" height="145" src="wsX5Obj/Obj_IMG/natur_04.jpg">
</div>
<div class="Obj171_2">
<img style="border: 0px;" width="230" height="145" src="wsX5Obj/Obj_IMG/natur_05.jpg">
</div>
<div class="Obj171_3">
<img style="border: 0px;" width="230" height="145" src="wsX5Obj/Obj_IMG/natur_06.jpg">
</div>
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2019





Besucher Statistik
» 2 Online
» 94 Heute
» 221 Gestern
» 315 Woche
» 2315 Monat
» 137232 Jahr
» 464988 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt