Reloj analógico utilizando font-face

PE Analog Clock es una interesante propuesta para la creación de pequeños relojes analógicos utilizando para ello solo CSS3 y font-face.

Estos relojes analógicos funcionan con el elemento HTML <time> , una etiqueta que no es muy utilizada y que sin embargo provee a nuestros documentos de una semántica mucho más solida.+

La compatibilidad con los distintos navegadores es excelente:

• Windows: IE 8 +, Firefox 3.6 +, Safari 4.0 +, Chrome 14.0 + y Opera 11.1 +.
• Mac: Firefox 3.6 +, Safari 4.0 +, Chrome 14.0 + y Opera 11.1 +.
• iOS: iPhone 4S (iOS 5.1) o superior.
• Android: Android 4.0.3 o superior.

Ejemplo de uso:

Uso manual:

<time datetime="2012-03-15 10:36:00">
    <span class="hour-10">
     <span class="minute-36"></span>
    </span> 10:36pm
</time>

Utilizando PHP:

<time datetime="<?php echo date('c') ?>">
    <span class="hour-<?php echo date('H') ?>">
     <span class="minute-<?php echo date('i') ?>"></span>
    </span> <?php echo date('g:ia') ?>
</time>

También funciona con lenguajes de programación del lado del cliente, por ejemplo utilizando el framework jQuery se puede utilizar este recurso perfectamente.

Les recomiendo que descarguen el proyecto completo, en Github hay varias demostraciones online pero desde hace un tiempo el sitio dejo de aceptar el uso de font-face, por lo que toda demostración online es incompleta.

Web: PE Analog Clock