Bilder mit CSS-Schatten - Website X5 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;
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>
Feedbacks zu ""

Keine Kommentare gefunden.

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


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 2 Online
            » 11 Heute
            » 105 Gestern
            » 645 Woche
            » 1009 Monat
            » 42223 Jahr
            » 266429 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt