Bilder mit Rahmen versehen
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Sie wollen ein Bild mit einem Rahmen versehen.
Lösung
Verwenden Sie die Eigenschaft border für das Element img (siehe folgende Abbildung):
img {
width: 300px;
border: 6px double #666;
background: #fff;
padding: 6px;
}
Abbildung: Ein Bild wird mit einem Rahmen versehen.
Diskussion
Wenn Sie das Bild als Link definieren, besteht die Möglichkeit, die Präsentation mit der Eigenschaft border noch komplexer zu gestalten. Durch die Verwendung der Pseudoklasse :hover kann der Rahmenstil verändert werden, wenn der Mauszeiger über das Bild bewegt wird (siehe nächste Abbildung):
img {
width: 30px;
border: 4px double #666;
background: #fff;
padding: 4px;
}
a:hover img {
border-style: solid;
background: #999;
}Der CSS-Rahmen verhält sich wie ein richtiger Bilderrahmen. Gleichzeitig können Stildefinitionen für den Rahmen dynamisch geändert werden, wenn der Mauszeiger über das Bild bewegt wird. Zudem sorgt der Innenabstand von 4 Pixeln für das img-Element für die Möglichkeit weiterer Farbänderungen innerhalb des Rahmens. Auf diese Weise lassen sich schon mit zwei Deklarationsblöcken sehr reichhaltige visuelle Effekte erzielen.
Abbildung: Durch die Kombination von Definitionen für die Hintergrundfarbe und Rahmen lassen sich interessante Rollover-Effekte erzielen.
Siehe auch
Das Rezept Standardmäßig für Bilder verwendete Rahmen entfernen zum Entfernen der Rahmen von Bildern.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln