W3C home > Mailing lists > Public > www-style@w3.org > May 2011

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

From: Alan Gresley <alan@css-class.com>
Date: Tue, 17 May 2011 11:11:48 +1000
Message-ID: <4DD1CB54.7080905@css-class.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: Brian Manthos <brianman@microsoft.com>, www-style list <www-style@w3.org>
On 17/05/2011 5:01 AM, Tab Atkins Jr. wrote:
> Brian pointed out privately that the first quote, despite being in the
> Repeating Gradients section and only applying to repeating gradients,
> uses a plain linear-gradient() function in the example.
>
> This is obviously a silly mistake, and I've fixed it in the draft now.
>
> ~TJ


Good, that was confusing me. While experimenting with 
repeating-linear-gradient, I have seen some spectacular fails in both 
Chrome 11 and IE10 Previews relating to not using initial color stops. I 
will bring this up in the other thread.


FYI, The code *-gradient(red 10px, blue 10px) when used with 
repeating-linear-gradient can be abused to create solid uniform color 
(opaque ~ transparent) shapes. Currently IE10 preview wrongly shows red.

<!doctype html>

<style type="text/css">
div {
   height: 200px;
   width: 200px;
   background: white -webkit-repeating-linear-gradient(red 10px, blue 
10px) 30px 30px no-repeat;
   background: white -moz-repeating-linear-gradient(red 10px, blue 10px) 
30px 30px no-repeat;
   background: white -ms-repeating-linear-gradient(red 10px, blue 10px) 
30px 30px no-repeat;
   background-size: 50px 100px;
}
</style>

<div></div>


I would prefer to see an non hacky way to do this. Perhaps a property 
called 'solid-color()'


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Tuesday, 17 May 2011 01:12:35 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:40 GMT