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