This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
ideas:radial-gradient-readability [2011/11/30 09:00] fantasai [Latest Proposal] |
ideas:radial-gradient-readability [2014/12/09 15:48] (current) |
||
|---|---|---|---|
| Line 6: | Line 6: | ||
| * for CSS3: ''radial-gradient([ <extent> || <shape> ] at <position>, <colors>)'' | * for CSS3: ''radial-gradient([ <extent> || <shape> ] at <position>, <colors>)'' | ||
| * for CSS4: ''radial-gradient([ <extent> || <shape> ] at <position> [from <position> | from-offset <length>{1,2}], <colors>)'' | * for CSS4: ''radial-gradient([ <extent> || <shape> ] at <position> [from <position> | from-offset <length>{1,2}], <colors>)'' | ||
| - | |||
| - | Here ''<extent>'' is either a ''farthest/closest-side/corner'' keyword or an explicit ''<length>{1,2}''. Example: ''radial-gradient(5em circle at 10% 15%, white, black)'' | ||
| - | |||
| - | Everything is optional except the colors. Examples: ''radial-gradient(5em, white, black)'', ''radial-gradient(circle, white, black)'', ''radial-gradient(at top left, white, black)'', ''radial-gradient(white, black)''. | ||
| Because the default size is ''cover'', this means: | Because the default size is ''cover'', this means: | ||
| Line 16: | Line 12: | ||
| <html><a href="data:text/html;charset=utf-8,<!DOCTYPE%20html>%0A<div><%2Fdiv>%0A<div>%0A<style>%0Adiv%20%7B%20%0Awidth%3A%20200px%3B%0Aheight%3A%20200px%3B%0Aborder%3A%20thin%20solid%3B%0Afloat%3A%20left%3B%0Amargin%3A%2010px%3B%0A%7D%0Adiv%3Afirst-child%20%7B%20%0Abackground%3A%20-webkit-gradient(radial%2C%2025%25%2025%25%2C%200%2C%2050%25%2050%25%2C%20150%2C%20from(white)%2C%20to(black))%3B%0A%7D%0Adiv%3Anth-child(2)%20%7B%0Abackground%3A%20-webkit-gradient(radial%2C%2025%25%2025%25%2C%200%2C%2025%25%2025%25%2C%20225%2C%20from(white)%2C%20to(black))%3B%0A%7D">Illustration of moving geometric center vs. moving color focus</a></html> (view in webkit) | <html><a href="data:text/html;charset=utf-8,<!DOCTYPE%20html>%0A<div><%2Fdiv>%0A<div>%0A<style>%0Adiv%20%7B%20%0Awidth%3A%20200px%3B%0Aheight%3A%20200px%3B%0Aborder%3A%20thin%20solid%3B%0Afloat%3A%20left%3B%0Amargin%3A%2010px%3B%0A%7D%0Adiv%3Afirst-child%20%7B%20%0Abackground%3A%20-webkit-gradient(radial%2C%2025%25%2025%25%2C%200%2C%2050%25%2050%25%2C%20150%2C%20from(white)%2C%20to(black))%3B%0A%7D%0Adiv%3Anth-child(2)%20%7B%0Abackground%3A%20-webkit-gradient(radial%2C%2025%25%2025%25%2C%200%2C%2025%25%2025%25%2C%20225%2C%20from(white)%2C%20to(black))%3B%0A%7D">Illustration of moving geometric center vs. moving color focus</a></html> (view in webkit) | ||
| + | |||
| + | The ''<extent>'' is either a ''farthest/closest-side/corner'' keyword or an explicit ''<length>{1,2}''. Example: ''radial-gradient(5em circle at 10% 15%, white, black)'' | ||
| + | |||
| + | Everything is optional except the colors. Examples: ''radial-gradient(5em, white, black)'', ''radial-gradient(circle, white, black)'', ''radial-gradient(at top left, white, black)'', ''radial-gradient(white, black)''. | ||
| <html> | <html> | ||