W3C home > Mailing lists > Public > www-style@w3.org > September 2011

Re: [css3-images] Simplifying radial gradients

From: Brad Kemper <brad.kemper@gmail.com>
Date: Tue, 20 Sep 2011 17:04:35 -0700
Message-Id: <CC759A24-F683-47AF-AE18-E786E8717E2B@gmail.com>
Cc: Brian Manthos <brianman@microsoft.com>, "www-style@w3.org" <www-style@w3.org>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
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. 
Received on Wednesday, 21 September 2011 00:05:11 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:04 UTC