- From: Brian Manthos <brianman@microsoft.com>
- Date: Sun, 9 Oct 2011 21:40:25 +0000
- To: Sylvain Galineau <sylvaing@microsoft.com>, Alan Gresley <alan@css-class.com>, Brad Kemper <brad.kemper@gmail.com>, Chris Lilley <chris@w3.org>, Tab Atkins Jr. <jackalmage@gmail.com>
- CC: "www-style@w3.org" <www-style@w3.org>
- Message-ID: <9710FCC2E88860489239BE0308AC5D17F010C0@TK5EX14MBXC266.redmond.corp.microsoft.co>
Rainbow example, showing some more off-center gradients.
It's pretty easy to add a streak above the raindrop, but the prefixes are making the style block huge so I held off.
-Brian
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<style>
html
{
height: 100%;
background-image: none;
background-size: 100% 100%;
background-color: silver;
}
div
{
border-radius: 50%;
border: double 6px midnightblue;
background-clip: padding-box;
background-color: skyblue;
background-image: -moz-radial-gradient(50% 100%, 50% 100%, transparent, rgba(0, 0, 0, 0.5) 100%, transparent),
-moz-radial-gradient(50% 0%, 50% 25%, transparent, rgba(0, 0, 0, 0.5) 100%, transparent),
-moz-linear-gradient(bottom, sienna 75%, rgba(128, 128, 0, 0.5)),
-moz-radial-gradient(center 115%, 100px 100px, transparent 75%, violet 75%, indigo, blue, green, yellow, orange, red 100%, transparent);
background-image: -ms-radial-gradient(50% 100%, 50% 100%, transparent, rgba(0, 0, 0, 0.5) 100%, transparent),
-ms-radial-gradient(50% 0%, 50% 25%, transparent, rgba(0, 0, 0, 0.5) 100%, transparent),
-ms-linear-gradient(bottom, sienna 75%, rgba(128, 128, 0, 0.5)),
-ms-radial-gradient(center 115%, 100px 100px, transparent 75%, violet 75%, indigo, blue, green, yellow, orange, red 100%, transparent);
background-image: -o-radial-gradient(50% 100%, 50% 100%, transparent, rgba(0, 0, 0, 0.5) 100%, transparent),
-o-radial-gradient(50% 0%, 50% 25%, transparent, rgba(0, 0, 0, 0.5) 100%, transparent),
-o-linear-gradient(bottom, sienna 75%, rgba(128, 128, 0, 0.5)),
-o-radial-gradient(center 115%, 100px 100px, transparent 75%, violet 75%, indigo, blue, green, yellow, orange, red 100%, transparent);
background-image: -webkit-radial-gradient(50% 100%, 50% 100%, transparent, rgba(0, 0, 0, 0.5) 100%, transparent),
-webkit-radial-gradient(50% 0%, 50% 25%, transparent, rgba(0, 0, 0, 0.5) 100%, transparent),
-webkit-linear-gradient(bottom, sienna 75%, rgba(128, 128, 0, 0.5)),
-webkit-radial-gradient(center 115%, 100px 100px, transparent 75%, violet 75%, indigo, blue, green, yellow, orange, red 100%, transparent);
background-image: radial-gradient(50% 100%, 50% 100%, transparent, rgba(0, 0, 0, 0.5) 100%, transparent),
radial-gradient(50% 0%, 50% 25%, transparent, rgba(0, 0, 0, 0.5) 100%, transparent),
linear-gradient(bottom, sienna 75%, rgba(128, 128, 0, 0.5)),
radial-gradient(center 115%, 100px 100px, transparent 75%, violet 75%, indigo, blue, green, yellow, orange, red 100%, transparent);
background-position: 30px 30px, 30px 50px, 50% 100%, 50% 0%;
background-repeat: no-repeat;
background-size: 10px 20px, 10px 20px, 100% 40%, 100% 70%;
height: 200px;
margin: 10px;
width: 200px;
}
div:nth-child(2)
{
height: 150px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
Attachments
- text/html attachment: GradientRainbowScene1.htm
Received on Sunday, 9 October 2011 21:40:57 UTC