IPhone 4 in pure CSS3 | Hacker News Reader

IPhone 4 in pure CSS3

tjrus.com

238 pointsandrew_k60 comments

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]

It is just a cool demo that shows us the extent of possibilities.

Like the people who bike/run cross country, when a flight from LAX to JFK is under 6 hours.

I wish they donate some of their effort (and knowledge) in a more usable form like helping jQuery Mobile project for a better realistic UI L&F.

edit (after 1st? downvote): All I did mean that since he has now a good command of things, maybe he could help JQM. I did not intend to belittle the effort in anyway.

I can't help but roll my eyes here: "I wish all those people painting canvases would paint my living room... now THAT would be useful." This seems to come up every time there's an art project featured on HN. It's art people; it's its own point!

Besides, the fellow did actually seem to have a use for this (scaling up/down, zooming) tho most of that stuff could be achieved more simply with image. Anyway: Hackers -> use tech for fun, not just utility.

Got it. It is a very cool demo. Thanks!

#1 advantage: zoomable. It's essentially procedurally drawing in the browser without using SVG, which isn't as integrated with HTML.

There are a ton of uses for drawing with CSS; I had a big commercial project that was pulled off this way. Requirements were no Flash and no SVG. It's the live "fear gauge" on this page: http://www.marketpsychdata.com/ (Unlike this demo, it uses images, and is not pure CSS drawing).

The "made for" logo is for a Iphone wall paper app. I'm guessing they will use it for their website to display wall papers.

[edit]infact they already do. http://ensoul.me/2V

At least for me, all the phones on their website still render with an image, unlike the demo.

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.

> Save bandwidth

With a 129kb CSS file I'm not so sure

> Client-side optimization

Depends how you look at optimization... will definitely take a lot more processing to render all that CSS instead of an image

> Easier to update

If you consider mucking with CSS layout properties and doing pixel calculations easier to update than using a program such as photoshop/fireworks, I'm somewhat scared.

CSS is not optimized for graphics and if you're only interested in something static, in this case for instance the result is bigger than an equivalent PNG file. It also sucks for client-side optimizations in general because rendering CSS takes more processing power than displaying a bitmap.

What it does give you is smooth animations, however I think SVG would be more suited for vector graphics, since it is a format created and optimized for actual graphics and you can export from popular editors (like from Adobe Illustrator) to SVG easily.

Not to belittle this effort though, as this is cool :)

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.

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

I'm not sure I want someone working on a front-end component trying to optimize for a back-end process without realizing the full impact of these front-end changes. I'm assuming/hoping in this case it's just a "hey, this is something fun I did."

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?

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.

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.

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?

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

Tutorials anywhere?

usually just a text editor.

Not that I don't believe you, but really?

For example, any website I've built I can surely make with just a text editor but I'll lay it out with ps first. That way I can go back and check what colors / gradients / dimensions I used to speed up the process.

I would image this would require something similar but to the nth degree. That is, I count 20 something <b></b> tags to make the clouds in the mail icon. Is that really just guess and check?!

There's a brief writeup here ...

http://blog.graphicpeel.com/post/740928981/ios-icons-made-in...

... it's not the same guy, but the above blog post is the first time I remember seeing someone do iOS icons in pure CSS.

The whole thing is fun more than practical ... kind of like ASCII art for a new generation ;-)

Interesting. These icons don't work in the latest Firefox but the ones used for the iPhone Demo do.

"""For example, any website I've built I can surely make with just a text editor but I'll lay it out with ps first. That way I can go back and check what colors / gradients / dimensions I used to speed up the process."""

You may be a bit behind the times:

http://37signals.com/svn/posts/1061-why-we-skip-photoshop

http://24ways.org/2009/make-your-mockup-in-markup

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

It seems like a more accurate term for these demonstrations would be "imageless" rather than "pure CSS".

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.

You could do it with XML and XSLT.

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.

Okay. Let's just say "markup language."

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

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.

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.

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.

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.

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.

You can make your point without resorting to insults. I was pointing that it can set the wrong expectation, as I understood it, having seen things such as the game disussed on http://news.ycombinator.com/item?id=2582457, which is in fact CSS only. Like I said, I think it's is an awesome demo. Out.

It’s not. It’s pure CSS as defined explicitly on the page, i.e. no images used.

that's obviously needed for the "slide to unlock" gesture and other interactive components...

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

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!

Try the calendar with the real day on it!

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

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/

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

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

http://alexw.me/ipad2/

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

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

This is a beautiful resume.

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

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

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

It's funny because it's true.

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

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.

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.

"Demos like these are cool if they are well done, and correct. Otherwise they feel more like a gimmick."

It's pretty obviously a gimmick (and a cool one at that).

Looking for pixel perfect accuracy is completely missing the point.

I guess I just look at these things and say, "Yeah doesn't surprise me CSS could do that, but is it done well?" We're at a point where none of this is surprising or amazing to me, it just makes sense. I'm looking for quality.

My own reaction was amazement at the obsessive detail they had rendered in CSS.

But if you think this is sloppy work, why not try your hand at making something similarly detailed that you feel is done right?

Reply on news.ycombinator.com