04.02.2008

Bilderrahmen mit CSS

Recht einfach, aber dennoch ansprechend lassen sich Bilderrahmen mit CSS gestalten. In wenigen Schritten soll dieses Basisbild einen dekorativen Rahmen erhalten. Zwecks besserer Verdeutlichung wurde es in einen Div mit zugewiesener Hintergrundfarbe gesetzt:

Knoblauch

Zunächst erhält das Bild einen weißen Rand mit 5px Breite. Wir verwenden hierzu im Hinblick auf den folgenden Schritt jedoch keine Border-Angabe, sondern einen Innenabstand (padding) kombiniert mit weißem Hintergrund:

img
{
padding: 5px;
background: #fff;
}

Beachte:
Werden die Style-Angaben für "img" definiert, schlägt dies auf sämtliche Grafiken durch.
Sollen nur bestimmte Bilder einen speziellen Rahmen erhalten, kann dies über die Style-Angaben im HTML-Code erfolgen, z.B. <img style="padding: 5px; background: #fff;" src=...> oder über eine spezielle CSS-Klasse.

Je nach Geschmack und Motiv können natürlich auch andere Farben gewählt werden. Das Ergebnis sieht schon etwas ansprechender aus:

Knoblauch

Versuchen wir mit einem "Schatten" noch etwas Perspektive zu erreichen, indem wir dem Bild einen unteren und rechten Rand mit unterschiedlichen Grautönen zuweisen:

img
{
padding: 5px;
background: #fff;
border-bottom: 2px solid #5C5C5C;
border-right: 2px solid #474747;
}

Knoblauch

Oder:

img
{
padding: 5px;
background: #fff;
border-bottom: 2px solid #474747;
border-right: 2px solid #474747;
border-top: 1px solid #000;
border-left: 1px solid #000;
}

Knoblauch

Das sieht doch schon ganz komfortabel aus. Ihr könnt auch einen Gesamtrahmen verwenden und mit Farben oder Rahmenstärken etwas experimentieren:

img
{
padding: 10px;
background: #EEF3E2;
border: 3px solid #CDAD00;
}

Knoblauch

nach oben