CSS-Tricks: Wie Sie doppelte Rahmen für Bilder/Grafiken erstellen können

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

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

Fertige Beispiele ansehen | Download Beispieldateien (16,8 KB)

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 mit CSS einen Rahmen von 2px

1
2
3

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

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

1
2
3
4
5

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

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

Anleitung für Beispiel Nummer 1 – Beispiel Nummer 3

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.

Vorstellung Beispiel 1 – Rahmen Grün:

HTML-Quellcode:

1

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

CSS:

1
2
3
4
5

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

Vorstellung Beispiel 2 – Rahmen Blau:

HTML-Quellcode:

1

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

CSS:

1
2
3
4
5

.image2{
        border:2px solid #0055c2;
        padding:1px;
        background:#fff;
}

Vorstellung Beispiel 3 – Vorgetäuschter Schatten

HTML-Quellcode:

1

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

CSS:

1
2
3
4
5

.image3{
        border:2px solid #eee;
        padding:2px;
        background:#ccc;
}

Fertige Beispiele ansehen | Download Beispieldateien (16,8 KB)

Ähnliche Artikel:

CSS-Tricks: Bereits besuchte Links mit sogenannten Checkmarks extra kennzeichnen
CSS-Tricks: Listen mit Sonderzeichen
CSS-Tricks: Listen mit grafischen Aufzählungszeichen
Wie Sie mit CSS sogenannte “Spazierende Links” erstellen können
5 Beispiele, wie Sie ungeordnete Listen formatieren können

Tags: background-image, Bilderrahmen, Code, CSS, CSS-Rahmen, CSS-Tricks, cssglobe, doppelte Rahmen um Grafiken, double-border, HTML, span, Tutorial