Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

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

Posted by sura1 - 21. Januar 2009

jan21_128x128

Bookmark and Share

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!

simply_stated
       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!

snapshot
       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!

artgallery
       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!

above_and_below

       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!

shadow_with_image
       Schatten-Grafik: framebox6.jpg
framebox6
       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
   Background-Image: bg2.jpg
bg2
   CSS:
   #box1 {
         width: 436px;
         background-image: url(verkleinert/bg2.jpg) repeat;
         padding: 11px;
         border: 1px solid #000;
    }
gradient13

Ä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

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: