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
border-radius,
box,
box-shadow,
glas,
rgba,
transparenz verschlagwortet. Setze ein Lesezeichen auf den
Permalink.
6 Antworten auf 10 praktische CSS3 DIV Boxen Designs