Hiya Jonas,
Came up against this exact problem earlier this month.
The effect you're describing is possible under the W3 spec, but
(perhaps because CSS3 gradients are currently only supported in
vendor-prefixed-syntax implementation, ie not production-ready
according to the developers) the only popularly available browser to
perform the task adequately right now is Firefox 4.
Either way, the method is to use multiple background images, with the
gradient as one of them and the icon as another. For example:
background-image:
url("http://dribbble.com/images/icon-like16.png";),
-moz-linear-gradient(center bottom , #999 14%, #CCC 57%);
background-position:
0.5em 50%,
0 0;
background-repeat:
no-repeat,
no-repeat;
The icon(s) should be specified first if they are to appear above the gradient.
Seeing as this effect doesn't work anywhere else (Opera and Chrome
support both gradients and multiple background images, but not in
conjunction), and it requires vendor-specific hacks (using the
specification's gradient syntax will break it in all browsers, and the
horribly badly thought out syntax structure means that writing
adequate fallbacks isn't possible using traditional precedence
methods) I'd advise against it for production.
So my real advice is to do the traditional thing and use a wrapper for
the button:
.buttonWrapper {gradient}
.buttonWrapper .button {icon}
There are practical methods for wide-browser-support CSS-defined gradients:
http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/
…but from personal experience of maintaining a site using these, the
supposed convenience advantage (just tweak the code!) is a false
economy. For the case in point, I had to white-label (ie switch
branding including core colours) a complex user interface module that
governed the core user experience for a big web app. It would have
been so much faster to save the gradients as images rather than wade
through that hacky code.
Regards,
Barney Carroll
barney.carr...@gmail.com
07594 506 381
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
![http://dribbble.com/images/icon-like16.png"](http://dribbble.com/images/icon-like16.png"){kind=link}