Bilder mit CSS-Schatten - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
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;
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.
Download Button
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.
Bild Natur 1
Bild Natur 2
Bild Natur 3
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>

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt