Hacker News Reader

Comment by teye | Hacker News Reader

I take it to mean any interface element you're making in Photoshop -- buttons, nav, etc.

Now that I think about it, I stick to CSS most of the time and try to keep images to a minimum (front-end optimization is a tough habit to kick), so I may forget this by the time the next occasion arises.

View on HN

For newer browsers (ff3.5, new safari and webkit) there are css3 commands you can use to provide this kind of eye candy simply. You can add a drop shadow to text (-moz-text-shadow, -webkit-box-shadow, or generally text-shadow), Or to elements (-moz-box-shadow, -webkit-box-shadow or generally box-shadow). Or rounded corners (border-radius).

Given that these elements are only eye candy, I don't worry too much that they are invisible on IE and older browsers. Think of it as free candy.

IE supports this kind of effect via the filter: CSS property. MSDN has tons of information on this. (I'm not saying this is a nice way to implement it, but it does at least work)

Only eye candy? I would not underestimate the importance of an application's visual aesthetic. As the author demonstrates, even subtle details (like a 1px drop shadow) can breathe life into an interface.

We developers might dismiss 1px drop shadows an unimportant; after all, the "real" application is the code we write. But users make no such distinctions. To them, the interface is the application.

Reply on news.ycombinator.com