 Ränder Rahmen und Randfarben für Grafiken mit CSS
Die Darstellung der Ränder werden bei HTML-Anweisungen über ein Attribut in den IMG-Tags festgelegt. Für die meisten Seitenelemente, also auch für Grafiken, können Räder aber auch mit CSS-Anweisungen formatiert werden. Sie nehmen Einfluss auf Farbe, Breite und Typ.
|
|
Ränder für Grafiken mit CSS formatieren
Ich möchte hier über Randfarben von Images sprechen, die nicht als Verweis (Link) dienen. In diesem Beispiel wird zunächst einmal die Farbe des Bildrandes mittels CSS bestimmt, später die Breite oder der Randtyp.
 Problembehandlung - Ränder von Grafik-Verweisen
Die Darstellung eines Bildrandes und auch dessen Farbe kann eine wichtige Rolle beim subjektiven Empfinden für die Billianz und 'Schönheit' einer Darstellung haben.
Rand mit HTML
Sie haben eine Grafik mit dem <img>-Tag in Ihr Dokument eingefügt. Daas <img>-Tag kann das Attribut 'border' haben. Damit könnte man den Rand ausschalten (Wert=0) oder die Randbreite (Wert= Breite in Pixel) festlegen.
<img src="bild.jpg" width="42" height="42" border="1" alt="Text">
Die Breite des Randes wird mit '1' oder einem größeren Wert festgelegt. Zum Beispiel für einen 5 Pixel breiten Rand mit border="5" . Die übliche Randfarbe für Grafiken mit eingeschaltetem Rand ist in den meisten Browsern schwarz!
Image-Tag, Grafik ohne Rand - (Rand = 0 Pixel)
<img src="bild.jpg" width="42" height="42" border="0" alt="Text">
Ergebnis:
Image-Tag, Grafik mit Rand - (Rand = 1 Pixel)
Die Randfarbe wird vom Browser bestimmt Standardfarbe (browserdefiniert)
<img src="bild.jpg" width="42" height="42" border="1" alt="Text">
Ergebnis:
Rand(farbe) mit CSS formatieren
1 Formatierung der Farbe mit CSS-Klasse
CSS-Anweisungen im Head-Bereich:
Hier wurden 5 verschiedene CSS-Klassen festgelegt, die es ermöglichen, 5 unterschiedliche Randfarben durch Einbindung der betreffenden CSS-Klassen festzulegen.
<style type="text/css">
<!--
.rand01 {border-color: #808080;} /* grau */
.rand02 {border-color: #0000FF;} /* blau */
.rand03 {border-color: #00AD66;} /* grün */
.rand04 {border-color: #FF8450;} /* orange */
.rand05 {border-color: #5F5F5F;} /* dgrau */
-->
</style>
Image-Tag mit CSS-Klasse:
<img class="rand01" src="bild.jpg" ... border="5" alt="Text">
Ergebnis:
Die Randbreite wurde im Image-Tag bestimmt. Da ich die Randbreite nicht in der CSS-Klasse festgelegt habe, kann ich jede Unterklasse für unterschiedlich breite Ränder einsetzen.
Zur Anpassung folgende Änderungen:
| Element |
hier im Beispiel |
ersetzen mit |
| Klassenname |
.rand01 |
ihre Bezeichnung |
| Farbangabe |
#808080 |
Farbwert in HEX oder Farbname |
|
2 Formatierung der Ränder mit CSS-Klasse
CSS-Anweisungen im Head-Bereich:
<style type="text/css">
<!--
.rand06 {border: 2px solid #9000E0;} /* violett 2px */
.rand07 {border: 2px solid #0000FF;} /* blau 2px */
.rand08 {border: 2px solid #DF0000;} /* rot 2px */
-->
</style>
Image-Tag mit CSS-Klasse:
<img class="rand06" src="bild.jpg" ... border="0" alt="Text">
Ergebnis:
3 Formatierung mit CSS-Inline Anweisungen
Hier werden nun auch Randtyp und Breite bestimmt.
<img style="border:5px solid #0080FF" src="bild.jpg" ... border="0" alt="Text">
<img style="border:12px solid #E06000" src="bild.jpg" ... border="0" alt="Text">
<img style="border:12px ridge #00C070" src="bild.jpg" ... border="0" alt="Text">
<img style="border:12px double #4F4F4F" src="bild.jpg" ... border="0" alt="Text">
Ergebnise:
Querverweis Bilderrahmen mit CSS
c Kein Rand? Das geht natürlich auch.
<img style="border:none" src="bild.jpg" ... border="0" alt="Text">
.. und da bleibt noch viel Raum für 'Spielkinder' ...
Siehe Beispiel rechts.
Unten:
Verspielt, kitschig, einsetzbar? Die Entscheidung liegt bei Ihnen. CSS-Randformatierungen mit Hintergrundgrafiken. Dazu ist eine Beispielseite in Arbeit. 2 Demos:
|
|
| 
Home • Bilder • CSS • Bildrand formatieren
Quellcode
