TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

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

88 pointsby chriseppsteinover 15 years ago

10 comments

tptacekover 15 years ago
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.<p>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.
评论 #953339 未加载
chriseppsteinover 15 years ago
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.
评论 #953206 未加载
treypover 15 years ago
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.<p>However, Firefox 3.6, which should be released within a few weeks, will support custom gradients, so things are looking up.
newsioover 15 years ago
Excellent little demo.<p>Shows how long I've been out of touch with CSS. Didn't know stuff like variables or rounded edges was supported.
评论 #953426 未加载
评论 #953445 未加载
评论 #953416 未加载
audionerdover 15 years ago
What does it look like in IE6? Just curious, if anyone has a screenshot.
评论 #953353 未加载
bpraterover 15 years ago
Are there any pure JS implementations of something like Sass/Compass?
评论 #953338 未加载
fnidover 15 years ago
which browsers support this?
评论 #953196 未加载
ltackettover 15 years ago
pimpy.
kyroover 15 years ago
<i>handles</i>
评论 #954771 未加载
lessallanover 15 years ago
Compass FTW!