W3C home > Mailing lists > Public > www-style@w3.org > August 2012

Re: [css4-images] non-premultiplied gradients and in the wild

From: Alan Gresley <alan@css-class.com>
Date: Thu, 30 Aug 2012 18:43:50 +1000
Message-ID: <503F27C6.7020301@css-class.com>
To: Rik Cabanier <cabanier@gmail.com>
CC: "Tab Atkins Jr." <jackalmage@gmail.com>, www-style list <www-style@w3.org>
On 30/08/2012 6:09 PM, Alan Gresley wrote:

>> Correct.
>> Special casing 'transparent' so it does this under the hood would be much
>> better. I'm unsure if we can change it at this point, although there are
>> probably few people that rely on this...
>
> See here.
>
> http://www.google.com.au/#hl=en&q=CSS+gradient+with+transparency

4th hit:

http://nicolahibbert.com/css3-alpha-transparent-gradients/

Examples also for FF.



5th hit:

http://www.webdesignerdepot.com/2010/11/adding-transparencies-and-gradients-with-css/

Example:

/* For Mozilla */
  background: -moz-linear-gradient(left, rgba(255,0,0,1), 
rgba(0,255,0,.25));



11th hit and on Mozilla.

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_gradients?redirectlocale=en-US&redirectslug=Using_gradients#Examples.3A_Repeating_linear_gradient

Example:

background-color: #000;
background-image: repeating-linear-gradient(90deg, transparent, 
transparent 50px,
       rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, 
transparent 56px, transparent 63px,
       rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, 
transparent 69px, transparent 116px,
       rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 
127, 0, 0.25) 50px,
       rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, 
rgba(255, 127, 0, 0.25) 63px,
       rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 
116px, rgba(255, 206, 0, 0.25) 116px,
       rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(-45deg, transparent, transparent 5px, 
rgba(143, 77, 63, 0.25) 5px,
       rgba(143, 77, 63, 0.25) 10px),
repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 
77, 63, 0.25) 5px,
       rgba(143, 77, 63, 0.25) 10px);


This is surely in the wild.


Alan



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Thursday, 30 August 2012 08:44:18 GMT

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