RE: [css3-images] radial-gradient issue raised by Brad

Brad clarified in a reply to my private mail.
“It was supposed to be a taller image (300px, iirc), with more black on the bottom, not changing the gradating part.”

Ok, so what I think he’s getting at is that he doesn’t like having to specify 66.6% in the 2nd div in my sample below.

If we think that is important enough (which I don’t think it is), we could expand the syntax from…

<radial-gradient> = radial-gradient(
                [<position>,]?
                [[
                                [<shape> || <size>]
                                |
                                [<length> | <percentage>]{2}
                ],]?
                <color-stop>[, <color-stop>]+
)

…to…

<radial-gradient> = radial-gradient(
                [<position>,]?
                [[
                                [<shape> || <size>]
                                |
                                [ <length> | <percentage> | auto ]{1,2}
                ],]?
                <color-stop>[, <color-stop>]+
)

… making the explicit sizing portion look more like <bg-size>.

If we were to go that route, the prose could say something like…

·         An ‘auto’ value for one dimension is resolved using 1:1 aspect ratio, such that the used value is the same in both dimensions.

·         An ‘auto’ value for both dimensions is treated as equivalent to “50% 50%”.


Again, this would be expanding the capabilities rather than shrinking them which represents a change in course from the original discussion.

-Brian




<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<style>
                div
                {
                                background-image: -moz-radial-gradient(0 0, 100% 100%, yellow, red 99.7%, black 99.7%);
                                background-image: -ms-radial-gradient(0 0, 100% 100%, yellow, red 99.7%, black 99.7%);
                                background-image: -o-radial-gradient(0 0, 100% 100%, yellow, red 99.7%, black 99.7%);
                                background-image: -webkit-radial-gradient(0 0, 100% 100%, yellow, red 99.7%, black 99.7%);
                                background-image: radial-gradient(0 0, 100% 100%, yellow, red 99.7%, black 99.7%);
                                height: 200px;
                                margin: 10px;
                                width: 200px;
                }
                div:nth-child(2)
                {
                                background-image: -moz-radial-gradient(0 0, 100% 66.6%, yellow, red 99.7%, black 99.7%);
                                background-image: -ms-radial-gradient(0 0, 100% 66.6%, yellow, red 99.7%, black 99.7%);
                                background-image: -o-radial-gradient(0 0, 100% 66.6%, yellow, red 99.7%, black 99.7%);
                                background-image: -webkit-radial-gradient(0 0, 100% 66.6%, yellow, red 99.7%, black 99.7%);
                                background-image: radial-gradient(0 0, 100% 66.6%, yellow, red 99.7%, black 99.7%);
                                height: 300px;
                }
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
From: Brad Kemper [mailto:brad.kemper@gmail.com]
Sent: Tuesday, October 11, 2011 12:17 PM
To: Brian Manthos
Cc: www-style list; Tab Atkins Jr.
Subject: Re: [css3-images] radial-gradient issue raised by Brad


On Oct 11, 2011, at 11:04 AM, Brian Manthos <brianman@microsoft.com<mailto:brianman@microsoft.com>> wrote:
http://www.bradclicks.com/cssplay/impossible-radial-gradient.png

It wasn’t clear to me how you wanted it to render for non-square boxes.  For square boxes, I would author it as below.

The link above is the desired rendering for non-square boxes. But there is apparently no way to get that using percentages or keywords, which you would need if you don't know what the width of the image is (think 'width: auto' with a full background image).

Attachments

Received on Tuesday, 11 October 2011 20:30:24 UTC