CSS3-only Icon

iPhone Calendar Icon mit CSS3

Henning über Webdesign

Bilder haben ausgedient – ab jetzt wird alles mit CSS3 gemacht… Jedenfalls ist es im kleinen Rahmen möglich. Mit CSS3 lässt sich z.B. recht ansehenlich das iPhone Calendar Icon nachbilden (Demo) und das alles ohne HTML5 Canvas und JavaScript.

iCal-Icon mit CSS3

HTML Icon Grundgerüst

Das Kalender-Icon besteht aus dem eigentlichen Kalenderblatt und einem Header, in dem der Wochentag angezeigt wird. Das HTML-Markup bleibt also sehr überschaubar. Der künstlerische Part ist wie auch im CSS3-Billard-Post, so wie es sich gehört, in CSS ausgelagert.

<div id="icon">
   <div class="calendar">
      <span class="weekday">Tuesday</span>
      9
   </div>
</div>

Kalendergeschichten

Das Kalenderblatt wird abgerundet mit einem Eck-Radius (border-radius) von 20 Pixeln und mit einem linearen Gradienten in hellem Grau versehen. Danach wird dem Container noch ein Schlagschatten zugewiesen. Einige typografische Einstellungen runden das Erscheinungsbild ab. Dazu gehört z.B. der text-shadow, dessen wahre Bedeutung allerdings erst im Header zur Geltung kommt. Im Kalenderblatt wird text-shadow eigentlich nur verwendet, um den Übergang zwischen Datum und Hintergrund etwas abzumildern.

.calendar {
   width: 128px;
   height: 125px;
   box-shadow: 0 0 4px rgba(0,0,0,0.4);
   -moz-box-shadow: 0 4px 6px rgba(0,0,0,0.8);
   -webkit-box-shadow: 0 4px 6px rgba(0,0,0,0.8);
   background: rgba(238,238,238,1);
   background : -webkit-gradient(linear, left top, left bottombottom, from(rgba(245,245,245,1)), to(rgba(228,228,228,1)));
   background : -moz-linear-gradient(top, rgba(245,245,245,1), rgba(228,228,228,1));
   color: #333;
   text-align: center;
   border: 1px solid #f3f3f3;
   border-radius: 20px;
   -moz-border-radius: 20px;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 88px;
   line-height: 88px;
   text-shadow: 1px -1px 0 rgba(212,212,212,0.8);
}

Mit obigen Code sieht der Korpus des Icons eigentlich schon ganz brauchbar aus… Die Datums-Zahl sieht noch ein wenig verrutscht aus, da noch der Wochentag-Bereich nicht gestaltet ist. Aber dieses Manko wird im nächsten Abschnitt umgehend behoben.

iCal Icon - Zwischenschritt

Wochentag

Auf den Wochentag wird an dieser Stelle besonderes Augenmerk gelegt. Der border-radius wird hier z.B. nicht global zugewiesen, sondern nur der linken und rechten oberen Ecke. Weiterhin soll mit einem Schlagschatten am unteren Ende der Kopfzeile ein leichter 3D-Überlagerungs-Effekt erzeugt werden.

.weekday {
	width: 134px;
	height: 36px;
	margin-left: -3px;
	display: block;
	color: #f6f6f6;
	background: rgba(255,0,0,1);
	background : -webkit-gradient(linear, left top, left bottom, from(rgba(228,167,167,1)), to(rgba(168,52,54,1)));
	background : -moz-linear-gradient(top, rgba(228,167,167,1), rgba(168,52,54,1));
	border-bottom: 3px solid #772524;
	border-radius: 20px 20px 0 0;
	-moz-border-radius: 20px 20px 0 0;
	box-shadow: -1px 4px 8px rgba(0,0,0,0.3);
	-moz-box-shadow: -1px 4px 8px rgba(0,0,0,0.3);
	-webkit-box-shadow: -1px 4px 6px rgba(0,0,0,0.3);	
	font-size: 20px;
	line-height: 34px;
	text-shadow: -1px 0 rgba(0,0,0,0.5) , 0 -1px rgba(0,0,0,0.3),  0 1px rgba(255,255,255,0.5), -1px -1px rgba(0,0,0,0.3);
	letter-spacing: 1px;
}

Die Breite des Headers ist etwas größer als die des Icon-Unterbaus, um den Border inklusive Schatten des Kalenderblatts etwas zu überlagern. Via margin-left wird die Kopfzeile auch noch ein klein wenig nach links versetzt. Der Schlagschatten für den Wochentag-Schriftzug wird nach folgender Syntax angegeben [<color> <length> <length> <length>? oder [<length> <length> <length>? <color>?]. In Nicht-RFC-Sprache bedeutet das soviel wie: x-Abstand, y-Abstand, Stärke des Weichzeichners und Farbe des Schattens. Eine genaue Beschreibung der Syntax findet sich in der W3C-Spezifikation.

Ansonsten ist noch zu erwähnen, dass die vertikale Ausrichtung der Schrift, genau wie beim Kalenderblatt über line-height reguliert wird. Die Laufweite der einzelnen Buchstaben im Wochentag-Schriftzug wird ebenfalls vergrößert, um dem Aussehen des Originals zu entsprechen. Wie bereits oben angemerkt, wurde dem Schriftzug noch text-shadow zugewiesen, der hier im Gegensatz etwas komplexer ausgefallen ist als beim Kalenderblatt. Durch Zuweisung von vier verschiedenen Schlagschatten-Ausprägungen mit unterschiedlicher Deckkraft, wird an dieser Stelle ein inset-Effekt simuliert. Leider verfügt text-shadow nicht über eine direkte inset Anweisung.

Mehr gibt es eigentlich an dieser Stelle nicht mehr zu tun. Das iPhone Kalender Icon ist fertig und sieht auch in Webkit bzw. Mozilla Browsern auch ganz anständig aus. Vielleicht auch bald im IE9 (IE9-Testumgebung) – ich passe dann auch sofort den Post an – versprochen.

Hier gibt’s die Demo

Informationen über den Autor

Henning

...ist ein User Interface und User Experience Designer. Nebenbei Frontend Developer für Web-, Desktop- und mobile Plattformen. Mit mehr als 10 Jahren professioneller Projekterfahrung schreibt er zu den Themen Webdesign, -trends und -programmierung – eben fullstack! Follow @kingfries