RE: [css3-images] Gradient Magic

>>> Are there any use-cases for such things?  They definitely
>>> *could* be done, but I cant' think of any reason why you'd want to.  
>>> It would be equivalent to you just specifying an angle directly 
>>> (something of the form n*90deg + 45deg), with a bit of a scale 
>>> thrown in.
>> 
>> Use case:  Applying the same linear-gradient value for background-image across boxes of different aspect ratios.

> I'm confused, Brian. Doesn't 'background-size' take care of what you want? I don't know where object-fit comes into play.

Background-size allows you to manipulate the size of a background tile.  It doesn't allow you to manipulate directly the image within each tile.  Indirectly, you can have gradients react to tile sizes by using units that are sensitive to it (color stops in px form instead of % for instance).

I wasn't really referring to tiling scenarios though.


Getting back to the use case...

While angles allow you to "lock" in which gradient direction you want, you have to calculate the number to do so -- which may not be desirable.

What I had in mind at the time to demonstrate was something like...
1. background-image rule that leverages a proposed closest-side (aka contain) syntax for linear-gradient that is used across elements
2. a sample page with a pair of DIVs: [10x100] and [100x10]
3. animation that adjusts the height of the first DIV and the width of the second DIV in the range [100, 50] "in place" (meaning the center point of each box doesn't move)

With such a sample page, the gradient-line would not be moving for either box, because the 10 dimension is the closest-side throughout the animation.  Yes you can get the same effect with angle gradients, but you have to specify a different angle for the two DIVs.


I was just thinking about animation as a way to illustrate the point, not for a real use scenario.  The real use scenario would be something like having A, B, C width elements on your page and having all the A width elements rendering a consistent gradient, B consistent with each other, and C consistent with each other regardless of having a varying height across members of A, B, and C.  It could be convenient from a styling aesthetic perspective, but then again... I'm only a periodic hobbyist when it comes to design.


Is it a use case we care about?  Who knows.  I didn't think about it that deeply (yet?).

Hopefully that clears it up.

Received on Wednesday, 20 July 2011 03:04:17 UTC