Comments on: CSS Gradients via Canvas

By: Start Using CSS3 Today: Techniques and Tutorials - Smashing Magazine

Start Using CSS3 Today: Techniques and Tutorials - Smashing Magazine — Thu, 17 Jun 2010 12:40:27 +0000

[...] examine some of the differences in syntax when working with the -moz and -webkit vendor prefixes.(Kind of) Cross-Browser CSS Gradients via CanvasCSS Gradients via Canvas provides a subset of WebKit’s CSS Gradients proposal for browsers [...]

By: Daniel15

Daniel15 — Sun, 04 Apr 2010 14:04:12 +0000

I suggest you add support for MooTools as well. Probably just have to check for window.MooTools and window.$$ like the Prototype check

By: Weston Ruter

Weston Ruter — Thu, 01 Oct 2009 02:28:07 +0000

Excellent point, Phong! I just added the ability (version 1.2) to add the class "no-css-gradients" to prevent the script from examining the file for CSS Gradients. See changelog.

By: Phong Nguyen

Phong Nguyen — Wed, 30 Sep 2009 20:09:08 +0000

This is pretty nice – except for one major issue I’ve seen. I’m using the jQuery UI library and it includes a fairly large CSS file (nearly 1700 lines!) that causes the forEach(document.styleSheets … ) loop to take a good long while to finish. This blocks the user from doing anything to the page – in my case, for 2-3 seconds. That’s pretty annoying for any user to have to deal with.

Is there some way to speed up that core loop? (Failing that, I could try and detect if I’m loading certain large files and ignore them).

By: Weston Ruter

Weston Ruter — Sat, 08 Aug 2009 02:17:36 +0000

Looks like Firefox 3.6 is going to support CSS gradients natively! https://developer.mozilla.org/en/CSS/Gradients

It looks like the syntax is a bit different from WebKit’s, however. I plan to update this canvas implementation to also support the new variant Gecko syntax for CSS gradients.

Now, if only MSIE would upgrade from its filter to this spec to provide the same functionality, especially so that text overlaying the gradients doesn’t lose its anti-aliasing!

By: zem

zem — Wed, 29 Jul 2009 04:30:09 +0000

already using it. working great.

By: Weston Ruter

Weston Ruter — Tue, 28 Jul 2009 14:18:06 +0000

@Jeff: SVG cannot currently be used as a background image in Firefox (and neither can a Canvas directly). But Canvas, unlike SVG, can be converted into a PNG via toDataURI(); this regular PNG can of course be used as a background image, as long as the browser supports data: URIs. So this is why Canvas is employed here. Nice benefit here of converting to PNG is that you can save the generated background image to disk and serve it as an external resource for un-supported browsers (read: Internet Explorer). @stoimen: Thanks! @James: explorerCanvas does not yet implement toDataURI(), so it is not usable. When explorerCanvas implements it, this project can be made to utilize it and bring CSS Gradients to IE8+.

By: James

James — Tue, 28 Jul 2009 13:38:39 +0000

Why not use “explorerCanvas” to support IE? (http://code.google.com/p/explorercanvas) It’s basically VML wrapped in a canvas-like API.

By: stoimen

stoimen — Tue, 28 Jul 2009 11:02:11 +0000

Now that is cool, indeed. Very good job!

By: Ajaxian » CSS Gradients for All!

Ajaxian » CSS Gradients for All! — Tue, 28 Jul 2009 10:33:04 +0000

[...] Ruter has created a very cool library that enables CSS gradients on non-WebKit browsers (at least, a subset). Incredibly cool: CSS Gradients via Canvas provides a [...]