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

RE: [css3-images] simplifying radial gradients - Rainbow example

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.com>
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>


Received on Sunday, 9 October 2011 21:40:57 GMT

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