Analog Clock Icon Font for <time> elements
Decorate <time> elements with a little clock icon that changes according to the time being displayed
GitHub project here:
https://github.com/proevo/PE-Analog-Clock-icon-font
And a sample of what I am talking about:
The Analog Clock icon set allows <time></code> elements to have a visual notation in a simple, progressive way using a @font-face</code> to deliver a custom font for the clock face. The icon is therefore scalable and can be styled with CSS to match most site designs.
The required HTML can be implemented server-side in any application to output the desired icons. Optionally, for users that do not have server-side access, a javascript plug-in can sniff out <time></code> elements and add the HTML necessary for the icon set. Both options are documented in the sample and can be modified to fit specific situations.
The CSS uses :before</code> pseudo elements to place the icons, therefore, there is no extraneous HTML content present when the :before</code> element is not supported. Graceful fallback to the contents of the <time></code> element.
Sample markup:
<div class="timestamp">
<time datetime="2013-02-20 4:09:00">
<span class="hour-4"><span class="minute-09"></span></span>
4:09pm
</time>
</div>
Written by J. Hogue
Related protips
4 Responses
Very nice. Thanks
Awesome tip :D
Superb !
There are open source "fancy" projects out there, now, I noticed. <a href="http://timepiece.inostudio.de">Timepiece.inostudio.de</a> is one with a few fancier clock faces. Not suitable for small sizes, but they are pretty cool still if someone is looking for something to use for a larger display size.