4 ms·

An iPhone, drawn entirely with CSS3

39 points by grinich 16y ago

w1ntermute 16y ago
This project will only display correctly on a webkit browser Can we honestly say this is any better than "this site will only display correctly on IE"? Even if they're using open standards, it just doesn't seem right to be incompatible with 90% of browsers. Is there any practical value of these demonstrations of CSS prowess to HN?
- sjs 16y ago
  When the standards are widely implemented those who are already familiar with them will have a head start. Unless some people push things forward they will forever stay the same. We don't all have to move in lock-step, that kind of thinking leads to watered down systems and is a recipe for stagnation. There's also graceful degradation and progressive enhancement, where you can serve the best supported content to each client based on their capabilities. So you can use the new shiny stuff if supported but nobody is left out in the cold entirely. HTML5 video is a good example of this. One last point. Other browser devs may see these demos and think "hey that's cool! we should be able to do that too", leading to quicker uptake of new standards.
  - sprout 16y ago
    Is it really going to kill them to add -moz-border-radius and -border-radius for every -webkit-border-radius? It seems like that sort of stuff where you know it's already supported begs some action.
    - sjs 16y ago
      I didn't look at the code. If that's all it takes to get it working for Gecko as well then yes, shame on them for not doing so.
- codingthewheel 16y ago
  I agree it's kind of silly to put forth a visual web demo and exclude 90% of browsers (especially when these same effects can be rendered in all browsers, with the proper browser-specific tweaks), but does there need to be a practical value? I think the point is "Huh. Cool." Demoscene for CSS. These demos are also good for putting new features/techniques through their paces.
  - david 16y ago
    Is that 90% of browsers or 90% of users? I think this kind of thing is like a light on the horizon for web designers. It lets us know that some of the things we wish we could do now are at least going to be feasible someday...
- silvestrov 16y ago
  IE was different, just to be different (and to trash the standards). WebKit is different because it is on the bleading edge. IE will at some point in the future catch up. IE 10 or 11 will probably be able to render this example correctly. Those sites that only works with IE depends on IE-quirkiness (aka bugs) which never will be implemented in any other browser. So IE will catch up to this. Other browsers would never "catch up" to IE's weirdness. And IE never lead the direction of html development. WebKit does (e.g. transitions, 2D and 3D transformations, css animations). I use these examples to show my customers that it is good to give users with advanced browsers a nicer design than what is possible (easy) with IE 6. That they should leave the idea that a website should look exactly the same in all browsers. That a sprinkle of css can improve a design in FF and WebKit, but would take huge amount of pngs in IE 6. Much more value for their money because adding a bit of css is much faster than fighting IE6.
  - panic 16y ago
    IE 10 or 11 will probably be able to render this example correctly. It won't. The demo uses -webkit-gradient, -webkit-box-shadow, -webkit-border-radius, -webkit-box-reflect, -webkit-transform, and -webkit-animation. Of course, it might be able to render it correctly when the "-webkit-" prefix is removed. But for now, demos like this are necessarily browser-specific.
  - silvestrov 16y ago
    Microsoft extension to rotate and scale <div> div#id { filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1.532, M12=-1.286, M21=1.286, M22=1.532); } WebKit extension: div#id { transform: rotate(40deg) scale(2.0); } I think WebKit has the better candidate for a cross-platform standard......
- SkyMarshal 16y ago
  It's just a clever tech demo, not your everyday online banking site where functionality is required. They could have even used Chrome 6 for all that matter.
- patrickaljord 16y ago
  It only works in chrome because of that http://news.ycombinator.com/item?id=1465194 http://news.ycombinator.com/item?id=1465194
chaosmachine 16y ago
There's a lot of these "x done entirely with css" posts as of late. It's cool, but not really newsworthy. Drawing stuff with CSS is the new ANSI art[1], I guess. [1] http://en.wikipedia.org/wiki/ANSI_art http://en.wikipedia.org/wiki/ANSI_art
- kwamenum86 16y ago
  Except this is the type of thing the advances in CSS are meant for. It's not a creative hack. This is people exploring the bleeding edge. They introduce new and arguably better techniques for presenting content and I also think they serve as a good barometer for progress.
  - chaosmachine 16y ago
    Did you read the source code? They're using 50 · elements as a speaker grill. That's about as close to ANSI art as you can get and still call it CSS. My point is: With enough DIVs you can render anything in CSS (see examples below, including an entire animated Spiderman cartoon). Does it take artistic talent to draw something with CSS3? Sure. Is there lots of effort involved? Absolutely. But worth knocking something else off the front page for? http://www.optimum7.com/internet-marketing/web-development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html http://www.optimum7.com/internet-marketing/web-development/p... http://31o5.com/2010/05/05/doraemon-with-css3/ http://31o5.com/2010/05/05/doraemon-with-css3/ http://admixweb.com/demos/ipodcss3/ http://admixweb.com/demos/ipodcss3/ http://sxsw.beercamp.com/ http://sxsw.beercamp.com/ http://jonraasch.com/blog/drawing-with-css http://jonraasch.com/blog/drawing-with-css
    - potatolicious 16y ago
      Also: isn't this what SVGs are for? Fast rendering, resolution independence... Drawing stuff with CSS3 is a cool hack, but I don't see the motivation for this from a practical perspective.
