ideas radial gradient readability

Radial Gradient Readability

We've agreed that radial gradients should have a literate syntax. Linear gradients already kinda have one, in a simple way, and hopefully radials should end up thematically consistent.

Latest Proposal

• for CSS3: radial-gradient([ <extent> || <shape> ] at <position>, <colors>)
• for CSS4: radial-gradient([ <extent> || <shape> ] at <position> [from <position> | from-offset <length>{1,2}], <colors>)

Because the default size is cover, this means:

• radial-gradient(from 25% 25%, <colors>) makes the 0% color at 25% 25%, and the 100% color is at a box-centered box-covering ellipse.
• radial-gradient(at 25% 25%, <colors>) makes the 0% color at 25% 25%, and the 100% color at a 25% 25%-centered box-covering ellipse.

Illustration of moving geometric center vs. moving color focus (view in webkit)

The <extent> is either a farthest/closest-side/corner keyword or an explicit <length>{1,2}. Example: radial-gradient(5em circle at 10% 15%, white, black)

Everything is optional except the colors. Examples: radial-gradient(5em, white, black), radial-gradient(circle, white, black), radial-gradient(at top left, white, black), radial-gradient(white, black).

Syntax Comparison for Level 3

Current WD	Preview	Latest ED
�PROTECTED0�		�PROTECTED1�
�PROTECTED2�		�PROTECTED3�
�PROTECTED4�		�PROTECTED5�
�PROTECTED6�		�PROTECTED7�
�PROTECTED8�		�PROTECTED9�
�PROTECTED10�		�PROTECTED11�
�PROTECTED12�		�PROTECTED13�
�PROTECTED14�		�PROTECTED15�
�PROTECTED16�		�PROTECTED17�
�PROTECTED18�			�PROTECTED19�

Original Proposal

The original proposal was radial-gradient(<shape> to <extent> at <position>, <colors>). In this proposal all arguments after <shape> could be reordered. However, feedback on CSS3.info indicated that people find "to " awkward, hence the Latest Proposal above.

For example, radial-gradient(5em circle at 25% 50px, white, black)

Comparison to other proposal:

Examples

Alternate Proposal	Preview	Current ED
�PROTECTED20�		�PROTECTED21�
�PROTECTED22�		�PROTECTED23�
�PROTECTED24�		�PROTECTED25�
�PROTECTED26�		�PROTECTED27�
�PROTECTED28�		�PROTECTED29�
�PROTECTED30�		�PROTECTED31�
�PROTECTED32�		�PROTECTED33�
�PROTECTED34�			�PROTECTED35