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

31–40 of 64 posts

Re: IPhone 4 in pure CSS3

#31

Post by phil »

alexhaefner wrote: post #30
wonderercat wrote: post #26

Earlier quoted context omitted.

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

Re: IPhone 4 in pure CSS3

#32

Post by bad_user »

rimantas wrote: post #29
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.

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

Re: IPhone 4 in pure CSS3

#33

Post by CaveTech »

rimantas wrote: post #29
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.

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

Re: IPhone 4 in pure CSS3

#34

Post by baddox »

RKearney wrote: post #11
baddox wrote: post #10

Earlier quoted context omitted.

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.

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

Re: IPhone 4 in pure CSS3

#37

Post by quizbiz »

lazugod wrote: post #15
willwashburn wrote: post #4

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?

Re: IPhone 4 in pure CSS3

#39

Post by digitailor »

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…

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

Post reply on HN