Angst auf der Osterinsel

Gestaltung von Bilderrahmen mit CSS

Auf der Webseite http://www.thewebsqueeze.com habe ich einige interessante Beispiele gefunden, wie Sie mit dem Einsatz der CSS-Eigenschaften border und background schöne und ansprechende Bilderrahmen gestalten können.

Ich möchte Ihnen in den folgenden 6 Beispielen zeigen, wie Sie Grafiken mit Rahmen versehen können. Alle verwendeten Bilder habe ich selber gemalt. Sie können diese neben meinen anderen Kunstwerken in meinem Webalbum picasaweb/sura1119 ansehen.

Download fertige Beispiele (271 KB Zip-Datei)

1.Einfacher Rahmen mit Hintergrund-Farbe

Dies ist die einfachste Variante – sieht aber edel aus. Der Rahmen in der Breite von 1px hat ein padding von 5px und eine Hintergrund-Farbe.

[Fertiges Beispiel ansehen: Grafik anklicken!]

CSS

1
2
3
4
5

#box1 { width: 409px;
        background-color: #efeecb;
        padding: 5px;
        border: 1px solid #4c3c1b;
      }

2. Polaroid-Look

Wenn Sie möchten, dass Ihre Bilder wie Polaroids aussehen, wenden Sie dieses Beispiel an. Es ist praktisch gleich aufgebaut wie Beispiel 1, es gibt nur folgenden Unterschied:

Passen Sie die CSS-Anweisung padding-bottom individuell an und schon ergibt sich der „Polariod-Look“!

[Fertiges Beispiel ansehen: Grafik anklicken!]

CSS

1
2
3
4
5

#box1 { width: 315px;
        border: 1px solid #666;
        background-color: #efeecb;
        padding: 10px 10px 40px 10px;
      }

3. Art Gallery

Durch den doppelten Rahmen und die Hintergrund-Farbe sehen die Bilder aus, als würden sie in einer Art Gallery hängen.

[Fertiges Beispiel ansehen: Grafik anklicken!]

CSS

1
2
3
4
5

#box1 { width: 325px;
        border-style: double;
        background-color: #efeecb;
        padding: 16px;
      }

4. Rahmen Oben und Unten / Linker und rechter Rahmen

Doppelter Rahmen oben und unten (als Alternative rechts und links). Probieren Sie beide Varianten aus und spielen Sie mit den Rahmenfarben.

[Fertiges Beispiel ansehen: Grafik anklicken!]

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/* --- CSS (Rahmen oben und unten): --- */
#box1 { width: 350px;
        background-color: #f8fbf0;
        border-top-width: 4px;
        border-bottom-width: 4px;
        border-top-style: double;
        border-bottom-style: double;
        border-top-color: #E1A60A;
        border-bottom-color: #E1A60A;
        padding: 8px 0px;
      }
 
/* --- CSS (Rahmen links und rechts): --- */
#box2 { width: 350px;
        background-color: #f8fbf0;
        border-left-width: 4px;
        border-right-width: 4px;
        border-left-style: double;
        border-right-style: double;
        border-left-color: #0020ff;
        border-right-color: #0020ff;
        padding: 0px 8px;
      }

5. Bilder mit Schatten

In Beispiel Nummer 5 kommt als Hintergrund die untenstehende Schatten-Grafik [framebox6.jpg] zum Einsatz.

Über bzw. in diese Schattengrafik wird danach das eigentliche Bild eingefügt.

[Fertiges Beispiel ansehen: Grafik anklicken!]

CSS

1
2
3
4
5

#box1 { width: 221px;
        background-image: url(verkleinert/framebox6.jpg);
        padding: 17px;
        border: 1px solid #ddd;
      }

6. Einsatz einer Hintergrundgrafik

Statt einer Hintergrundfarbe habe ich in Beispiel Nummer 6 eine Hintergrund-Grafik (bg2.jpg) eingebaut.

[Fertiges Beispiel ansehen: Grafik anklicken!]

CSS

1
2
3
4
5

#box1 { width: 436px;
        padding: 11px;
        background-image: url(verkleinert/bg2.jpg) repeat;
        border: 1px solid #000;
      }

Download fertige Beispiele (271 KB Zip-Datei)

Quelle: { stylish & co }

Ähnliche Artikel:

Wie Sie eine Bildergalerie nach Nummern nur mit CSS erstellen
Wie Sie einen animierten Fortschrittsbalken mit CSS erstellen
CSS-Tricks: Wie Sie doppelte Rahmen für Bilder/Grafiken erstellen können
CSS Tricks mit Inner Border Images (Rahmen um Grafiken) von Chris Coyier
Zitate mit CSS gestalten – Styling Blockquotes

Tags: Bilderrahmen mit CSS, border, CSS, CSS-Trick, Grafik, image, padding, Stylesheet