- From: Brian Manthos <brianman@microsoft.com>
- Date: Fri, 15 Apr 2011 00:27:57 +0000
- To: www-style list <www-style@w3.org>
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 UTC