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

By: » CSS3 Properties with IE Fixes The Blog of Danma

» CSS3 Properties with IE Fixes The Blog of Danma — Thu, 14 Apr 2011 18:41:38 +0000

[…] (reference: http://www.broken-links.com) […]

By: Peter

Peter — Wed, 26 May 2010 09:14:31 +0000

You can certainly do that in Mozilla browsers:

background: { –moz-radial-gradient(20% 50%,circle,white,black 95%,transparent), –moz-radial-gradient(50% 20%,circle,black,white 95%,transparent), –moz-radial-gradient(10% 10%,circle,white,black 95%,transparent); }

The trick, as you can see, is to remember to set the last colour of each gradient to ‘transparent’; if you don’t, the last set colour will fill the rest of the box and other gradients will be hidden.

By: Henrik Wannheden

Henrik Wannheden — Tue, 25 May 2010 22:30:58 +0000

While I certainlythink that Mozillas approach is easier, there’s one thing that Webkit can do but I havn’t seen or figured out to do in FireFox, and that’s “compound” gradients. Can I have multiple gradients layered upon each other, like the WebKit example imaged here (the top top): http://i2.sitepoint.com/g/nl/tt/cssgradients.jpg

In WebKit this is done this way (where three gradients are layered on top of each other):
background: –webkit-gradient(properties 1), –webkit-gradient(properties 2), –webkit-gradient(properties 3);

Is there a way to do this in Firefox?

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.