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

[css3-images] gradient sizing for GC?

From: Brian Manthos <brianman@microsoft.com>
Date: Fri, 15 Apr 2011 00:27:57 +0000
To: www-style list <www-style@w3.org>
Message-ID: <FA122FEC823D524CB516E4E0374D9DCF19CBFE8D@TK5EX14MBXC132.redmond.corp.microsoft.com>
I didn't find any guidance from the specs on image size for gradients when used as GC.  Is there any?

Chrome 10 basically makes them the size of the entire window, which is undesirable IMO.  Firefox, Opera, and Safari don't appear to support it yet.

Sample below.

- Brian


<!doctype html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=10">
	<style>
	div {
		background-color: green;
	}
	div:before {
		content: url(http://www.bing.com/favicon.ico);
		content: -moz-linear-gradient(red, blue);
		content: -ms-linear-gradient(red, blue);
		content: -o-linear-gradient(red, blue);
		content: -webkit-linear-gradient(red, blue);
		content: linear-gradient(red, blue);
	}
	div:after {
		content: url(http://www.microsoft.com/favicon.ico) url(http://www.msn.com/favicon.ico);
		content: -moz-radial-gradient(red, blue) url(http://www.msn.com/favicon.ico);
		content: -ms-radial-gradient(red, blue) url(http://www.msn.com/favicon.ico);
		content: -o-radial-gradient(red, blue) url(http://www.msn.com/favicon.ico);
		content: -webkit-radial-gradient(red, blue) url(http://www.msn.com/favicon.ico);
		content: radial-gradient(red, blue) url(http://www.msn.com/favicon.ico);
	}
	</style>
</head>
<body>
	<div>text</div>
</body>
</html>
Received on Friday, 15 April 2011 00:28:27 GMT

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