Re: [css3-images] Summary of recent gradient issues

On 17/06/2011 4:22 AM, Tab Atkins Jr. wrote:
> On Wed, Jun 15, 2011 at 10:25 PM, Alan Gresley<alan@css-class.com>  wrote:
>> FYI, a transition from top to right, right to bottom, bottom to left and
>> left to top is inscribing the box. A transition from top right to bottom
>> right, bottom right to bottom left, bottom left to top left and top left to
>> top right is circumscribing the box.
>>
>> So any transition from side (top, right, bottom and left) to corner (top
>> right, bottom right, bottom left and top left) is also a transition from
>> inscribing to circumscribing.
>
> Not quite.  As the angle changes, the length of the gradient-line
> changes as well, so that the 0% and 100% colors are always exactly in
> a corner.  All of the transitions you list above are the same.
>
> ~TJ


Upon reading that I thought, mmmm, OK, if that is truly correct, then we 
can boxed the box and Eli's expectation (mine as well) of _I'd request 
no such magic when transforming the box itself_ does indeed happen.

It does create some interesting border affects when borders are 
semi-transparent considering the default behavior of background-repeat.

Here is a test (this is especially for those who are not following).

<!doctype html>

<style type="text/css">

div {
   height: 200px;
   width: 200px;
   border: 25px solid rgba(255,0,0,0.2);

   background: -webkit-linear-gradient(0deg, transparent 25%, 
rgba(0,0,255,0.5) 25%, rgba(0,0,255,0.5) 75%, transparent 75%), 
-webkit-linear-gradient(-90deg, transparent 25%, rgba(0,0,255,0.5) 25%, 
rgba(0,0,255,0.5) 75%, transparent 75%), -webkit-linear-gradient(-45deg, 
transparent 25%, silver 25%, silver 75%, transparent 75%), white;

   background: -moz-linear-gradient(0deg, transparent 25%, 
rgba(0,0,255,0.5) 25%, rgba(0,0,255,0.5) 75%, transparent 75%), 
-moz-linear-gradient(-90deg, transparent 25%, rgba(0,0,255,0.5) 25%, 
rgba(0,0,255,0.5) 75%, transparent 75%), -moz-linear-gradient(-45deg, 
transparent 25%, silver 25%, silver 75%, transparent 75%), white;

   background: -ms-linear-gradient(0deg, transparent 25%, 
rgba(0,0,255,0.5) 25%, rgba(0,0,255,0.5) 75%, transparent 75%), 
-ms-linear-gradient(-90deg, transparent 25%, rgba(0,0,255,0.5) 25%, 
rgba(0,0,255,0.5) 75%, transparent 75%), -ms-linear-gradient(-45deg, 
transparent 25%, silver 25%, silver 75%, transparent 75%), white;

   background: -o-linear-gradient(0deg, transparent 25%, 
rgba(0,0,255,0.5) 25%, rgba(0,0,255,0.5) 75%, transparent 75%), 
-o-linear-gradient(-90deg, transparent 25%, rgba(0,0,255,0.5) 25%, 
rgba(0,0,255,0.5) 75%, transparent 75%), -o-linear-gradient(-45deg, 
transparent 25%, silver 25%, silver 75%, transparent 75%), white;
}

</style>

<div></div>


One things I do note now is that this nullifies the affect on background 
size on the y axis if the color stops are percentages (expected since 
repeat-y takes over). I'm now understanding the full consequences of 6.1 
- Object-Sizing Terminology and how it can easy be played with to make 
pretty patterns.

This leads to another issue in what happens if the color stops are given 
in pixels in the hope that I can size something right when a 
linear-gradient is 45 degrees from of either the x or y axis. After some 
initial steps (example 2 and 3), I got to what I was after with example 
4 seen in this test.

http://css-class.com/test/css/3/gradients/linear-gradient-concrete-object-size.htm

Just imagining the syntax required to just spin that square box makes my 
head spin.

I wonder, Oracle, can you see in the future that rotate background tile 
may be considered? Also, Oracle, if such a thing is envisioned, will it 
behave when rotated as SVGs on steroids like linear-gradient or more 
like one would expect from a bitmap image?

:-)


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

Received on Friday, 17 June 2011 08:07:32 UTC