10 praktische CSS3 DIV Boxen Designs

Gutes Design lebt von den Details. Schöne Headerbilder sind toll, aber gefällige Strukturierung gerade auch des Contents erst macht den Unterschied zwischen einer amateurhaften und einer professionellen Website aus.

Wir stellen hier eine Reihe von Boxen vor, die gänzlich ohne zusätzliche Grafiken auskommen, sondern lediglich durch CSS3 formatiert sind. Das spart nicht nur Datenvolumen sondern dem Programmierer auch Zeit und Nerven.

Übrigens kann mit CSS3 nicht nur eine größere Natürlichkeit und Plastizität durch den Einsatz von Schatten erreicht werden, sondern auch Farbwerte mit Transparenz. Durch die Auszeichnung mittels „rgba“ (rot, grün, blau, alphakanal) werden Schatten oder auch die Füllfarben der Boxen durchscheinend und wirken damit insbesondere auf Bildern oder strukturierten Hintergründen sehr „echt“.

CSS3 Box CSS3 Code

Box “Basic” (Google)

Boxen sollen sich dezent vom übrigen Text abheben. Dezenter geht
es nicht.

.basic {
background: #f5f5f5;
border: 1px solid #e5e5e5;
}

Box “Whitebordered”

Schöne aufgeräumte Box die durch den weißen Rahmen etwas Edles
hat. Der zweite Rahmen ist mit dem CSS3 Attribut box-shadow erzeugt.

.whitebordered {
      background: #eee;
      border: 4px solid white;
      box-shadow: 0 0 1px rgba(0,0,0, .4);
    }

Gradientbox

Dezente Farbverläufe sehen natürlich aus, weil in der Wahrnehmung
aufgrund des Lichteinfalles keine Fläche eine ganz einheitliche
Farbe hat, sondern immer einen Schattierung.


.gradient {
background: #eee;
border: 1px solid #DDD;
background: -moz-linear-gradient(top, #EEE, #FFF);    
background: -webkit-linear-gradient(top, #eee, #fff);
background: -ms-linear-gradient(top, #eee, #fff);
background: -o-linear-gradient(top, #eee, #fff);
box-shadow: 1px 2px 4px rgba(0,0,0, .2);
}
      

Abgefast

Plastizität ist gefährlich: wir alle kennen Designs mit meterdicken
Kanten ringsherum die nichts zur Sache tun.

Hier ist nur eine ganz dezente Fase angedeutet

  
    background: #DDD;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-top: 1px solid #EEE;
  border-left: 1px solid #EEE;
  border-right: 1px solid #AAA;
  border-bottom: 1px solid #AAA;  

Schlagschatten

Klar und geradlinig. Nichts für Ecken-Rund-Lutscher…

.hardShade{
background: #f5f5f5;
border: 1px solid #DDD;
box-shadow: 3px 3px 0px rgba(0,0,0, .2);
}

Apple Box

Ein Klassiker mit genau der richtigen Eckenrundung und CSS3 Schatten

.apple{
background: #f5f5f5;
border: 1px solid #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
}

CSS3 Glas

CSS3 sei Dank: Schatten nicht nur nach außen, sondern auch nach innen. Schön und durchscheinend.

.glas{
-moz-box-shadow: inset 0 0 15px 5px #DDD;
-webkit-box-shadow: inset 0 0 15px 5px #DDDDE5;
box-shadow: inset 0 0 15px 5px #DDD;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
}

Transparentes Glas

Farberwerte mit rgba-Angabe lassen Hintergrund durchscheinen

.transparentesGlas{
background-color:  rgba(255,255,255, .9);  
-moz-box-shadow: inset 0 0 15px 5px rgba(200,200,200, .9);
-webkit-box-shadow: inset 0 0 15px 5px rgba(200,200,200, .9);
box-shadow: inset 0 0 15px 5px rgba(200,200,200, .9);
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
}

Hinweis

Ein Hinweis darf auch mal etwas Farbe enthalten.

.hinweis {
    background-color: #FDFDEF;
    border: 1px solid #EBE9C5;
    border-radius: 4px ;
}

Alright !

Manchmal klappt auch was. Also allem im grünen Bereich.

.alright {
    background-color: #8cff80;
    border: 1px solid #3dcf2d;
    border-radius: 4px ;
}

Verwandte Artikel DIV Boxen Design mit CSS3

Und wer sich das ganze als Referenz behalten mag: bookmarken, sharen, nutzen!

Dieser Beitrag wurde unter CSS3 abgelegt und mit , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

6 Antworten auf 10 praktische CSS3 DIV Boxen Designs

  1. Atomaffe sagt:

    Vielen Dank für den Beitrag, hat mir sehr geholfen.

  2. Maggie sagt:

    Danke, endlich mal konkrete und moderne Beispiele für CSS3 Boxen mit Schatten!

  3. scater61 sagt:

    Danke für den Beitrag, ist sehr hilfreich!

  4. demeter sagt:

    Leider nicht im IE

  5. demeter sagt:

    Ich würde die whiteboarder eher so machen:
    .whitebordered {
    background: #eee;
    border: 4px solid white;
    /* box-shadow: 0 0 1px rgba(0,0,0, .4);*/
    outline:1px solid #ff0000;
    }

    • admin sagt:

      stimmt! auch mit outline lassen sich „Ränder um den Rand“ erzeugen. Wäre in diesem Falle evtl. praktischer – hier war es mir jedoch wichtiger auf die Vielseitigkeit des box-shadows hinzudeuten, der nicht nur als Schatten, sondern auch als Rand und Glanz nach außen verwendet werden kann.

Schreib einen Kommentar

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