tmsh 16y ago
Buttons don't work. Less realistic than reality. Lame.
- deleted 16y ago
  [deleted]
david 16y ago
>> This project will only display correctly on a webkit browser and has only been tested in Google Chrome. Honestly, if you know it will display in a webkit browser, is it that difficult to at least test in Safari before you put the page up? Or at least a lot easier than drawing an entire iPhone in CSS, I might add.
atestu 16y ago
And here are the iOS icons in CSS 3: http://graphicpeel.com/cssiosicons http://graphicpeel.com/cssiosicons
SkyMarshal 16y ago
Cool. For anyone wondering, here's that page in FF 3.6 and Opera 10.11: http://imgur.com/R2Wod.png http://imgur.com/R2Wod.png
- patrickaljord 16y ago
  That's because he's using -webkit prefix, it would probably work wit -moz prefix on firefox.
- JBiserkov 16y ago
  Looks like HTC touch, no?
nader 16y ago
This is a great showcase for what's possible! I have slight graphic issues (harsh borders) on my iPad. Anybody experiencing the same?
ck2 16y ago
2k of html, 20k of CSS, impressive! When is firefox scheduled to be able to render things like that, will 3.7 do it?
bmalicoat 16y ago
That's pretty cool, but everyone knows the second hand on the iPhone moves discretely with a little bounce rather than continuously! Kidding aside, it'd be awesome to have a tool that converts images to their css equivalent if there would be space savings for that particular image.
jacobian 16y ago
An iPhone, drawn entirely with HTML: <img src="iphone.png">

39 points by grinich 16y ago

This project will only display correctly on a webkit browser Can we honestly say this is any better than "this site will only display correctly on IE"? Even if they're using open standards, it just doesn't seem right to be incompatible with 90% of browsers. Is there any practical value of these demonstrations of CSS prowess to HN?

sjs 16y ago
When the standards are widely implemented those who are already familiar with them will have a head start. Unless some people push things forward they will forever stay the same. We don't all have to move in lock-step, that kind of thinking leads to watered down systems and is a recipe for stagnation. There's also graceful degradation and progressive enhancement, where you can serve the best supported content to each client based on their capabilities. So you can use the new shiny stuff if supported but nobody is left out in the cold entirely. HTML5 video is a good example of this. One last point. Other browser devs may see these demos and think "hey that's cool! we should be able to do that too", leading to quicker uptake of new standards.
- sprout 16y ago
  Is it really going to kill them to add -moz-border-radius and -border-radius for every -webkit-border-radius? It seems like that sort of stuff where you know it's already supported begs some action.
  - sjs 16y ago
    I didn't look at the code. If that's all it takes to get it working for Gecko as well then yes, shame on them for not doing so.
codingthewheel 16y ago
I agree it's kind of silly to put forth a visual web demo and exclude 90% of browsers (especially when these same effects can be rendered in all browsers, with the proper browser-specific tweaks), but does there need to be a practical value? I think the point is "Huh. Cool." Demoscene for CSS. These demos are also good for putting new features/techniques through their paces.
- david 16y ago
  Is that 90% of browsers or 90% of users? I think this kind of thing is like a light on the horizon for web designers. It lets us know that some of the things we wish we could do now are at least going to be feasible someday...
