Sunday, January 1, 2012

Radial gradients

I raised the issue that the radial gradients we were discussing were unreadable to me, and probably therefore to much of the intended audience. It was not at all obvious by looking at the gradient syntax what the various numbers and lengths might be.
radial-gradient(60% 43%, 25px 25px, #b03 99%, transparent)
So Tab Atkins, David Baron, Brad Kemper, Brian Manthos and I hashed out an alternative syntax.
radial-gradient(circle to 25px at 60% 43%, #b03 99%, transparent)
We’d like your opinion on which is preferred and why.

Examples
Current WD Current ED
radial-gradient(white, black) radial-gradient(white, black)
radial-gradient(farthest-corner ellipse, center, white, black) radial-gradient(ellipse to farthest-corner at center, white, black)
radial-gradient(top left, white, black) radial-gradient(at top left, white, black)
radial-gradient(top left, farthest-corner ellipse, white, black) radial-gradient(ellipse at top left to farthest-corner, white, black)
radial-gradient(circle, white, black) radial-gradient(circle, white, black)
radial-gradient(circle, center, white, black) radial-gradient(circle at center, white, black)
radial-gradient(center, 5em 5em, white, black) radial-gradient(to 5em, white, black)
radial-gradient(center, 5em 5em, white, black) radial-gradient(circle to 5em at center, white, black)
radial-gradient(75% 75%, closest-side circle, white, black) radial-gradient(circle at 75% 75% to closest-side, white, black)
radial-gradient(25% 2em, 15px 30%, white, black) radial-gradient(ellipse to 15px 30% at 25% 2em, white, black)
The generic forms are (very roughly speaking):
General Syntax
Current WD Current ED
radial-gradient(position, [size || shape], color-stops) radial-gradient(shape [to size || at position], color-stops)
Shape/size and position are optional, unless the shape/size is given with explicit lengths, in which case the position must also be specified Each of shape, size, and position are optional. The size and shape clauses can be reordered.
As a side effect, the keyword-based syntax more easily allows us to add other capabilities in the future. For example, offset radials could be expressed using a from position clause for the color origin.

No comments: