- 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>
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 UTC