A rendering of Lumia 800 and its icons made in pure CSS3 (opens in new tab)

(tjrus.com)

10 pointsTjRus12y ago4 comments

Lumia 800 and its icons made in pure CSS3. No images, no base64, no SVG, no canvas, just a lot of CSS3 and a little bit of Javascript (with jQuery, of course).

Viewed best with the latest versions of Safari and Chrome in Mac OS X.

4 comments

aroman12y ago

This title is extremely misleading. It is absolutely not made in "pure CSS3". It's very much heavily javascript based: https://github.com/TjRus/Lumia.js/tree/master/js

You should really refer to it as you did in your readme as "imageless".

That said, this is really quite cool. Nice job.

TjRusOP12y ago

I'm not saying that whole Lumia with inretaction done with pure CSS3. Rendering (!) of Lumia and it's icons made in pure CSS (as I write in the title), interactions and few other things - with the help of JS.

dylz12y ago

It's still somewhat misleading. Like things like css3 transitions and page states maybe using :target or hash to keep state for "is phone on" and stuff, vs just using jQuery.

forgottenpaswrd12y ago

So what?

There is not secret to rendering Windows 8 icons.

The secret is rendering it on real time, more than 60 times per second, on limited hardware.

j / k navigate · click thread line to collapse