Re: Gradients and background-repeat (Was: Re: Automatic spec annotations)

On 14/05/2011 3:05 AM, Brad Kemper wrote:
>
> On May 12, 2011, at 1:23 PM, Tab Atkins Jr. wrote:

[snipped magic voodoo logic debate]

>> The fact that it's tightly integrated with backgrounds is part of
>> the badness.
>
> Bizzarre. Whatever damage you think this 'magic' causes would have a
> very limited effect, because it is just two background properties
> that affect each other, just as any other two background properties
> will affect each other. For instance, the actual x/y positioning of
> each drawn background tile in an element is affected by values from
> 'background-position', 'background-repeat' ('space', 'round'),
> 'background-origin', 'background-size', etc. These properties are all
> designed to work well together, and that is what I am proposing too,
> that 'background-rotate' and 'background-image' could also be
> designed to work well together.


I have not seen Tab's ways but I have to agree with Brad here.

One test which use radial-gradient, background-position, background-size 
and background-repeat.


<!doctype html>

<style type="text/css">
div {
   height: 200px;
   width: 200px;
   background: rgb(51,51,51) -webkit-radial-gradient(rgba(51,51,51,0) 
67.5%, rgba(220,220,255,1) 97.5%) -100px -100px;
   background: rgb(51,51,51) -moz-radial-gradient(rgba(51,51,51,0) 
67.5%, rgba(220,220,255,1) 97.5%) -100px -100px;
   background: rgb(51,51,51) -ms-radial-gradient(rgba(51,51,51,0) 67.5%, 
rgba(220,220,255,1) 97.5%) -100px -100px;
   background-size: 200px 200px;
}
</style>

<div></div>


Now if I wanted that 4 pointed star to appear a 45% (clockwise), I would 
have to use 4 radial-gradient layers and use the final layer 
'background-color' for the color of the star. I presuming that I could 
get close but not close enough. If I wanted the star to have variation 
in color, then that's the end of the story.

Another test using some value at the beginning of gradient (haven't a 
clue yet what it quite does but I like it anyway).


<!doctype html>
<style type="text/css">
div {
   height: 200px;
   width: 400px;
}
#one {
   background: rgb(51,51,51) -webkit-radial-gradient(-100%, 
rgba(51,51,51,0) 67.5%, rgba(220,220,255,1) 97.5%) -100px -100px;
   background: rgb(51,51,51) -moz-radial-gradient(-100%, 
rgba(51,51,51,0) 67.5%, rgba(220,220,255,1) 97.5%) -100px -100px;
   background: rgb(51,51,51) -ms-radial-gradient(-100%, rgba(51,51,51,0) 
67.5%, rgba(220,220,255,1) 97.5%) -100px -100px;
   background-size: 200px 200px;
}
#two {
   background: rgb(51,51,51) -webkit-radial-gradient(200%, 
rgba(51,51,51,0) 67.5%, rgba(220,220,255,1) 97.5%) -100px -100px;
   background: rgb(51,51,51) -moz-radial-gradient(200%, rgba(51,51,51,0) 
67.5%, rgba(220,220,255,1) 97.5%) -100px -100px;
   background: rgb(51,51,51) -ms-radial-gradient(200%, rgba(51,51,51,0) 
67.5%, rgba(220,220,255,1) 97.5%) -100px -100px;
   background-size: 200px 200px;
}
</style>
<div id="one"></div>
<div id="two"></div>


Unlike the first simple star, this can not be created easy with multiple 
layers. A property like background-rotate would make it simple.


[snip]

> And by the way, even if there was not a 'background-rotate: auto'
> that worked as I described, that need would still be met by
> 'background-repeat:<angle>', but just a little less elegantly, as the
> author could set the gradient angle to zero himself, and then enter
> the angle he wants into background-rotate directly. Et voila,
> gradients aligned to x/y axes, repeated, and then rotated. Do you
> also deny that 'background-rotate' (or perhaps
> 'background-transform', though I think that would be overkill) would
> be good to have on general principles, even if not used with
> gradients?


I would like background-rotate to work with any background-image, not 
just gradients. Within the syntax for a possible background-rotate, it 
would be good to see the option for background-rotate-origin (working 
similar to transform-origin in 2D transforms).


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Friday, 13 May 2011 23:44:25 UTC