4 ms·
While I agree that SVG is a great approach (and you can even base64 the SVG and inline it in the CSS, if you fancy), an alternative to handle gradients (as well
by yesbabyyes 15y ago
While I agree that SVG is a great approach (and you can even base64 the SVG and inline it in the CSS, if you fancy), an alternative to handle gradients (as well as other vendor-extended css properties) is SASS, LESS or, my favorite, Stylus (http://learnboost.github.com/stylus/ http://learnboost.github.com/stylus/).
With Stylus and nib (https://github.com/visionmedia/nib https://github.com/visionmedia/nib) I can write:
background: #eee linear-gradient-image(22px, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%)
background: linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%)
and get:
background: #eee url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAWCAYAAAABxvaqAAAABmJLR0QA/wD/AP+gvaeTAAAAJklEQVQImWP49euXMdO3b98YmD5+/MgAYVGZy8zAwCDF9O3bNwYAuKA8teqzKuEAAAAASUVORK5CYII=");
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,0.20)), color-stop(1, rgba(0,0,0,0.20)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
background: linear-gradient(top, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
First is a fallback for older browsers: It generates a PNG with the gradient, and inlines the base64 representation. Then it creates rules for webkit, moz and css3.
With Stylus' transparent mixins and nib's vendor mixins, I can write `border-radius: 5px` and get support for all browsers. It's really convenient.
- Klonoar 15y agoYou're missing a huge point of the article, though, and he's right - CSS3 gradients are limited to a subset of their real potential. With SVG (and/or Canvas, debatably), you can do much more complex filters and combinations, and then still use it within your code. It's not just about the browser-vendor-prefix mess.
- bgarbiak 15y agoActually, the author of the article is missing the point of CSS gradients. They are not for sophisticated shapes or "anything useful like that". That's exactly what SVG or raster images are for. Someone could as well write a post entitled "Farewell to border-style" and use very similar reasoning.
- bgarbiak 15y agoAnother handy tool for CSS gradients: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgr... For IE9 there's a SVG gradient maker: http://ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html http://ie.microsoft.com/testdrive/Graphics/SVGGradientBackgr...
- DonnyV 15y agoThese are actually pretty nice, coming from Microsoft.
- andybak 15y agoNib looks interesting but it's hard to know as there aren't any docs I could find. For example does it help with border-radius for IE pre-9 or do I still need something like CSS3 PIE for that?
- pbhjpbhj 15y ago^ this [sorry this is the sort of thing you get with no visible upvote]
- yesbabyyes 15y agoIf you grok Stylus, nib is pretty self-documenting. Looking at the vendor support mixins, https://github.com/visionmedia/nib/blob/master/lib/nib/vendor.styl https://github.com/visionmedia/nib/blob/master/lib/nib/vendo..., border-radius doesn't employ any specific MS techniques. You can take a look at the opacity mixin in the same file, which does use a MS filter.