Bilder mit CSS-Schatten - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Besucher Statistik
» 1 Online
» 99 Heute
» 77 Gestern
» 176 Woche
» 1707 Monat
» 18365 Jahr
» 304279 Gesamt
Record: 1144 (01.02.2020)
Gesamt Downloads:
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.

Registrierung

Login


Erstellen Dir ein Konto, damit Deine Kommentare ohne Bestätigung veröffentlicht werden können.


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

          © 2009 - 2021

          Hosting by
          Zurück zum Seiteninhalt