CSS: Digitálky a ručičkový budík

Alternativní prohlížeče často zvládají podstatně víc funcionalit a podporují technologické špeky novějších specifikací. První nádhernou ukázkou mohou být efektní rotační hodiny, kterých si však uživatel užije pouze v prohlížeči Google Chrome. Druhý pokus s budíkem je funkční ve všech novějších prohlížečích.

V odkazovaném článku naleznete hodiny dvoje. Krásné čisté HTML bez využití Adobe Flash. Pouze regulerní <div> a <img>. Vše je následně zprovozněno pomocí  { overflow: hidden } <div>  a rotací v JavaScript (pomocí CSS vlastnosti transform ).

Na obrázku samozřejmě nic nevynikne tak, jako v praxi.

Přesuňte se tedy sem: http://joncom.be/code/css-clocks/
(a nezapomeňte – Google Chrome only)

Druhým dnešním tipem je absolutně designově vymazlený budík. Ručičky, odlesky, pozadí, prostě krása pohledět. Pozitivní stránkou věci je i jeho funkčnost napříč dnešními prohlížeči, čímž raketově stoupá použitelnost tohoto kódu.

Funkční ukázku naleznete zde. Článek popisující vývoj pak zde.

Zajímavé a poučné pro výuku.