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

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 UTC