Comments on: CSS gradient syntax: comparison of Mozilla and WebKit (Part 2)

By: Peter

Peter — Fri, 05 Mar 2010 16:24:47 +0000

Hi, thanks for your kind comments. You can use multiple background images in Firefox 3.6; you just need to use comma-separated values for the property:

background-image: gradient, gradient;

Just make sure your copy of Firefox is updated to 3.6.

By: Type-Style

Type-Style — Fri, 05 Mar 2010 16:07:37 +0000

Hey these two parts are awesome.
I really like it and read it more than 5 times to get everything in my head.
I totally agree with you conclusion, but there is one problem I can´t solve at the moment.
You said, with a little help of TAB that firefox is able to show the right result with another gradient.
But i am unable to put 2 gradients in the background-image property.
How would it look like!

Thx!

By: CSS gradients for all web browsers, without using images - Robert's talk

CSS gradients for all web browsers, without using images - Robert's talk — Mon, 15 Feb 2010 11:05:46 +0000

[…] There are two great articles on this topic, delver deeper into the syntax differences: CSS gradient syntax: comparison of Mozilla and WebKit and CSS gradient syntax: comparison of Mozilla and WebKit (Part 2). […]

By: Some links for light reading (01/12/09) « davidmcdonald.dyndns.org:1973

Some links for light reading (01/12/09) « davidmcdonald.dyndns.org:1973 — Tue, 05 Jan 2010 01:48:25 +0000

[…] CSS gradient syntax: comparison of Mozilla and WebKit (Part 2) […]

By: Peter

Peter — Mon, 21 Dec 2009 12:54:36 +0000

@John Faulds: After investigating this further, seems like Safari doesn’t like the font-weight property inside @font-face; I need to investigate this a little more.

By: Alan Hogan

Alan Hogan — Sun, 20 Dec 2009 21:45:33 +0000

Tab, I see now, sorry. In Part 1 it is made clear all the cool different box-model-aware sizing options in the new syntax. Very cool.

By: Alan Hogan

Alan Hogan — Sun, 20 Dec 2009 21:17:53 +0000

Tab,

Please explain how the Webkit syntax does not have “the ability to do gradients that depended on the box size.” It certain seems to have that ability to me.

By: Peter

Peter — Wed, 02 Dec 2009 18:19:22 +0000

@ John — Thanks for letting me know. I can’t replicate the problem myself, and other Safari users are visiting the site with no problems. What version are you using? I’ll try to replicate the problem myself.

@ Jason — Thanks very much. Let me know if you cook up any cool stuff.

By: Jason Weaver

Jason Weaver — Wed, 02 Dec 2009 16:10:29 +0000

Hello Peter,

Well done on these two articles. Now time to have fun with it.

By: John Faulds

John Faulds — Wed, 02 Dec 2009 10:32:06 +0000

Hi Peter,

Unrelated to the articles (which were very well explained by the way), but when I first tried accessing your site in Webkit nightly on a Mac, it crashed my browser after warning me about downloading Grablau Sans. Each time I tried to restart the browser it would crash again after trying to load the page. So I switched to Safari and got the same problem.