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

Re: [CSS3] linear-gradient() proposal

From: Alan Gresley <alan@css-class.com>
Date: Mon, 28 Mar 2011 05:01:28 +1100
Message-ID: <4D8F7B78.1060304@css-class.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
CC: Andrew Fedoniouk <andrew.fedoniouk@live.com>, www-style@w3.org
On 28/03/2011 4:25 AM, Andrew Fedoniouk wrote:
> 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?


Like this (no need for background-size here).


<!DOCTYPE html>
<style type="text/css">
p {
border: 2px dotted yellow;
height: 250px;
width: 250px;
position: absolute;
margin:0;
margin-left:175px;
}
div {
border: 2px solid black;
height: 250px;
width: 600px;
background: #385179;
background: -moz-linear-gradient(-45deg, white 125px, black 475px) 0 0 
no-repeat;
}
</style>
<p></p>
<div></div>


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

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Sunday, 27 March 2011 18:02:04 GMT

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