

Fancy Buttons - Customize Buttons Effortlessly with CSS3 & Compass [video] - chriseppstein
http://brandonmathis.com/blog/2009/11/19/fancy-buttons-are-here/

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

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

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

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

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

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

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

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

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

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

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

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

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

~~~
imathis
SASS compiles to CSS.

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

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

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

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

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

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

~~~
chriseppstein
There's <http://github.com/clr/sassijs>

But it's not feature complete yet.

------
fnid
which browsers support this?

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

------
ltackett
pimpy.

------
kyro
_handles_

~~~
kyro
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:"

~~~
imathis
Finally caught it. Thanks.

------
lessallan
Compass FTW!

