CSS/HTML-Übung: 6 Wege, wie Sie Grafiken mit Rahmen versehen können

CSS/HTML-Übung:

6 Wege, wie Sie Bilder mit Rahmen versehen können

Auf der Webseite 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 für Foto-Galerien gestalten können.

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.

Beispiel ansehen: [hier] oder Grafik anklicken!

       CSS:

       #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 Nr. 1 – mit folgendem Unterschied: padding-bottom individuell anpassen und schon ergibt sich der „Polariod-Look“!

Beispiel ansehen: [hier] oder Grafik anklicken!

       CSS:

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

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.

Beispiel ansehen: [hier] oder Grafik anklicken!

       CSS:

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

4. Above And Below / Left And Right

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

Beispiel ansehen: [hier] oder Grafik anklicken!

       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

Hier kommt als Hintergrund eine Schatten-Grafik zum Einsatz.

Beispiel ansehen: [hier] oder Grafik anklicken!

       Schatten-Grafik: framebox6.jpg

       CSS:

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

6. Einsatz einer Hintergrundgrafik

Statt einer Hintergrundfarbe habe ich hier eine Hintergrund-Grafik (background.jpg) eingebaut.

Beispiel ansehen: [hier] oder Grafik anklicken!

   Background-Image: bg2.jpg

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

Ähnliche Artikel:

CSS-Tricks: Div-Boxen mit runden Ecken (7 Variationen)
HTML/CSS-Grundlagen: 3 div-Boxen im Fluss (Flow)
CSS Float: Schwebende Boxen (Theorie und Praxis)
CSS Sidebar mit runden Boxen
Styling Blockquotes – Zitate mit CSS gestalten
HTML/CSS-Grundlagen: Unterschied zwischen relativer und absoluter Positionierung
HTML/CSS-Übung: 5 Beispiele, wie Sie ungeordnete Listen formatieren
CSS-Übung: Initial gestalten (DropCap)
CSS-Liste mit grafischen Aufzählungszeichen
CSS-Listen mit Sonderzeichen
Formatierung von Überschriften mit CSS
Formatierung von Überschriften mit CSS (Teil 2)
CSS-Beispiele: Blockquote (2x), Textfeld, Hinweisboxen