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

Schreibe einen Kommentar zu demeter Antworten abbrechen

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