Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

IPhone 4 in pure CSS3

tjrus.com

Post reply on HN
Print view View original

21–30 of 64 posts

Re: IPhone 4 in pure CSS3

#21

Post by kulkarnic »

duhoang wrote: post #17
kulkarnic wrote: post #14

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 exclusiv…

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.

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

Re: IPhone 4 in pure CSS3

#22

Post by marcusf »

alexhaefner wrote: post #18

(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 don…

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.

Re: IPhone 4 in pure CSS3

#23

Post by alexhaefner »

marcusf wrote: post #22
alexhaefner wrote: post #18

(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 don…

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.

Re: IPhone 4 in pure CSS3

#24

Post by ntkachov »

kulkarnic wrote: post #14

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 exclusiv…

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

Re: IPhone 4 in pure CSS3

#25

Post by shn »

duhoang wrote: post #17
kulkarnic wrote: post #14

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 exclusiv…

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.

Re: IPhone 4 in pure CSS3

#26

Post by wonderercat »

alexhaefner wrote: post #18

(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 don…

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

Re: IPhone 4 in pure CSS3

#28

Post by hendrik-xdest »

openbear wrote: post #19
willwashburn wrote: post #12

Earlier quoted context omitted.

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 tags to make the clouds in the mail icon. Is that really ju…

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.

Re: IPhone 4 in pure CSS3

#29

Post by rimantas »

kulkarnic wrote: post #14

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 exclusiv…

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.

Re: IPhone 4 in pure CSS3

#30

Post by alexhaefner »

wonderercat wrote: post #26
alexhaefner wrote: post #18

(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 don…

"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.
Post reply on HN