7 ms·
Fancy Buttons - Customize Buttons Effortlessly with CSS3 & Compass [video]
- ltackett 17y agopimpy.
- chriseppstein 17y agoThis 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 17y agoA 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 17y agoIt's CSS3 that degrades beautifully in IE and controlled by 2-3 lines of styling. What more do you want?
- tdavis 17y agoI 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.
- tptacek 17y agoIf 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.
- imathis 17y agoAs 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 17y agoAnd there's a ton of color math going on.
- lessallan 17y agoCompass FTW!
- fnid 17y agowhich browsers support this?
- tptacek 17y agoThey all do, but things will look better in Firefox and Safari.
- tptacek 17y agoWe 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 17y agoFascinating, 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 17y agoYeah, 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.
- audionerd 17y agoWhat does it look like in IE6? Just curious, if anyone has a screenshot.
- imathis 17y agoIE6 doesn't easily support png transparency. It basically just looks like a flat colored boxy button with a border.
- chriseppstein 17y agoI'd imagine that some future revision might enhance the support for IE6...
- imathis 17y agoCertainly. As far as IE6 support can go without compromising on simplicity.
- bprater 17y agoAre there any pure JS implementations of something like Sass/Compass?
- chriseppstein 17y agoThere's http://github.com/clr/sassijs http://github.com/clr/sassijs But it's not feature complete yet.
- newsio 17y agoExcellent little demo. Shows how long I've been out of touch with CSS. Didn't know stuff like variables or rounded edges was supported.
- deleted 17y ago[deleted]
- pohl 17y agoThe 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)
- ned 17y agoRounded 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.
- kyro 17y agohandles
- treyp 17y agoIt 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.