 Bilderrahmen durch Tabellenränder
Sie möchten einem Foto oder einer Illustration einen besonderen Rahmen geben. Das ist mit HTML oder nun auch mit CSS umsetzbar. Beide Möglichkeiten erkläre ich hier anhand von Beispielen.
|
|
Rahmen mit HTML- oder CSS-Technik
1) Rahmen mittels HTML-Anweisungen
Hier wird nicht der Befehl "bordercolor" für Tabellen verwendet weil einige ältere Browser das nicht verstehen würden.
5 Tabellen mit unterschiedlicher Hintergrundfarbe ergeben eine tollen Rahmen.
| 
|
|
2) Bilderrahmen mit CSS
Natürlich gibt es die Möglichkeit mit CSS farbige Rahmen zu erstellen. Dazu notiert man eine Tabelle (um das Bild herum): Die einzige Tabellenzelle beinhaltet das Image.
Mit cellpadding wird der Abstand des Rahmens zum Bild festgelegt. Mit Style-Angaben für den Tabellenrand Farbe und Form des Rahmens festgelegt.
Im <table>-Tag:
<table style="border-width:10px; border-style:double; border-color:#FF7300;" ...
.. eigentlich nicht sehr wirtschaftlich. Besser wäre
<table style="border:10px double #FF7300;" ...
Oder Sie notieren die Style-Angaben gleich (inline) im Image-Tag:
<img style="border:10px double #FF7300;" ...
border-styles:
groove = 3D-Effekt.
ridge = 3D-Effekt.
inset = 3D-Effekt.
outset = 3D-Effekt
(nicht alle 3D Effekte sind geeignet für sehr helle Farben)
dotted = gepunktet.
dashed = gestrichelt.
solid = durchgezogen.
double = doppelt durchgezogen.
 Problembehandlung - Ränder von Grafik-Verweisen
Ränder + Rahmen mit CSS formatieren
Ränder für Grafiken mit CSS formatieren
Grafik optisch vergrößern Ränder mit CSS formatieren
Seitenelemente mit Rand - CSS formatiert
| 
Home • HTML • CSS • Bilderrahmen mit CSS
Quellcode
