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:44:42 +0000
To: Brian Manthos <brianman@microsoft.com>, 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: <9710FCC2E88860489239BE0308AC5D17F010EC@TK5EX14MBXC266.redmond.corp.microsoft.com>
Minor correction:  The unprefixed version of the 3rd layer linear should have "to top" rather than "bottom".  Mea culpa.

> -----Original Message-----
> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On
> Behalf Of Brian Manthos
> Sent: Sunday, October 09, 2011 2:40 PM
> To: Sylvain Galineau; Alan Gresley; Brad Kemper; Chris Lilley; Tab
> Atkins Jr.
> Cc: www-style@w3.org
> Subject: RE: [css3-images] simplifying radial gradients - Rainbow
> example
> 
> 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:45:22 GMT

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