I started to play around with the inset value of the CSS3 box-shadow property over at boaz.se/nder/s.miscellaneous/i-<3-inset after maxvoltar posted about it.
I started working with the CSS3 gradient property to achieve the effect reproduced here, and I ran into some serious syntax confusion. Whereas Gecko offers a terse verbose syntax for radial gradients, Webkit only offers the verbose syntax. So here is an explanation in plain english of what each value in a Webkit radial gradient does:
-webkit-gradient(radial, a b, c, d e, f, from(g), to(h));
a: circle 1 x-axis
b: circle 1 y-axis
c: circle 1 radius
d: circle 2 x-axis
e: circle 2 y-axis
f: circle 2 radius
g: circle 1 color
h: circle 2 color
I’ve reproduced the contenteditable from boaz.se below in order to play with gradients!:
Gecko’s implementation offers the same flexibility as Webkit, however, Gecko also offers a simplified version for achieving your basic, plain old two color, even gradient: -moz-radial-gradient(#fff, #999)
Oh hey, what the heck is a color stop?!
A color stop is what the color value should be at a given point in the gradient. You can add in more than one. You can add one in like this:
i: point in gradient at which to stop (number, percent, etc)
j: color at which to stop (hex, etc)
-webkit-gradient(radial, a b, c, d e, f, from(g), to(h), <strong>color-stop(i, j)</strong>);
