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

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

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


Received on Saturday, 8 October 2011 10:02:49 GMT

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