Home
www.aconcagua2000.de
Back Reload Home

SR Rahmen um Bilder mit CSS

Rahmen um Bilder lassen sich nicht nur mit Grafikprogrammen erstellen, sondern auch auf einfache Weise mit einer CSS-Formatierung. Unten seht ihr einige Beispiele mit dem jeweils zugehörigen Code darunter. Eine Erklärung zu den einzelnen verwendeten Attributen ist am Seitenende zu finden.

 
<img src="URL" style="border:solid 5px yellow; padding:10px;"> 		 
<img src="URL" style="border:double 10px #ffcc00; padding:10px;">
 
<img src="URL" style="border:inset 10px blue; padding:10px;"> 		 
<img src="URL" style="border:outset 10px blue; padding:10px;">
 
<img src="URL" style="border:dotted 4px #1e90ff; padding:10px;"> 		 
<img src="URL" style="border:dashed 3px #000000; padding:10px;">

   Erklärung der verwendeten Attribute

Am Beispiel style="border:dashed 3px #000000; padding:10px;":

 border-style 

"dashed" ist eine border-style-Definition und steht für "gestrichelt". Weitere Möglichkeiten sind ...

dotted = gepunktet
solid = durchgezogen
double = doppelt durchgezogen
inset = 3D-Effekt
outset = 3D-Effekt

 border-width 

"3px" steht für die   border-width - die Breite des Rahmens (im Beispiel 3 Pixel) - und kann numerisch oder mit "thin", "medium" oder "thick" angegeben werden.

 border-color 

"#000000" definiert die   border-color, die Farbe des Rahmens. Eine Auswahl an Farben ist   hier zu finden.

 padding 

"padding:10px" schliesslich sorgt für den Abstand zwischen Bild und zugehörigem Rahmen, im Beispiel 10 Pixel auf allen Seiten. Mehr dazu   hier.

   Erweitert

Der durch padding zu erzeugende Abstand zwischen Bild und Rahmen kann durch einen   Hintergrund in Form einer Farbe oder eines Hintergrundbilds gefüllt werden:

 
<img src="URL" style="border:solid 5px #6666CC; padding:10px; background:#6699CC;"> 		 
<img src="URL" style="border:double 10px #747474; padding:10px; background:url('Hintergrundbildadresse');">
Shadow