Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

CSS-Tricks: Grafiken mit doppeltem Rahmen versehen

Posted by sura1 - 5. April 2009

april5

Bookmark and Share

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].

image1

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)

demo2button1

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

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: