CSS-Tricks: Grafiken mit doppeltem Rahmen versehen

Wie Sie mit CSS doppelte Rahmen für Grafiken erstellen

In meinem heutigen Artikel möchte ich Ihnen zeigen, wie Sie mit CSS doppelte Rahmen für Bilder/Grafiken erstellen können.

Hier meine 3 Beispiele ansehen

Anleitung:

Vielleicht denken Sie bei doppelten Bilderrahmen daran, die CSS-Anweisung [border-style: double] einzusetzen. Ich würde Ihnen vom Gebrauch dieses CSS-Befehls abraten, da dieser nur sehr schwer zu kontrollieren ist.

Stellen Sie sich eine Situation vor, wo Sie für eine Grafik einen äußeren Rahmen mit 3px und der Farbe ‘Grün’ und einen inneren Rahmen mit 1px und der Farbe ‘Gelb’ festlegen möchten. Mit [border-style:double] können Sie dies nicht bewerkstelligen.

Der Trick:

Um dies doch zu realisieren, verwende ich für den äußeren Rahmen den CSS-Befehl [border]. Der innere Rahmen wird nur vorgetäuscht und setzt sich zusammen aus den CSS-Anweisungen [background] und [padding].

Zuerst bekommt das Bild einen Rahmen von 2px

img {
        border:2px solid #72a143;
}

Wenn man nun für die Grafik ein Padding von 1px einsetzt und mit der Hintergrund-Farbe ‘Gelb’ ergänzt,

img {
        border:2px solid #72a143;
        padding:1px;
        background:#ffeda5;
}

erhält das Bild einen „zusätzlichen Rahmen“ innerhalb des tatsächlichen Rahmens.

In meinen 3 Beispielen verwenden ich einmal die Rahmen-Farbe ‘Grün’, einmal die Farbe ‘Blau’; im 3. Beispiel wird ein ‘Schatten’ für die Grafik vorgetäuscht.

HTML-Quellcode:

<p><a href="#"><img class="image1" src="image.jpg" alt="image" /></a></p>
<p><a href="#"><img class="image2" src="image.jpg" alt="image" /></a></p>
<p><a href="#"><img class="image3" src="image.jpg" alt="image" /></a></p>

CSS:

.image1 {
border:2px solid #72a143;
padding:1px;
background:#ffeda5;
}
.image2 {
border:2px solid #0055c2;
padding:1px;
background:#fff;
}
.image3 {
border:2px solid #eee;
padding:2px;
background:#ccc;
}

Fertiges Beispiel: Zip_Datei ( 16,8 KB)

Den englischsprachigen Original-Artikel zu diesem Tutorial finden Sie unter http://cssglobe.com/post/1330/custom-double-solid-borders-for-images.

Ähnliche Artikel:
CSS/HTML-Übung: 6 Wege, wie Sie Grafiken mit Rahmen versehen können
Tricks mit CSS-Rahmen von Chris Coyier
Bildeffekte mit CSS-Eigenschaft “background-attachment:fixed”
CSS-Tipps und Tricks: Abschnitte wie mit einem Textmarker markieren
Vertikal ausdehnbare CSS Note Box – Vertically Expandable CSS Note Box
Hovereffeke mit CSS-Sprites einfach und leicht erklärt
CSSplay: Inline links – block styling
3D-Wirkung mit CSS: Schatteneffekte für Fotos und Grafiken