So erstellen Sie eine CSS-Weltuhr

© Internet Magazin

Das Markup für eine einzelne Uhr wird zum Beispiel wie folgt aufgebaut

<div id="weltuhr1" class="weltuhr"><div class="innenrand"><div class="ziffernblatt"><div class="sekundenzeiger"></div><div class="minutenzeiger"></div><div class="stundenzeiger"></div><div class="mitte"></div><ol class="markierungen"><li>1</li><li>2</li><li>3</li><!-- ... für alle 12 Stunden --><li>12</li></ol></div></div>

Die grundlegende Form einer einzelnen Weltuhr, also das metallische Gehäuse mit dem glänzenden Rand, den noch unbewegten Zeigern für Sekunden, Minuten und Stunden, sowie einer einzelnen Zeitmarke auf dem Ziffernblatt, entsteht unter Verwendung dieser CSS-Regeln:

.weltuhr {
position: relative;
display: inline-block;
padding: 25px;
margin: 30px;
background: -webkit-gradient(linear, left 55%, right 45%,
from(#555555), to(#555555), color-stop(50%, #dddddd));
-webkit-box-shadow: 4px 14px 12px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 300px;
}
.innenrand {
padding: 4px;
background: -webkit-gradient(linear, 45% top, 55% bottom,
from(#222222), to(#ffffff), color-stop(30%, #666666),
color-stop(50%, #eeeeee));
-webkit-border-radius: 300px;
}
.ziffernblatt {
position: relative;
width: 200px;
height: 200px;
background: -webkit-gradient(linear, 45% top, 55% bottom,
from(#bbbbbb), to(#ffffff), color-stop(40%, #eeeeee));
-webkit-border-radius: 300px;
}
.sekundenzeiger { /* die Optik */
position: absolute;
left: 49.5%;
height: 58%;
top: 2%;
width: 1%;
background: #ff0000;
z-index: 3;
}
.minutenzeiger { /* die Optik */
position: absolute;
left: 48.5%;
height: 48%;
top: 10%;
width: 3%;
background: #000000;
z-index: 2;
}
.stundenzeiger { /* die Optik */
position: absolute;
left: 48%;
height: 36%;
top: 20%;
width: 4%;
background: #000000;
z-index: 1;
}
.mitte {
position: absolute;
left: 47.5%;
top: 47.5%;
height: 5%;
width: 5%;
background: #333333;
z-index: 4;
-webkit-border-radius: 50px;
}
.markierungen { margin: 0; }
.markierungen li {
margin: 0;
list-style: none;
padding: 0;
position: absolute;
top: 0%;
left: 49%;
width: 1%;
height: 5%;
text-indent: -9999px;
overflow: hidden;
background: #000000;
-webkit-transform-origin: center 1000%;
}

Die Zeiger sowie die Zeitmarken sind auf dem Ziffernblatt absolut positioniert. Noch liegen alle Ziffernmarken auf 12:00 direkt übereinander. Die korrekte Position der elf Zeitmarkierungen zur Einteilung des Ziffernblatts (Stunden 1:00 bis 11:00) lässt sich mit dem :nth-child-Selektor wie folgt ableiten:

.markierungen li:nth-child(2) { -webkit-transform:
rotate(30deg); }
.markierungen li:nth-child(3) { -webkit-transform:
rotate(60deg); }
.markierungen li:nth-child(4) { -webkit-transform:
rotate(90deg); }

und weiter für die Selektoren li:nth-child(5) bis li:nth-child(12) je alle 30 Grad bis 330 Grad:

.markierungen li:nth-child(12) { -webkit-transform:
rotate(330deg); }

Um das noch stillgelegte Uhrwerk zum Leben zu erwecken, bedarf es CSS-Transforms und einer geeigneten Keyframe-Animation. Damit sich die Anzeigevorrichtung für Sekunden, Minuten und Stunden im jeweils richtigen Takt bewegt, wird zwischen dem Sekunden-, Minuten- und Stundenzeiger unterschieden. Der Sekundenzeiger wird wie folgt animiert:

.sekundenzeiger {
-webkit-transform: rotate(282deg);
-webkit-animation: sekundenzeiger 60s cubic-bezier(0, 1,
0, 1) infinite;
-webkit-transform-origin: center 83.33333%;
}
@-webkit-keyframes sekundenzeiger {
0% { -webkit-transform: rotate(282deg); }
1.67% { -webkit-transform: rotate(288deg); }
3.33% { -webkit-transform: rotate(294deg); }
5% { -webkit-transform: rotate(300deg); }
6.67% { -webkit-transform: rotate(306deg); }
8.33% { -webkit-transform: rotate(312deg); }
10% { -webkit-transform: rotate(318deg); }
11.67% { -webkit-transform: rotate(324deg); }
13.33% { -webkit-transform: rotate(330deg); }

und weiter je 1 und 2/3 Prozent (also 15 %, 16.67 %, 18.33 % und so weiter) in 6-Grad-Schritten (also 336deg, 342deg, 348deg und so weiter) bis zu 642deg bei 100 Prozent:

95% { -webkit-transform: rotate(624deg); }
96.67% { -webkit-transform: rotate(630deg); }
98.33% { -webkit-transform: rotate(636deg); }
100% { -webkit-transform: rotate(642deg); }
}

Der Minutenzeiger hört auf diese zwei Regelsätze

.minutenzeiger {
-webkit-transform: rotate(180deg);
-webkit-animation: minutenzeiger 3600s linear infinite;
-webkit-transform-origin: center 83.33333%;
}
@-webkit-keyframes minutenzeiger {
0% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(540deg); }
}

Wer auf der Website mehr als nur eine einzige Weltuhr anbringen möchte, muss den Stundenzeiger jeder einzelnen Zeitzone separat animieren. Im Falle von drei Weltuhren gelingt diese Aufteilung mittels

.stundenzeiger {
-webkit-transform-origin: center 83.33333%;
}
#weltuhr1 .stundenzeiger {
-webkit-transform: rotate(375deg);
-webkit-animation: stundenzeiger1 43200s linear infinite;
}
#weltuhr2 .stundenzeiger {
-webkit-transform: rotate(195deg);
-webkit-animation: stundenzeiger2 43200s linear infinite;
}
#weltuhr3 .stundenzeiger {
-webkit-transform: rotate(615deg);
-webkit-animation: stundenzeiger3 43200s linear infinite;
}

Die Animation der Stundenzeiger der drei Weltuhren erfolgt zum Beispiel unter Angabe der folgenden Keyframes

@-webkit-keyframes stundenzeiger1 {
0% { -webkit-transform: rotate(375deg); }
100% { -webkit-transform: rotate(735deg); }
}
@-webkit-keyframes stundenzeiger2 {
0% { -webkit-transform: rotate(195deg); }
100% { -webkit-transform: rotate(555deg); }
}
@-webkit-keyframes stundenzeiger3 {
0% { -webkit-transform: rotate(615deg); }
100% { -webkit-transform: rotate(975deg); }
}

Falls Sie zu guter Letzt die Weltuhren beschriften möchten, können Sie etwa dieses Markup anhängen:

</div><div class="label">Berlin</div></div>

und das CSS-Stylesheet wie folgt abrunden:

body {
background: -webkit-gradient(linear, center top, center
bottom, from(#ffffff), to(#dddddd));
text-align: center;
font-family: "Gill Sans", Calibri, "Trebuchet MS", sans-
serif;
}
.beschriftung {
font-size: 18px;
text-transform: uppercase;
width: 150px;
margin: 0 29px;
padding: 5px 0;
background: #ffffff;
border: 1px solid #dddddd;
position: absolute;
bottom: -70px;
-webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
}

Damit die tatsächlich angezeigte Uhrzeit mit der aktuellen Uhrzeit der jeweiligen Zeitzone übereinstimmt, können Sie die aktuelle Zeit via PHP auslesen. Ohne PHP haben Sie eine vollkommen lauffähige Uhr in reinem CSS3, nur die angezeigte Uhrzeit kann natürlich nicht stimmen, obwohl sich die drei Zeiger rhythmisch korrekt bewegen.