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 um ein Bild gelegt 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>
.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.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 1 Online
» 68 Heute
» 387 Gestern
» 68 Woche
» 9047 Monat
» 21313 Jahr
» 349069 Gesamt
Record: 1420 (10.04.2014)
Gesamt Downloads:
Zurück zum Seiteninhalt