IPhone 4 in pure CSS3

http://tjrus.com/iphone

by andrew_k • 15 years ago

238 60 15 years ago

tjrus.com

zyb09• 15 years ago

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

ajarmoniuk• 15 years ago

It's funny because it's true.

jimmyhwang• 15 years ago

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

willwashburn2• 15 years ago

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?

lukeholder• 15 years ago

usually just a text editor.

willwashburn2• 15 years ago

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?!

lazugod• 15 years ago

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

quizbiz2• 15 years ago

Tutorials anywhere?

naithemilkman• 15 years ago

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

suhastech• 15 years ago

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

okal2• 15 years ago

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.

ugh3• 15 years ago

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.

ugh3• 15 years ago

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

RKearney2• 15 years ago

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

endianswap• 15 years ago

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

baddox2• 15 years ago

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.

RKearney2• 15 years ago

You could do it with XML and XSLT.

kulkarnic2• 15 years ago

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]

duhoang• 15 years ago

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.

kulkarnic2• 15 years ago

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

shn• 15 years ago

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.

ntkachov• 15 years ago

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

bnr• 15 years ago

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

rimantas• 15 years ago

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.

bad_user• 15 years ago

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 :)

CaveTech• 15 years ago

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

nirvdrum2• 15 years ago

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.

digitailor• 15 years ago

#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).

alexhaefner3• 15 years ago

(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• 15 years ago

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.

alexhaefner3• 15 years ago

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.

wonderercat• 15 years ago

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

alexhaefner3• 15 years ago

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.

deepkut• 15 years ago

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

zalthor• 15 years ago

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• 15 years ago

Try the calendar with the real day on it!

quizbiz2• 15 years ago

This is a beautiful resume.

bala79• 15 years ago

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

harryf• 15 years ago

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

TjRus• 15 years ago

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.

its_so_on• 15 years ago

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

fatalerrorx3• 15 years ago

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

joshuahedlund• 15 years ago

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

pothibo• 15 years ago

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/

code_duck• 15 years ago

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

http://alexw.me/ipad2/

IPhone 4 in pure CSS3

Related Stories