7 ms·

A Farewell to CSS3 Gradients

128 points by antr 15y ago

HannibalLecter 15y ago
Those gradients on the background sides of the linked website are horrific. They remind me of wallpaper you'd expect to see at the Twin Peaks Lodge, and I fully expect some evil gnome to appear and devour my soul. Please kill that ironic design website with fire.
rprime 15y ago
Comparing CSS3 gradients with SVG is like comparing MS Paint with Adobe Photoshop, of course it seems like SVG is good at gradients but it is overkill. Also, SVG XMLish syntax vs CSS3 gradients syntax, no need to compare them, both are bad, but I'd prefer the later at any time.
- jerf 15y ago
  Define "overkill".
  - rprime 15y ago
    It's simple, both SVG and CSS are totally different things, and it's kinda silly to compare them (don't consider my previous comment ^^). The article simply goes from "Hey, CSS3 gradients are crap" to "look how awesome is SVG at things". Blah and bleh. I'd sugest to check the wikipedia page or proper documentation for both of those two, you'll get a better definition than I can give. Cheerio.
tallgreentree 15y ago
This is the first post I've seen that makes it clear how to use SVG graphics for something useful and attractive in web design. I need to look further into the syntax. Thanks for the post.
- justincormack 15y ago
  If you want another use look at d3.js http://mbostock.github.com/d3/ http://mbostock.github.com/d3/
tallgreentree 15y ago
This is the first post I've seen that makes it clear how to use SVG graphics for something useful and attractive in web design. I need to look further into the syntax. Thanks for the post.
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 ago
  You'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 ago
    Actually, 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 ago
justincormack 15y ago
I love SVG, my current gripes are: 1. Patchy support. If you stick to the most common parts of the spec its ok, but there is no comprehensive test suite, and only Microsoft seems to be interested in test coverage. Import stuff that Inkscape can render to a browser and you may get issues. Opera is better than Firefox and Webkit. 2. No CSS transitions on SVG properties, so it is back to Javascript for animation. 3. No support in Android 2.x. Or WebOS. 4. Server side rendering of a fallback image (especially if you use css styling) is a pain. Maybe there are good solutions I havent found yet. 5. It is a big spec, I feel that some better learning resources would help. Do love it though...
- taybenlor 15y ago
  You can animate SVG without JS. http://en.wikipedia.org/wiki/SVG_animation http://en.wikipedia.org/wiki/SVG_animation CSS3 has similarly patchy support. I think the worst thing about SVG is the lack of resources.
  - justincormack 15y ago
    OK I admit I never tried SMIL, but I believe the browser support is terrible. The CSS support works in principle, but in fact almost none of the SVG properties can be transitioned in any current browser. I think some of the shared properties like color can be though, but I couldn't get anything useful to work without javascript (and d3.js has nice javascript transition support...)
- masklinn 15y ago
  > Patchy support. This. And on basic stuff too, especially in Webkit: flexible canvas size is broken (fantastic for a vector format), events handling is bonkers, looks vary drastically from one browser to the next, all methods of serving an SVG are shitty in different ways (and forget about using an SVG background, not going to happen), etc... Tried to make a basic interactive SVG map (not much interaction too, big rectangular active surfaces), ended up scrapping everything and going with canvas. It looks like either nobody gives a shit about SVG on the browser side or the spec is either retarded or not implementable.
ck2 15y ago
I'd wait to 2012 for pure SVG solutions, considering it's not in Firefox 3.6 (or IE8). Having just upgraded to 6.0, I respect the wishes of anyone needing to stick with 3.6.x for awhile longer. Although, there is this http://code.google.com/p/svgweb/ http://code.google.com/p/svgweb/ ( http://codinginparadise.org/projects/svgweb/samples/demo.html http://codinginparadise.org/projects/svgweb/samples/demo.htm... )
- oconnore 15y ago
  No offense intended... but I don't understand you, or people like you. The upgraded version is better in every imaginable way. It's like you have a dirty old Honda Civic in your driveway, and someone is offering you a brand new 3 series BMW, for free, with zero effort (and they will even transfer your change out of the driver's console, and swap your radio stations for you). Is it just laziness, or distrust of "new" code, or something I haven't thought of yet? If you stumbled on a website that required a recent browser, would you actually leave instead of upgrade?
  - erydo 15y ago
    Some extensions haven't been updated to support newer versions of Firefox. Some people just don't want to sink time into upgrading their software, or risk that something that once worked now doesn't. If you're a web developer, you have to keep in mind that not everyone is using the latest and greatest all the time.
  - bzbarsky 15y ago
    Say I take your analogy seriously. Someone is offering you the BMW for free, but it has different control placement (cruise control is in a different place, climate controls work totally differently, and so forth), and requires more expensive gas. Oh, and you have no money to pay for the gas, and you do a _lot_ of driving and don't want the distraction of learning the new controls on the road. And for your current usage, the Civic works fine. Oh, and the Civic has better reliability than the BMW. See http://usnews.rankingsandreviews.com/cars-trucks/Honda_Civic/2011/Reliability/ http://usnews.rankingsandreviews.com/cars-trucks/Honda_Civic... vs http://usnews.rankingsandreviews.com/cars-trucks/BMW_3-Series/Reliability/ http://usnews.rankingsandreviews.com/cars-trucks/BMW_3-Serie... I can totally understand someone wanting to stick with the Civic instead. Of course I speak as someone who bought a Civic, precisely because it's a pretty darned good car. ;)
vbo 15y ago
I've been struggling to come up with a good cross-browser(ish) solution for gradients that doesn't require external images or extra markup, and indeed SVG + CSS3 + IE's filter is the best I've found. It means IE9 (via SVG) renders the page exactly like Chrome, which is great. For IE8 (which has a larger market share than IE9 in our userbase) I had to use IE's filter property in a separate conditional rule so as to not mess with IE9 (for which it breaks border-radius). Unfortunately, I'd rather not request 10+ svg images, so I chose to embed them in css. That means around 512 bytes per gradient, so around 1K for a button with a mouseover effect. But it's something I can live with (and compress). If you're willing to load external images for linear gradients and don't want the hassle of creating each image by hand, you could build a lightweight server side script to generate the SVG based on url paramters. There's several IE behaviours out there, of which I found CSS3Pie to be the most complete. It implements border-radius, linear-gradient and more for IE6+. All that warrants a Keanu Reeves-like WOAH, but there's a catch: it's VERY slow. All in all, unless your userbase is using ancient browsers, go ahead and use CSS3 while make sure older browsers show a degraded, but still useable version. The days CSS advancements were unuseable due IE6 and such being the dominant browsers are pretty much over. Slightly offtopic, but here's a snippet that I found on last.fm and was blown away by (although it's obvious, I just never thought of doing it):   and so on. Makes for easy conditional CSS rules without the need for separate files.
- SkyMarshal 15y ago
  HTML5boilerplate uses those browser conditional statements too, but applies them to the html tag instead of body: http://html5boilerplate.com/ http://html5boilerplate.com/ <!DOCTYPE html>       <html class="no-js" lang="en">
