- From: Brian Manthos <brianman@microsoft.com>
- Date: Sat, 8 Oct 2011 10:02:12 +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: <9710FCC2E88860489239BE0308AC5D17F003A7@TK5EX14MBXC266.redmond.corp.microsoft.co>
Awning example. Or maybe a bird feather. Anyway, make of it what you like. :)
Like the spotlight example, this leverages the center-point-position parameter of radial-gradient.
Notes:
(1) It also uses farthest-side, but that's probably not required; I just find the keywords far more convenient than adjusting the math whenever I want to change the background-size.
(2) Prefixing has its moments. This isn't one of them. :(
-Brian
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<style>
html
{
height: 100%;
background-image: none;
}
div
{
width: 600px;
height: 70px;
background-image: -moz-radial-gradient(50% 25%, farthest-side circle, red, tan 75%, transparent 75%),
-moz-radial-gradient(50% 25%, farthest-side circle, orange, tan 75%, transparent 75%),
-moz-radial-gradient(50% 25%, farthest-side circle, yellow, tan 75%, transparent 75%),
-moz-radial-gradient(50% 25%, farthest-side circle, green, tan 75%, transparent 75%),
-moz-radial-gradient(50% 25%, farthest-side circle, blue, tan 75%, transparent 75%),
-moz-radial-gradient(50% 25%, farthest-side circle, indigo, tan 75%, transparent 75%);
background-image: -ms-radial-gradient(50% 25%, farthest-side circle, red, tan 75%, transparent 75%),
-ms-radial-gradient(50% 25%, farthest-side circle, orange, tan 75%, transparent 75%),
-ms-radial-gradient(50% 25%, farthest-side circle, yellow, tan 75%, transparent 75%),
-ms-radial-gradient(50% 25%, farthest-side circle, green, tan 75%, transparent 75%),
-ms-radial-gradient(50% 25%, farthest-side circle, blue, tan 75%, transparent 75%),
-ms-radial-gradient(50% 25%, farthest-side circle, indigo, tan 75%, transparent 75%);
background-image: -o-radial-gradient(50% 25%, farthest-side circle, red, tan 75%, transparent 75%),
-o-radial-gradient(50% 25%, farthest-side circle, orange, tan 75%, transparent 75%),
-o-radial-gradient(50% 25%, farthest-side circle, yellow, tan 75%, transparent 75%),
-o-radial-gradient(50% 25%, farthest-side circle, green, tan 75%, transparent 75%),
-o-radial-gradient(50% 25%, farthest-side circle, blue, tan 75%, transparent 75%),
-o-radial-gradient(50% 25%, farthest-side circle, indigo, tan 75%, transparent 75%);
background-image: -webkit-radial-gradient(50% 25%, farthest-side circle, red, tan 75%, transparent 75%),
-webkit-radial-gradient(50% 25%, farthest-side circle, orange, tan 75%, transparent 75%),
-webkit-radial-gradient(50% 25%, farthest-side circle, yellow, tan 75%, transparent 75%),
-webkit-radial-gradient(50% 25%, farthest-side circle, green, tan 75%, transparent 75%),
-webkit-radial-gradient(50% 25%, farthest-side circle, blue, tan 75%, transparent 75%),
-webkit-radial-gradient(50% 25%, farthest-side circle, indigo, tan 75%, transparent 75%);
background-image: radial-gradient(50% 25%, farthest-side circle, red, tan 75%, transparent 75%),
radial-gradient(50% 25%, farthest-side circle, orange, tan 75%, transparent 75%),
radial-gradient(50% 25%, farthest-side circle, yellow, tan 75%, transparent 75%),
radial-gradient(50% 25%, farthest-side circle, green, tan 75%, transparent 75%),
radial-gradient(50% 25%, farthest-side circle, blue, tan 75%, transparent 75%),
radial-gradient(50% 25%, farthest-side circle, indigo, tan 75%, transparent 75%);
background-position: 0px 0px, 10px 10px, 0px 20px, 10px 30px, 0px 40px, 10px 50px;
background-repeat: repeat-x;
background-size: 20px 20px;
border-radius: 25% 25% 0% 0% / 50% 50% 0% 0%;
}
div:nth-child(2)
{
background-position: 0px 0px, 5px 5px, 0px 10px, 5px 15px, 0px 20px, 5px 25px;
background-size: 10px 10px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
Attachments
- text/html attachment: GradientAwning1.htm
Received on Saturday, 8 October 2011 10:02:49 UTC