Fancy Buttons - Customize Buttons Effortlessly with CSS3 & Compass [video](brandonmathis.com)
brandonmathis.com
Fancy Buttons - Customize Buttons Effortlessly with CSS3 & Compass [video]
http://brandonmathis.com/blog/2009/11/19/fancy-buttons-are-here/
30 comments
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.
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
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.
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.
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)
http://en.wikipedia.org/wiki/Sass_(stylesheet_language)
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.
Variables are provided by SASS, a CSS pre-processor language/framework.
[deleted]
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.
But it's not feature complete yet.
pimpy.
Compass FTW!
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.