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

RE: [css3-images] simplifying radial gradients - Lea Verou gallery

From: Brian Manthos <brianman@microsoft.com>
Date: Fri, 7 Oct 2011 23:01:24 +0000
To: Sylvain Galineau <sylvaing@microsoft.com>, Alan Gresley <alan@css-class.com>
CC: "L. David Baron" <dbaron@dbaron.org>, Brad Kemper <brad.kemper@gmail.com>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <9710FCC2E88860489239BE0308AC5D17EFF8F1@TK5EX14MBXC266.redmond.corp.microsoft.com>
Note that this is just for the top-level page.  I didn't dig deeper by clicking on anything.

-----Original Message-----
From: Brian Manthos 
Sent: Friday, October 07, 2011 4:00 PM
To: Sylvain Galineau; Alan Gresley
Cc: L. David Baron; Brad Kemper; www-style@w3.org
Subject: RE: [css3-images] simplifying radial gradients - Lea Verou gallery

Sylvain:
> Lea Verou's pattern gallery: http://leaverou.me/css3patterns/#


Quick and dirty pass...

Exactly 50% of the radial gradients usage in Lea's page aren't directly supported by Brad's proposal.


Supported:
1.	radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%)
2.	radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%)
3.	radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0))
4.	radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0))
5.	radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%)
6.	radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%)
7.	radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0))
8.	radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0))
9.	radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px)
10.	radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px)
11.	radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px)
12.	radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px)
13.	radial-gradient(midnightblue 9px, transparent 10px)
14.	repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px)
15.	radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%)
16.	radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%)
17.	radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%)
18.	radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%)
19.	radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%)
20.	radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%)
21.	radial-gradient(black 15%, transparent 16%)
22.	radial-gradient(black 15%, transparent 16%)
23.	radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%)
24.	radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%)
25.	radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent)
26.	radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent)
27.	radial-gradient(white 15%, transparent 16%)

Not supported:
1.	radial-gradient(60% 43%, closest-side circle, #b03 26%, rgba(187,0,51,0) 27%)
2.	radial-gradient(40% 43%, closest-side circle, #b03 26%, rgba(187,0,51,0) 27%)
3.	radial-gradient(40% 22%, closest-side circle, #d35 45%, rgba(221,51,85,0) 46%)
4.	radial-gradient(60% 22%, closest-side circle, #d35 45%, rgba(221,51,85,0) 46%)
5.	radial-gradient(50% 35%, closest-side circle, #d35 30%, rgba(221,51,85,0) 31%)
6.	radial-gradient(60% 43%, closest-side circle, #b03 26%, rgba(187,0,51,0) 27%)
7.	radial-gradient(40% 43%, closest-side circle, #b03 26%, rgba(187,0,51,0) 27%)
8.	radial-gradient(40% 22%, closest-side circle, #d35 45%, rgba(221,51,85,0) 46%)
9.	radial-gradient(60% 22%, closest-side circle, #d35 45%, rgba(221,51,85,0) 46%)
10.	radial-gradient(50% 35%, closest-side circle, #d35 30%, rgba(221,51,85,0) 31%)
11.	radial-gradient(100% 50%, circle, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent)
12.	radial-gradient(0% 50%, circle, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent)
13.	radial-gradient(50% 59%, circle, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0))
14.	radial-gradient(50% 41%, circle, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0))
15.	radial-gradient(50% 59%, circle, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0))
16.	radial-gradient(50% 41%, circle, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0))
17.	radial-gradient(100% 50%, circle, #D2CAAB 16%, rgba(210,202,171,0) 17%)
18.	radial-gradient(0% 50%, circle, #364E27 16%, rgba(54,78,39,0) 17%)
19.	radial-gradient(100% 50%, circle, #D2CAAB 16%, rgba(210,202,171,0) 17%)
20.	radial-gradient(0% 50%, circle, #364E27 16%, rgba(54,78,39,0) 17%)
21.	radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%)
22.	radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%)
23.	radial-gradient(100% 150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent)
24.	radial-gradient(0    150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent)
25.	radial-gradient(50%  100%, circle, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent)
26.	radial-gradient(100% 50%,  circle, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent)
27.	radial-gradient(0    50%,  circle, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent)
Received on Friday, 7 October 2011 23:02:01 GMT

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