Re: [css3-images] Simplifying radial gradients

Sent from my iPad

On Sep 19, 2011, at 6:24 PM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:

> I disagree with Brad's assertion that it's acceptable to only use
> "contain" sizing and require authors to multiply their color-stop
> positions by sqrt(2) to achieve "cover" sizing.  The fact that this
> works requires some trigonometry work to figure out, and is not
> generally known.  At the very least, I'd argue that "cover" *must* be
> included.

I didn't perform any trig to figure it out. I just did a little experimenting and was able to quickly determine that multiplying the color stops by the same simple percentage could easily convert a 'contain' into a 'cover'. It is very simple. 

> An additional downside of simplifying as Brad suggests is that it
> becomes harder to both explicitly size a gradient and make the
> gradient cover the entire element.  This is useful for, for example,
> "spotlight" effects.  This can be solved by making the gradient
> extra-large (say, 200% 200%), so the image always covers the full
> area.  This would also be solved by "background-position:extend",
> which may show up in B&B4.

I think 'background-position:extend' would be an excellent way to have a gradient of any sort stay the same size at some position while its outer reaches fill the element. Also, you can just set fixed lengths for the color stops and use either a large percentage background tile size (say, 200% 200%), or use any kind of stops and 'background-repeat:no-repeat' along with a contained gradient and a background-color that matches the last stop. 

So it is not so hard. I would say it is easier when it is simpler and easier to conceptualize, and there are multiple ways to achieve the effect anyway. 

> 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 produces an image four times as large as the element, even though
> you'll only be using a quarter of that, which is somewhat wasteful of
> system resources.  I'm not sure how big of a deal this is, though.

I don't see how clipping the gradient within the image would be any more performant than clipping the gradient within the background.

Received on Tuesday, 20 September 2011 04:17:34 UTC