

An iPhone, drawn entirely with CSS3 - grinich
http://demos.jeffbatterton.com/iphone-css3/

======
chaosmachine
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>

~~~
kwamenum86
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
Did you read the source code? They're using 50 &middot; 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/p...](http://www.optimum7.com/internet-marketing/web-
development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html)

<http://31o5.com/2010/05/05/doraemon-with-css3/>

<http://admixweb.com/demos/ipodcss3/>

<http://sxsw.beercamp.com/>

<http://jonraasch.com/blog/drawing-with-css>

~~~
potatolicious
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.

------
jacobian
An iPhone, drawn entirely with HTML:

<img src="iphone.png">

------
w1ntermute
_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?

~~~
silvestrov
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
_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.

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

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

------
david
>> 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.

------
bmalicoat
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.

------
SkyMarshal
Cool. For anyone wondering, here's that page in FF 3.6 and Opera 10.11:

<http://imgur.com/R2Wod.png>

~~~
patrickaljord
That's because he's using -webkit prefix, it would probably work wit -moz
prefix on firefox.

------
ck2
2k of html, 20k of CSS, impressive!

When is firefox scheduled to be able to render things like that, will 3.7 do
it?

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

