Fancy Buttons - Customize Buttons Effortlessly with CSS3 & Compass [video] | Hacker News Reader

Fancy Buttons - Customize Buttons Effortlessly with CSS3 & Compass [video]

brandonmathis.com

88 pointschriseppstein29 comments

We do something similar, but vastly more evil, with Compass on our product. We need the visual experience to be solid on IE (our customer base is enterprise). So... we generate and cache PNG's with ImageMagick using hooks we wrote into Sass. For instance, we can specify arbitrary gradients using Sass color variables and direction/distance arguments, auto-gen rounded corners, and in some cases render text using non-browser-safe type.

I wouldn't recommend the approach (I think it's going to be incredibly clunky in a year or so, and that things like Fancy Buttons that use Compass to hide the complexity of optimal degrading CSS are the way to go), but it is an example of how flexible Compass and Sass are: you can abuse them terribly, and they'll stay loyal.

Fascinating, thanks for sharing your experience. Pixel perfection certainly is a tempting goal, but I've spent too much time and other people's money trying to preserve the illusion that IE is anything less than garbage. I've had enough. Now I'm more focused on usability and I find it far more rewarding.

Yeah, this is a point that many people neglect. It just needs to work in IE. It doesn't need to be pretty. And if you have enough customers on IE that it needs to be pretty, it doesn't need to match the real pretty exactly.

This plugin is such a great example of how to use compass and sass to build simple abstractions out of some of the most complex css that exists.

A few CSS3 rules on a single element isn't something I would call "the most complex css that exists".

EDIT: I do like compass and this plugin.

It's CSS3 that degrades beautifully in IE and controlled by 2-3 lines of styling. What more do you want?

I think his point was simply that writing such CSS is hardly complicated. I like this abstraction and think it will be pretty handy for Compass users (of which I plan to become one), but this mixin basically reduces ~8 lines of CSS to two.

As far as amount of css goes, here's what you're dealing with to achieve something similar in only CSS.

  1. Button reset - to get browsers to the same starting point
  2. Rounded corners, Text shadows, and Gradients + vendoring
  3. Background image fallback
  4. Padding, Text size, line-height, etc
  5. Default, Hover, and Active states for all styles

That's a lot of css to write, effectively reduced to a single mixin. Of course, it's also great that you can use the bare minimum html.

And there's a ton of color math going on.

If I had been less snarky I might have communicated my question better, which is, what's the CSS pattern that's more complicated? It'd be a good candidate for a Compass plugin.

It should be noted that CSS gradients are not yet supported in Firefox (3.5). As such, this demo uses transparent PNGs instead of of CSS3 properties. It works fine in this case, but of course images aren't as flexible as CSS properties would be.

However, Firefox 3.6, which should be released within a few weeks, will support custom gradients, so things are looking up.

Excellent little demo.

Shows how long I've been out of touch with CSS. Didn't know stuff like variables or rounded edges was supported.

The variables appear to be a SASS construct, not CSS.

http://en.wikipedia.org/wiki/Sass_(stylesheet_language)

SASS compiles to CSS.

And it inlines the variables as constants at 'compile time'.

Rounded corners are supported in Webkit Gecko and Presto, and not in Trident of course.

Variables are provided by SASS, a CSS pre-processor language/framework.

What does it look like in IE6? Just curious, if anyone has a screenshot.

IE6 doesn't easily support png transparency. It basically just looks like a flat colored boxy button with a border.

I'd imagine that some future revision might enhance the support for IE6...

Certainly. As far as IE6 support can go without compromising on simplicity.

Are there any pure JS implementations of something like Sass/Compass?

There's http://github.com/clr/sassijs

But it's not feature complete yet.

which browsers support this?

They all do, but things will look better in Firefox and Safari.

pimpy.

handles

Yeah, I was just helping him correct a misspelling in the post, that still hasn't been caught.

"Here’s a sample of what CSS rules this mixin hanldes for you:"

Finally caught it. Thanks.

Compass FTW!

Reply on news.ycombinator.com