Re: [css3-images] exactly 2 adjacent colors stops

Before I begin, I would say that the examples found in my testing (see 
below) is the best argument (or reason) why the regiment of _vendor 
prefixes_ are an absolute must.


Including my reply to Brad from another thread 'Re: Gradients and 
background-repeat' [1] here.

On 15/05/2011 4:29 AM, Brad Kemper wrote:
>
> On May 13, 2011, at 11:50 PM, Alan Gresley wrote:
>
>> http://css-class.com/test/css/3/gradients/linear-gradients-repeat1.htm
>>
>> The examples 'Grate 3' and 'Grate 4' require an extra inner
>> element that is rotated by 2D transforms. Now if I wanted
>> to have text running from left to right (not rotated), I
>> would have to add an additional element. If I could use
>> background-rotate, then I wouldn't have to jump through such hoops.
>
> I will save Tab the effort of pointing out that you could have done
> those with repeating-linear-gradient too, with no hoops. But it does
> illustrate that authors (like us) do tend to first try to use
> background properties as the means of repeating background patterns,
> and that comes much more naturally than to consider offloading the
> tiling to within a single image.

I finally figured out how to achieve repeating backgrounds by using 
repeating-linear-gradient but before I could really do it right, I had 
to first understand some bizarre behavior that I was observing. It only 
happens when you begin your gradient at a distance beyond 50% and there 
must be a minimum of 2 color stops.


>> On Tue, May 17, 2011 at 1:31 AM, Alan Gresley<alan@css-class.com>
>> wrote:
>>> Chrome is doing something wrong but I don't know where to report
>>> such
>> bugs.
>>
>> bugs.webkit.org
>>
>> ~TJ

Thank you Tab. I was wondering because I have noticed some forking in 
behaviors between Safari and Chrome. From an authors perspective, this 
is not good (especially if it's CSS with vendor-prefixes).


On 18/05/2011 4:20 AM, Brian Manthos wrote:

Brain, can you please bottom post. Makes is so much easier to follow a 
thread.

> BTW, this is one of the challenges of shorthands combined with vendor
> prefixing.  It's easy to distract and confuse web authors from the
> "real work" by having to chase down the root cause of such things.  I
> don't have a solution in mind (yet), just a problem observation.
>
> -Brian

The simple solution is to allow a forward slash '/' in background 
shorthand which IE9 preview supported but I presume that can only happen 
when vendor prefixes are dropped.

OK, moving onto repeating-linear-gradient that repeats over it's own tile.

http://css-class.com/test/css/3/gradients/repeating-linear-gradients-stops.htm

Testing with Firefox 4.0.1, Chrome 11.0.696.68, IE10 preview and Opera 
11.11.


The first example 'Normal repeat' shows how to repeat a linear-gradient 
using background-size.

The second example 'Test 1' shows a repeating-linear-gradient with two 
color stops. Please note that all browsers except IE10, show this usual 
repeating over the background tile. IE10 shows the same as the previous 
example.

The next example 'Test 2' shows a repeating-linear-gradient with three 
color stops. Please note that all browsers except IE10 and Chrome, show 
this usual repeating over the background tile. IE10 seem to mirror the 
gradient. Chrome does the usual repeating over the initial tile but then 
it goes into overdrive.

The examples 'Test 3' and 'Test 4' are just for IE10. The two examples 
should look identical but not in IE10.

The example 'Test 5' is the same as the example in the draft spec using 
'repeating-linear-gradient(red 10px, blue 50px)’ and example 'Test 6' is 
a variant of this. Again IE10 is doing something wrong.


 From an author perspective a repeating-linear-gradient that repeats 
over it's own tile can give some extraordinary results. My question is, 
should it be happening in the first place? If it should, examples are 
needed in the draft spec.


[1] http://lists.w3.org/Archives/Public/www-style/2011May/0327.html


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

Received on Tuesday, 24 May 2011 13:33:57 UTC