Differences

This shows you the differences between two versions of the page.

Link to this comparison view

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>​
 
ideas/radial-gradient-readability.txt · Last modified: 2014/12/09 15:48 (external edit)
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki