Snapshot-Karten: Rahmen- und Schatten-Farben ändern

Die Snapshot-Karten haben Rahmen um die Bilder und Schatten um die Karten. Will man die Farben an sein sonstiges Design anpassen, kann man das per "CSS hinzufügen" kommandieren. Bei der Gelegenheit kann man auch weitere Effekte ergänzen, wie etwa runde Ecken um die Bilder und nach innen gerichteten Schatten.

---

Standard mit anderen Farben

Will man den Code nutzen, der standardmäßig gilt und nur die Farben ändern, dann kann man unter Vorlage > Anpassen> Erweitert > CSS hinzufügen das Folgende eintragen und statt FARBE da jeweils seinen gewünschten Farbcode eintragen:

/* - Snapshot - Rahmen um Bilder in Bildkarten - Farbe bestimmt - */
.snapshot .item .thumbnail {
border: 1px solid FARBE;
}
/* - Snapshot - Schatten um Bildkarten - Farbe bestimmt - */
.snapshot .item {
-moz-box-shadow: 0px 1px 3px FARBE;
-webkit-box-shadow: 0px 1px 3px FARBE;
box-shadow: 0px 1px 3px FARBE;
}


Ein Beispiel für weitere Änderungen

Dort sind die Bildrahmen breiter und deren Ecken abgerundet und die Kartenschatten breiter und nach innen gerichtet.

Der Code, mit dem das gemacht wurde:

/* - Snapshot - Rahmen um Bilder in Bildkarten - Farbe bestimmt - */
.snapshot .item .thumbnail {
border: 5px solid #001559;
border-radius: 25px;
}
/* - Snapshot - Schatten um Bildkarten - Farbe bestimmt - */
.snapshot .item {
-moz-box-shadow: 0px 0px 15px #2A3B42 inset;
-webkit-box-shadow: 0px 0px 15px #2A3B42 inset;
box-shadow: 0px 0px 15px #2A3B42 inset;
}


Weiterführende Links

• Extern-Links zu HTML und CSS Web | Mobil

Ute Ziemes, sg.utez.de, 2013-11-08, Adressänderung: 2016-02-11