Re: [css3-images] Simplifying radial gradients

On Sep 20, 2011, at 10:34 AM, "Tab Atkins Jr." <> wrote:

> On Mon, Sep 19, 2011 at 6:24 PM, Tab Atkins Jr. <> 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. 

Received on Wednesday, 21 September 2011 00:05:11 UTC