Freitag, 18. Mai 2012
Schönere Bilderrahmen mit CSS
Bilder wirken oft besser, wenn sie umrahmt sind. Das Image-Tag bietet hier ein Attribut namens Border an, aber dieser Rahmen wirkt selten schön.

Einen besseren Rahmen kann man mit CSS wie folgt erzeugen:
CODE:
<img src="/grafik.jpg" style="background-color:#ffffff;padding:5px;border:1px solid black;" height="200" width="150">


Beispiele:

Durch das background-color:#ffffff;padding:5px; wird ein 5 Pixel breites, weisses Passepartout um das Bild erzeugt. Zur Abgrenzung gegen den Hintergrund wird dieses dann noch mit einem 1 Pixel breiten, schwarzen Rand eingefasst. Das Ergebnis sieht dann z.B. so aus:

Generierungszeit: 0.2125 sec