Tutorial: Kalender - Datebox in CSS3, ohne Grafik

Wundervolle Sachen sind mit CSS3 möglich! Ganz ohne Grafik ist diese Datumsanzeige entstanden, die auch hier im Blog Verwendung findet.

Das HTML-Gerüst ist ganz simpel:

<div class="datebox">
   <div class="dateboxhead">Mai 2011</div>
   <div class="dateboxdays">20</div>
   <div class="dateboxday">Freitag</div>
</div>

Als erstes definieren wir die äußere Box.

Die neue CSS-Eigenschaft box-shadow ist folgendermaßen aufgebaut:

Die erste Zahl definiert den horizontalen Abstand, eine positive Zahl lagert den Schatten nach links, eine negative nach rechts.

Die zweite Zahl definiert den vertikalen Abstand, eine positive Zahl lagert den Schatten nach unten, eine negative nach oben.

Optional ist die dritte Variable, die den Verblassungseffekt (Blur) steuert, je höher der Wert, umso mehr verblasst der Schatten.

Der ebenfalls optionale vierte Wert bestimmt die Entfernung (Spread), ist er positiv, strahlt der Schatten in jede Richtung aus, eine negative Zahl lässt den Schatten nach innen fallen.

.datebox {
         width:86px;
         height:94px;
         text-align:center;
         box-shadow:4px 4px 4px #999; /* Schatten der Box: links unten blur*/
         border-left:1px solid #ccc; 
         border-right:1px solid #ccc;
}

Danach gehts an den farbigen Kopfbereich. Der schicke Farbverlauf stammt übrigens vom Ultimate CSS Gradient Generator , ein sehr nützliches Tool. Das Ringbuch basteln wir uns durch einen ganz simplen Trick: eine gepunktete Linie.

.dateboxhead {
        font-family:sans-serif;
        font-weight:bold;
        color:#ddd;
        padding:3px;
        border:1px solid #23538a;
        box-shadow:0px 2px 2px #666; /* Schatten des Headers unten */
        text-shadow: 0px 1px 1px #333; /* Gravur  */
        border-top:3px dotted #ccc; /* Ringbuch-Effekt*/
}

Hier ein kleines Demo und der komplette Source

(getestet bisher nur in Firefox 4.0, Chrome 11)