CSS für Anfänger: Bilderrahmen um Grafiken mit CSS

Mit CSS schöne Bilderrahmen um Grafiken gestalten

Mit CSS schöne Bilderrahmen um Grafiken gestalten

Auf der Webseite von The Web Squeeze gibt es ein interessantes Tutorial, welches sich mit dem Einsatz der CSS-Eigenschaften border und background beschäftigt, um schöne und ansprechende Bilderrahmen um Grafiken/Bilder erstellen zu können.

Ich habe mir die einzelnen Punkte des Artikels genauer angesehen und möchte Ihnen die meiner Meinung nach besten 6 Beispiele näher vorstellen. Ich habe die Vorlagen mit meinen eigenen Grafiken ausgestattet und die CSS- und HTML-Formatierungen an meine Beispiele angepasst.

Alle verwendeten Bilder/Kunstwerke habe ich selber gemalt/erstellt. Sie können diese neben meinen anderen Kunstwerken in meinem Webalbum auf Google Picasa ansehen.

Fertige Beispiele Nr. 1 bis Nr. 6 ansehen:

1. Einfacher Rahmen mit Hintergrund-Farbe

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

Einfacher Rahmen mit Hintergrund-Farbe

Demo ansehen

CSS:

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

2. Polaroid-Look

Wollen Sie, dass Ihre Bilder wie Polaroids aussehen, dann wenden Sie dieses Beispiel an. Es ist praktisch identisch mit Beispiel 1, es gibt nur einen gravierenden Unterschied:

Die CSS-Anweisung padding-bottom wird individuell angepasst und schon ergibt sich der „Polariod-Look“!

Polaroid-Look.jpg

Demo ansehen

CSS:

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

3. Art Gallery

Der doppelte Rahmen und die Hintergrund-Farbe lassen die Bilder so erscheinen, als würden sie in einer Art Gallery hängen.

Art Gallery.jpg

Demo ansehen

CSS:

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

4. Rahmen Oben und Unten / Links und Rechts

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

Rahmen Oben und Unten / Links und Rechts

Demo ansehen

CSS (Rahmen oben und unten):

#box1 { width: 350px;
        margin: 20px auto;
        background-color: #f8fbf0;
        border-top: 4px double #e1a60a;
        border-bottom: 4px double #e1a60a;
        padding: 8px 0px;
      }

CSS (Rahmen rechts und links):

#box2 { width: 350px;
        margin: 20px auto;
        background-color: #f8fbf0;
        border-right: 4px double #0020ff;
        border-left: 4px double #0020ff;
        padding: 8px 0px;
      }

5. Bilder mit Schatten

In Beispiel Nummer 5 wird als Hintergrund eine Schatten-Grafik (framebox6.jpg) verwendet. In diese wird dann das eigentliche Bild eingebaut.

Bilder mit Schatten.jpg

Demo ansehen

CSS:

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

6. Einsatz einer Hintergrundgrafik

Hier wird statt einer Hintergrundfarbe eine Hintergrund-Grafik (bg2.jpg) eingebaut.

Einsatz einer Hintergrundgrafik

Demo ansehen

CSS:

#box1 { width: 436px;
        padding: 11px;
        background-image: url(verkleinert/bg2.jpg) repeat;
        border: 1px solid #000;
      }
Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *