A rendering of Lumia 800 and its icons made in pure CSS3

#1

Post by TjRus » Sat, Sep 21, 2013, 4:12 PM UTC

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.

A rendering of Lumia 800 and its icons made in pure CSS3
tjrus.com

Re: A rendering of Lumia 800 and its icons made in pure CSS3

#2

Post by aroman » Sat, Sep 21, 2013, 4:59 PM UTC

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.

Re: A rendering of Lumia 800 and its icons made in pure CSS3

#3

Post by TjRus » Sat, Sep 21, 2013, 5:16 PM UTC

aroman wrote: post #2

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.

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.

Re: A rendering of Lumia 800 and its icons made in pure CSS3

#4

Post by dylz » Sat, Sep 21, 2013, 5:20 PM UTC

TjRus wrote: post #3

aroman wrote: post #2

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.

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.

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.

Re: A rendering of Lumia 800 and its icons made in pure CSS3

#5

Post by forgottenpaswrd » Sat, Sep 21, 2013, 6:04 PM UTC

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.