CSS für Bildränder verwenden 

Der folgende Text ist ein Gastbeitrag von Volkan Görgülü. Danke Volkan!

Das in diesem Artikel verwendete Bild, Die Einsamkeit des Fischers, stammt von Daniel Cheong. Ich bin auf dieses Bild in einem Artikel auf Smashing Magazine gestoßen.

Normalerweise, wenn wir Bilder mit einem Rahmen versehen, wie Sie im folgenden Beispiel sehen können, sehen die Bilder ansprechender aus. Sie heben sich vom übrigen Inhalt der Seite ab.

Ohne Rahmen

Mit Rahmen

Mit einem "Doppelrahmen"

Wie ich es in den obigen Bildern gemacht habe, können Sie diesen Look ganz einfach mit Bildbearbeitungsprogrammen wie Photoshop, ImageReady oder Fireworks erzielen. Aber denken wir an ein Szenario, in dem Sie das Aussehen Ihrer Website ändern müssen und die vorherige Rahmenfarbe, die Sie um Ihre Bilder verwendet haben, nicht zu Ihrem neuen Design passt. Sie müssen Ihre Bilder einzeln öffnen und diesen Rahmen ersetzen. Wenn Sie 3 oder 4 Bilder haben, dauert das Minuten, aber denken Sie an 50 oder mehr Bilder...

Sie können denselben Effekt ganz einfach mit reinem CSS erzielen und es dauert Sekunden, die Farbe der Rahmen in Zukunft zu ändern.

Wie geht das?

Einfacher dünner Rahmen

img { 
   border:1px solid #021a40;
}

Der "Doppelrahmen"

img {
   padding:1px;
   border:1px solid #021a40;
}

Doppelrahmen mit unterschiedlicher innerer Rahmenfarbe

img {
   padding:1px;
   border:1px solid #021a40;
   background-color:#ff0;
}

Ein weiterer Vorteil dieser Technik

Da wir die Bildqualität für das Web normalerweise verringern (Optimierung), werden Sie beim Zoomen auf Bilder mit Rahmen feststellen, dass die Farbe des Rahmens verzerrt ist. Jetzt verwende ich ein helleres Blau, um Ihnen die Verzerrung deutlich zu zeigen. Der Rahmen des linken Bildes stammt von CSS und der des rechten vom Bild selbst.

BEISPIELSEITE

Wo wir gerade beim Thema Bildränder sind, sehen Sie sich einige der coolen Features an, die CSS3 mit der border-image Eigenschaft zu bieten hat.