

IPhone 4 in pure CSS3 - andrew_k
http://tjrus.com/iphone

======
kulkarnic
Perhaps I'm missing the point: besides a cool demonstration for what CSS can
do (when aided by JS), why is this a useful idea?

For anything practical, would one not be better off not being a purist, and
using images etc? After all, image formats were meant to store graphics. I'm
sure I'm missing something, since I've lately seen a lot of these "pure CSS"
things. But what is it?

[Edit: apparently, it is meant exclusively as a demo. And it's pretty slick at
that]

~~~
rimantas
Doing something in CSS instead of graphics often can let you save some HTTP
requests and/or bandwidth — this comes handy if you are into client-side
optimization. Also it is easier to update later: just change some values
instead of recreating entire image (or set of them). However, depending on the
case using sprites or data-uris may by preferable.

~~~
nirvdrum
I'll take the network hit over the CPU hit (and thus battery life). This page
is constantly using about 45% of a core on my MBP in Firefox 9.

~~~
dextorious
Sure, but the (real or imaginary) savings of this is not about your hit, is
about the hit from the server point of view.

~~~
atarian
Correct me if I'm wrong, but if the combined size of an image and its
complementary CSS file is less than the size of a 129kb CSS file with "CSS3
images", then don't you essentially lose the benefit of reducing server load?

~~~
dextorious
Sure. That's why I added the "imaginary" qualifier to the savings.

I just wanted to clarify that the savings the other commenters talk about were
taken from the server point of you.

------
TjRus
Hi! I'm developer of this iPhone. The reasons i've made it: 1\. Challenge. I
saw the icons in pure CSS and deside to make full iPhone with icons. 2\.
Demonstration of CSS3 posibilities (not all but many af them) 3\. Inspiration.
Many young developers write me and thanks me for inspire themto learn more,
use more...

I titled it "..pure CSS3" because this iPhone is actually in pure CSS3, the JS
part is for iPhone interaction. Without JS or with it - iPhone is anyway on
pure CSS3.

------
willwashburn
Perhaps I'm behind the times, but what tools do people use to make the icons
like that in CSS3? Is it simply an art or can you start in photoshop and use
some data there to help guide you along the way?

~~~
lazugod
Not Photoshop specifically, but it would be easy to take vector art from
something like Illustrator and convert it into CSS's simple shapes.

~~~
quizbiz
Tutorials anywhere?

------
RKearney
Why do people keep calling things "pure CSS" when they use JavaScript and
HTML?

~~~
baddox
I think HTML obviously is allowed to call something "pure CSS," since an HTML
document is required to even load CSS, and CSS rules can only apply to DOM
elements. JavaScript, however, shouldn't be allowed.

~~~
RKearney
You could do it with XML and XSLT.

~~~
lojack
XSLT is typically used to translate XML into HTML. Sure, you could use CSS to
style XML, but I believe the point isn't to argue the semantics of the markup,
only to say that some sort of markup is required in order to use CSS.

------
naithemilkman
its cool but the title is misleading --> 335 lines of Javascript code used

~~~
okal
A little like this - Donatello, a "pure" CSS drawing library,
<http://news.ycombinator.com/item?id=3090290>. Not to belittle the effort, but
335 (or even 1) lines of JS is absolutely NOT pure CSS3. It really bothers me
when people do that. It wouldn't have been any less impressive with a more
honest title.

That being said, this is a really cool demo.

~~~
ugh
It is pure CSS as explicitly defined on the page, i.e. no images used.

Just because you have a different definition doesn’t make it right.

~~~
icebraining
It's not _his_ definition. Pure means "Not mixed or adulterated with _any
other_ substance or material". Here there is JS mixed, hence it isn't pure.

~~~
ugh
The point. You are missing it.

He or she uses CSS for a job for which usually images are used. Hence his or
her use of CSS is pure in that sense and it’s also written down that way. It’s
not misleading in any way, shape or form.

HN. A community of whiny know it alls.

~~~
icebraining
I understand what you're saying. I don't agree with it.

Not that I have any problem with it being pure or not, just with your reply to
okal.

------
deepkut
Despite the snide comments, this does demonstrate the power of CSS3, which I
think was the designer's intention! On that note, NICE.

------
zalthor
Anyone else notice the time displayed as local time? Not that its anywhere as
cool as the rest of the demo, but I think its a really nice touch!

~~~
switz
Try the calendar with the real day on it!

------
harryf
Worth DOM inspecting, for example, the rays from the sun on the Weather app
icon. Insane amounts of work have gone into this...

------
pothibo
Very nice work. Love the details and the slider screen is a nice touch. Those
iPhones in CSS are becoming more and more popular;) I made this 4 weeks ago,
it's pretty much the same thing, but done differently.

<http://pothibo.github.com/iPhonePerspective/>

------
jimmyhwang
Wow, this is pretty sick. I wonder how much time it took to create this.

------
code_duck
If anyone wants to see an alternative implementation, this one came to mind:

<http://alexw.me/ipad2/>

------
joshuahedlund
Would love to see a follow-up post detailing how some of the more challenging
aspects were accomplished/derived/realized.

------
fatalerrorx3
Not to detract from the coolness of this demo, but it looks like garbage in IE
8 (what else is new)

------
quizbiz
This is a beautiful resume.

------
bala79
this is cool!. Good to know the higher level of possibilities of css3. awesome
work!

------
its_so_on
stick a flash app in there that uses your microphone, camera, speakers, over
tha internetz, and kill skype

------
zyb09
iPhone4 in CSS3? I predict this to be the highest upvoted submission on HN of
all time.

~~~
ajarmoniuk
It's funny because it's true.

------
alexhaefner
(1) It's not pure CSS3, there's JS involved to handle events. Sure it's small,
but it's not.

(2) The only real gripe is that the animation is not accurate to an actual
iPhone. After the unlock there is a delay between the lock/title moving away
and the icons moving in. Both items clear the screen before the other items
enter. Also there's a fade on the lock screen items.

Demos like these are cool if they are well done, and correct. Otherwise they
feel more like a gimmick. Having written webkit animations, all the added
effect (the fades and timings) could be done with CSS3. So if you're gonna do
it, do it well.

Now after the criticism, good job. I like that all the icons and font and
screens are all HTML/CSS objects.

~~~
marcusf
Giving some benefit of the doubt, I really think the author was thinking "Done
without images", not "Done without JS" when he was writing pure CSS. That
change in perspective makes the title less misleading.

I for one think it's a hell of a job. I'm impressed with the work involved,
especially in small things like the positioning of the clouds on the Mail.app,
and the loudspeaker design.

~~~
alexhaefner
Ah I've done animation work in the past, so that's what I was drawn to. After
that I looked at the other details more closely. Funny what we find ourselves
focusing on.

