IPhone 4 in pure CSS3(tjrus.com) |
IPhone 4 in pure CSS3(tjrus.com) |
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]
Like the people who bike/run cross country, when a flight from LAX to JFK is under 6 hours.
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.
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).
[edit]infact they already do. http://ensoul.me/2V
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.
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 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.
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?!
That being said, this is a really cool demo.
Just because you have a different definition doesn’t make it right.
(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.
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.
It's pretty obviously a gimmick (and a cool one at that).
Looking for pixel perfect accuracy is completely missing the 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.
But if you think this is sloppy work, why not try your hand at making something similarly detailed that you feel is done right?
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 ;-)
You may be a bit behind the times:
I just wanted to clarify that the savings the other commenters talk about were taken from the server point of you.
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.
Not that I have any problem with it being pure or not, just with your reply to okal.