- From: Brad Kemper <brad.kemper@gmail.com>
- Date: Tue, 11 Oct 2011 15:00:21 -0700
- To: Brian Manthos <brianman@microsoft.com>
- Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, www-style list <www-style@w3.org>
- Message-Id: <ABAAA9E6-12D4-4281-B438-DFC8CAADB7B9@gmail.com>
Re: expanding capabilities: I have conceded already that being able to align gradient centers with edges and corners is easier to do within the image than via backgrounds. So I expanded my proposal to allow that.
With this this new version, it is still much easier to understand and use than the complex version in the draft, and also happens to allow a common case that the existing draft does not.
Re: specifying 66%: well sure, if we always knew the height and width, then we could set the exact height of the gradient too, so that the gradient is a circle. I'm more concerned with the far, far more common cases where the height is auto. My simpler syntax easily allows for a corner-centered circular radial-gradient that fills the background width with the gradient line, the more complex syntax of the WD does not, unless you also know what the width/height ratio is.
So your solution to this common case it to add auto sizing for height, but ignore the similar problem of having a corner-centered circular radial-gradient that fills the background height with the gradient line, regardless of width. You conclude it is not worth complicating the syntax further. My solution remains simple, and works well in either case.
On Oct 11, 2011, at 1:29 PM, Brian Manthos <brianman@microsoft.com> wrote:
> 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> 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).
>
> à˘Q°îű•π¨ÅÖâΩŸîÅ•ÃÅ—°îÅëïÕ•…ïêÅ…ïπëï…•πúÅôΩ»ÅπΩ∏µÕ≈’Ö…îÅâΩ·ïÃ∏Å ’–Å—°ï…îÅ•ÃÅÖ¡¡Ö…ï𗱉ÅπºÅ›Ö‰Å—ºÅùï–Å—°Ö–Å’Õ•πúÅ¡ï…çïπ—ÖùïÃÅΩ»Å≠ïÂ›Ω…ëÃ∞Å›°•ç†ÅÂΩ‘Å›Ω’±êÅπïïêÅ•òÅÂΩ‘ÅëΩ∏ù–Å≠πΩ‹Å›°Ö–Å—°îÅ›•ë—†ÅΩòÅ—°îÅ•µÖùîÅ•ÃÄ°—°•π¨Äù›•ë—†ËÅÖ’—ºúÅ›•—†ÅÑÅô’±∞4(ÅâÖç≠ù…Ω’πêÅ•µÖùî§∏ôπâÕ¿ÏҺȿ¯ΩºÈ¿¯Ω¿¯4(Ωë•ÿ¯4(Ωë•ÿ¯4(ΩâΩ뉯4(Ω°—µ∞¯4(
> <BradImpossible2.htm>
Received on Tuesday, 11 October 2011 22:01:10 UTC