silvestrov 16y ago
IE was different, just to be different (and to trash the standards). WebKit is different because it is on the bleading edge. IE will at some point in the future catch up. IE 10 or 11 will probably be able to render this example correctly. Those sites that only works with IE depends on IE-quirkiness (aka bugs) which never will be implemented in any other browser. So IE will catch up to this. Other browsers would never "catch up" to IE's weirdness. And IE never lead the direction of html development. WebKit does (e.g. transitions, 2D and 3D transformations, css animations). I use these examples to show my customers that it is good to give users with advanced browsers a nicer design than what is possible (easy) with IE 6. That they should leave the idea that a website should look exactly the same in all browsers. That a sprinkle of css can improve a design in FF and WebKit, but would take huge amount of pngs in IE 6. Much more value for their money because adding a bit of css is much faster than fighting IE6.
- panic 16y ago
  IE 10 or 11 will probably be able to render this example correctly. It won't. The demo uses -webkit-gradient, -webkit-box-shadow, -webkit-border-radius, -webkit-box-reflect, -webkit-transform, and -webkit-animation. Of course, it might be able to render it correctly when the "-webkit-" prefix is removed. But for now, demos like this are necessarily browser-specific.
- silvestrov 16y ago
  Microsoft extension to rotate and scale <div> div#id { filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1.532, M12=-1.286, M21=1.286, M22=1.532); } WebKit extension: div#id { transform: rotate(40deg) scale(2.0); } I think WebKit has the better candidate for a cross-platform standard......
SkyMarshal 16y ago
It's just a clever tech demo, not your everyday online banking site where functionality is required. They could have even used Chrome 6 for all that matter.
patrickaljord 16y ago
It only works in chrome because of that http://news.ycombinator.com/item?id=1465194 http://news.ycombinator.com/item?id=1465194

chaosmachine 16y ago

There's a lot of these "x done entirely with css" posts as of late. It's cool, but not really newsworthy. Drawing stuff with CSS is the new ANSI art[1], I guess. [1] http://en.wikipedia.org/wiki/ANSI_art http://en.wikipedia.org/wiki/ANSI_art

kwamenum86 16y ago
Except this is the type of thing the advances in CSS are meant for. It's not a creative hack. This is people exploring the bleeding edge. They introduce new and arguably better techniques for presenting content and I also think they serve as a good barometer for progress.
- chaosmachine 16y ago
  Did you read the source code? They're using 50 · elements as a speaker grill. That's about as close to ANSI art as you can get and still call it CSS. My point is: With enough DIVs you can render anything in CSS (see examples below, including an entire animated Spiderman cartoon). Does it take artistic talent to draw something with CSS3? Sure. Is there lots of effort involved? Absolutely. But worth knocking something else off the front page for? http://www.optimum7.com/internet-marketing/web-development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html http://www.optimum7.com/internet-marketing/web-development/p... http://31o5.com/2010/05/05/doraemon-with-css3/ http://31o5.com/2010/05/05/doraemon-with-css3/ http://admixweb.com/demos/ipodcss3/ http://admixweb.com/demos/ipodcss3/ http://sxsw.beercamp.com/ http://sxsw.beercamp.com/ http://jonraasch.com/blog/drawing-with-css http://jonraasch.com/blog/drawing-with-css
  - potatolicious 16y ago
    Also: isn't this what SVGs are for? Fast rendering, resolution independence... Drawing stuff with CSS3 is a cool hack, but I don't see the motivation for this from a practical perspective.

tmsh 16y ago

Buttons don't work. Less realistic than reality. Lame.

deleted 16y ago
[deleted]

david 16y ago

>> This project will only display correctly on a webkit browser and has only been tested in Google Chrome. Honestly, if you know it will display in a webkit browser, is it that difficult to at least test in Safari before you put the page up? Or at least a lot easier than drawing an entire iPhone in CSS, I might add.

atestu 16y ago

And here are the iOS icons in CSS 3: http://graphicpeel.com/cssiosicons http://graphicpeel.com/cssiosicons

SkyMarshal 16y ago

Cool. For anyone wondering, here's that page in FF 3.6 and Opera 10.11: http://imgur.com/R2Wod.png http://imgur.com/R2Wod.png

patrickaljord 16y ago
That's because he's using -webkit prefix, it would probably work wit -moz prefix on firefox.
JBiserkov 16y ago
Looks like HTC touch, no?

nader 16y ago

This is a great showcase for what's possible! I have slight graphic issues (harsh borders) on my iPad. Anybody experiencing the same?

ck2 16y ago

2k of html, 20k of CSS, impressive! When is firefox scheduled to be able to render things like that, will 3.7 do it?

bmalicoat 16y ago

That's pretty cool, but everyone knows the second hand on the iPhone moves discretely with a little bounce rather than continuously! Kidding aside, it'd be awesome to have a tool that converts images to their css equivalent if there would be space savings for that particular image.

jacobian 16y ago

An iPhone, drawn entirely with HTML: <img src="iphone.png">