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

Re: [css4-images] Conical gradients proposal

From: Lea Verou <leaverou@gmail.com>
Date: Tue, 22 Nov 2011 18:09:13 -0800
Message-ID: <4ECC55C9.6020209@gmail.com>
To: Brian Manthos <brianman@microsoft.com>
CC: www-style list <www-style@w3.org>
Thank you! Updated.

On 22/11/11 18:06, Brian Manthos wrote:
> Attached is a prettier rendering for the second case in Example 4, in case you'd like to crop it for your draft.
>
> -Brian
>
>
> <!DOCTYPE html>
> <html>
> <head>
> 	<meta http-equiv="X-UA-Compatible" content="IE=10"/>
> 	<style>
> 		div
> 		{
> 			display: inline-block;
> 			height: 100px;
> 			width: 200px;
> 			background-image: -ms-linear-gradient(180deg, #f06, #f06 50%, transparent 50%),
> 			                  -ms-linear-gradient(162deg, black, black 50%, transparent 50%),
> 			                  -ms-linear-gradient(144deg, #f06, #f06 50%, transparent 50%),
> 			                  -ms-linear-gradient(126deg, black, black 50%, transparent 50%),
> 			                  -ms-linear-gradient(108deg, #f06, #f06 50%, transparent 50%),
> 			                  -ms-linear-gradient( 90deg, black, black 50%, transparent 50%),
> 			                  -ms-linear-gradient( 72deg, #f06, #f06 50%, transparent 50%),
> 			                  -ms-linear-gradient( 54deg, black, black 50%, transparent 50%),
> 			                  -ms-linear-gradient( 36deg, #f06, #f06 50%, transparent 50%),
> 			                  -ms-linear-gradient( 18deg, black, black 50%, #f06 50%);
> 		}
> 		div:nth-child(2)
> 		{
> 			-ms-transform: rotate(180deg);
> 			position: relative;
> 			left: -100px;
> 			width: 100px;
> 			background-size: 200px 100px;
> 		}
> 	</style>
> </head>
> 	<body>
> 		<div></div><div></div>
> 	</body>
> </html>


-- 
Lea Verou (http://lea.verou.me | @LeaVerou)
Received on Wednesday, 23 November 2011 02:09:43 GMT

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