Re: [css3-images] Simplifying radial gradients

Sorry, but I was checking this out a little more, and needed to respond. The wiki wasn't quite right for this. Last one before the meeting.

On Sep 21, 2011, at 7:54 AM, Tab Atkins Jr. wrote:

> On Tue, Sep 20, 2011 at 5:04 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
>> On Sep 20, 2011, at 10:34 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
>>> On Mon, Sep 19, 2011 at 6:24 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>>>> Another downside is performance-related.  To position a gradient in
>>>> the upper-left corner, for example, you'd have to do:
>>>> 
>>>> background-image: radial-gradient(white, black);
>>>> background-size: 200%;
>>>> background-position: 100% 100%;
>>> 
>>> This is actually more of a downside than just performance.  Look at
>>> that background-position.  To put the center of the gradient in the
>>> top-left corner, I have to position the image in the bottom right.
>>> That's pretty unintuitive.
>> 
>> No, just position the left and top to -50%.  Since the center is 50% of the width and height, and you want it to be in the top left, it seems pretty intuitive to move the image up and to the left by half the image width in order to get it there.
> 
> Do the math.  That doesn't work.  Remember that you're aligning the
> -50% point on the image with the -50% point on the element.  Since the
> image is larger, its -50% point is further away from its edge, and so
> the image is actually positioned a *positive* distance from the
> element's left edge.  Images that are larger than the background
> positioning area make background-position work in an unintuitive
> "reversed" manner.

I did the math. I should have said '-100% -100%', since the image was double size in each dimension. It does work out fine, and is intuitive in the case of corner positioning. Try this:

<style>
div {
position:absolute;
top:0; bottom:0;
width:30%;
}
div#left {
left:0;
background: -webkit-radial-gradient(contain circle, yellow, red 99%, black 100%);
background-size:200% 200%;
background-position:-100% -100%
}
div#right {
left:50%;
background: -webkit-radial-gradient(contain, yellow, red 99%, black 100%);
background-size:200% 200%;
background-position:-100% -100%
}
</style>

<div id="left"> </div>
<div id="right"> </div>

Received on Saturday, 29 October 2011 07:14:10 UTC