| Both sides previous revisionPrevious revision | Last revisionBoth sides next revision |
| ideas:radial-gradient-readability [2011/11/30 09:00] – [Latest Proposal] fantasai | ideas:radial-gradient-readability [2011/11/30 09:01] – [Latest Proposal] fantasai |
|---|
| * 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: |
| |
| <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> |
