Re: [CSS3] linear-gradient() proposal

I am not sure I understand how 'background-size' is relevant to the
problem.

Note: I am using linear-gradient, not radial one as in your sample.
Background-size defines [clipping] rectangle of the gradient fill.
Outside it you will have some solid color if any.

Let's assume that you want to achieve exactly this gradient:
http://terrainformatica.com/w3/linear-grdient-schema.png
how you would do this?

-- 
Andrew Fedoniouk

http://terrainformatica.com


-----Original Message----- 
From: Alan Gresley
Sent: Sunday, March 27, 2011 6:46 AM
To: Andrew Fedoniouk
Cc: Andrew Fedoniouk ; www-style@w3.org
Subject: Re: [CSS3] linear-gradient() proposal

On 27/03/2011 4:15 PM, Andrew Fedoniouk wrote:

> Position of this rectangle inside background box of the element is defined
> by the <background-position>, see:
> http://www.w3.org/TR/CSS2/colors.html#propdef-background-position
>
> So syntax of linear-gradient() declaration will look like this:
>
> <linear-gradient> = linear-gradient(
> [ <background-position> || <angle> ,]? <color-stop>[, olor-stop>]+ );
>
> Here is an illustration of such "gradients with alignment":
> http://terrainformatica.com/w3/linear-align-1.png


You can use background-size with gradients.

<!DOCTYPE html>
<style type="text/css">
div {
height: 200px; width: 200px;
-moz-border-radius: 100px 100px;
border-radius: 100px 100px;
background: #385179;
background: #385BE1 -moz-radial-gradient(rgba(255,255,255,1),
rgba(56,91,225,0)) -50px -50px no-repeat;
background: #385BE1 -webkit-gradient(radial, 125 125, 0, 125 125, 150,
from(rgba(255,255,255,1)), to(rgba(56,91,225,0))) -50px -50px no-repeat;
-moz-background-size: 250px 250px;
background-size: 250px 250px;
}
</style>
<div></div>


Also the I believe the current CSS gradient behavior is the same as SVG
gradients.



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Sunday, 27 March 2011 17:25:45 UTC