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

• From: Brian Manthos <brianman@microsoft.com>
• Date: Fri, 7 Oct 2011 23:00:13 +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: <9710FCC2E88860489239BE0308AC5D17EFF8D0@TK5EX14MBXC266.redmond.corp.microsoft.co>

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:00:54 UTC