mmuro 15y ago
This is just trading one tool and syntax for another. These days it's okay if your site doesn't look the same in every browser.
bjornsteffanson 15y ago
Dude needs to google SASS or Stylus if he's considering this a problem. So many other CSS features are only supported by a limited subset of browsers. You have to start treating them like "extras" for the most up-to-date users and gracefully degrade for those who aren't. The problem is solved with creating great designs and mark-up from the beginning with browser limitations in mind, not addressing limitations during development with some hack.

128 points by antr 15y ago

Those gradients on the background sides of the linked website are horrific. They remind me of wallpaper you'd expect to see at the Twin Peaks Lodge, and I fully expect some evil gnome to appear and devour my soul. Please kill that ironic design website with fire.

rprime 15y ago

Comparing CSS3 gradients with SVG is like comparing MS Paint with Adobe Photoshop, of course it seems like SVG is good at gradients but it is overkill. Also, SVG XMLish syntax vs CSS3 gradients syntax, no need to compare them, both are bad, but I'd prefer the later at any time.

jerf 15y ago
Define "overkill".
- rprime 15y ago
  It's simple, both SVG and CSS are totally different things, and it's kinda silly to compare them (don't consider my previous comment ^^). The article simply goes from "Hey, CSS3 gradients are crap" to "look how awesome is SVG at things". Blah and bleh. I'd sugest to check the wikipedia page or proper documentation for both of those two, you'll get a better definition than I can give. Cheerio.

tallgreentree 15y ago

This is the first post I've seen that makes it clear how to use SVG graphics for something useful and attractive in web design. I need to look further into the syntax. Thanks for the post.

justincormack 15y ago
If you want another use look at d3.js http://mbostock.github.com/d3/ http://mbostock.github.com/d3/

tallgreentree 15y ago

This is the first post I've seen that makes it clear how to use SVG graphics for something useful and attractive in web design. I need to look further into the syntax. Thanks for the post.

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 ago
You'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 ago
  Actually, 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 ago

justincormack 15y ago

I love SVG, my current gripes are: 1. Patchy support. If you stick to the most common parts of the spec its ok, but there is no comprehensive test suite, and only Microsoft seems to be interested in test coverage. Import stuff that Inkscape can render to a browser and you may get issues. Opera is better than Firefox and Webkit. 2. No CSS transitions on SVG properties, so it is back to Javascript for animation. 3. No support in Android 2.x. Or WebOS. 4. Server side rendering of a fallback image (especially if you use css styling) is a pain. Maybe there are good solutions I havent found yet. 5. It is a big spec, I feel that some better learning resources would help. Do love it though...

taybenlor 15y ago
You can animate SVG without JS. http://en.wikipedia.org/wiki/SVG_animation http://en.wikipedia.org/wiki/SVG_animation CSS3 has similarly patchy support. I think the worst thing about SVG is the lack of resources.
- justincormack 15y ago
  OK I admit I never tried SMIL, but I believe the browser support is terrible. The CSS support works in principle, but in fact almost none of the SVG properties can be transitioned in any current browser. I think some of the shared properties like color can be though, but I couldn't get anything useful to work without javascript (and d3.js has nice javascript transition support...)
masklinn 15y ago
> Patchy support. This. And on basic stuff too, especially in Webkit: flexible canvas size is broken (fantastic for a vector format), events handling is bonkers, looks vary drastically from one browser to the next, all methods of serving an SVG are shitty in different ways (and forget about using an SVG background, not going to happen), etc... Tried to make a basic interactive SVG map (not much interaction too, big rectangular active surfaces), ended up scrapping everything and going with canvas. It looks like either nobody gives a shit about SVG on the browser side or the spec is either retarded or not implementable.

ck2 15y ago

I'd wait to 2012 for pure SVG solutions, considering it's not in Firefox 3.6 (or IE8). Having just upgraded to 6.0, I respect the wishes of anyone needing to stick with 3.6.x for awhile longer. Although, there is this http://code.google.com/p/svgweb/ http://code.google.com/p/svgweb/ ( http://codinginparadise.org/projects/svgweb/samples/demo.html http://codinginparadise.org/projects/svgweb/samples/demo.htm... )

oconnore 15y ago
No offense intended... but I don't understand you, or people like you. The upgraded version is better in every imaginable way. It's like you have a dirty old Honda Civic in your driveway, and someone is offering you a brand new 3 series BMW, for free, with zero effort (and they will even transfer your change out of the driver's console, and swap your radio stations for you). Is it just laziness, or distrust of "new" code, or something I haven't thought of yet? If you stumbled on a website that required a recent browser, would you actually leave instead of upgrade?
- erydo 15y ago
  Some extensions haven't been updated to support newer versions of Firefox. Some people just don't want to sink time into upgrading their software, or risk that something that once worked now doesn't. If you're a web developer, you have to keep in mind that not everyone is using the latest and greatest all the time.
- bzbarsky 15y ago
  Say I take your analogy seriously. Someone is offering you the BMW for free, but it has different control placement (cruise control is in a different place, climate controls work totally differently, and so forth), and requires more expensive gas. Oh, and you have no money to pay for the gas, and you do a _lot_ of driving and don't want the distraction of learning the new controls on the road. And for your current usage, the Civic works fine. Oh, and the Civic has better reliability than the BMW. See http://usnews.rankingsandreviews.com/cars-trucks/Honda_Civic/2011/Reliability/ http://usnews.rankingsandreviews.com/cars-trucks/Honda_Civic... vs http://usnews.rankingsandreviews.com/cars-trucks/BMW_3-Series/Reliability/ http://usnews.rankingsandreviews.com/cars-trucks/BMW_3-Serie... I can totally understand someone wanting to stick with the Civic instead. Of course I speak as someone who bought a Civic, precisely because it's a pretty darned good car. ;)

vbo 15y ago

I've been struggling to come up with a good cross-browser(ish) solution for gradients that doesn't require external images or extra markup, and indeed SVG + CSS3 + IE's filter is the best I've found. It means IE9 (via SVG) renders the page exactly like Chrome, which is great. For IE8 (which has a larger market share than IE9 in our userbase) I had to use IE's filter property in a separate conditional rule so as to not mess with IE9 (for which it breaks border-radius). Unfortunately, I'd rather not request 10+ svg images, so I chose to embed them in css. That means around 512 bytes per gradient, so around 1K for a button with a mouseover effect. But it's something I can live with (and compress). If you're willing to load external images for linear gradients and don't want the hassle of creating each image by hand, you could build a lightweight server side script to generate the SVG based on url paramters. There's several IE behaviours out there, of which I found CSS3Pie to be the most complete. It implements border-radius, linear-gradient and more for IE6+. All that warrants a Keanu Reeves-like WOAH, but there's a catch: it's VERY slow. All in all, unless your userbase is using ancient browsers, go ahead and use CSS3 while make sure older browsers show a degraded, but still useable version. The days CSS advancements were unuseable due IE6 and such being the dominant browsers are pretty much over. Slightly offtopic, but here's a snippet that I found on last.fm and was blown away by (although it's obvious, I just never thought of doing it):   and so on. Makes for easy conditional CSS rules without the need for separate files.

SkyMarshal 15y ago
HTML5boilerplate uses those browser conditional statements too, but applies them to the html tag instead of body: http://html5boilerplate.com/ http://html5boilerplate.com/ <!DOCTYPE html>       <html class="no-js" lang="en">

mmuro 15y ago

This is just trading one tool and syntax for another. These days it's okay if your site doesn't look the same in every browser.

bjornsteffanson 15y ago

Dude needs to google SASS or Stylus if he's considering this a problem. So many other CSS features are only supported by a limited subset of browsers. You have to start treating them like "extras" for the most up-to-date users and gracefully degrade for those who aren't. The problem is solved with creating great designs and mark-up from the beginning with browser limitations in mind, not addressing limitations during development with some hack.