THECSS3 OFTOMORROW         peter gasston        @stopsatgreen      broken-links.com
“35 Awesome CSS3 Examples!” “50+ Best CSS3 Examples!”     “350+ Amazing CSS3   Resources - All Youll EverNeed to Become a ...
BORDER-RADIUS  border-radius: 5px;  border-radius: 5px 5px 0 0;  border-radius: 5px 0 / 2px 0;
BOX SHADOWbox-shadow: 2px 2px 2px #000;box-shadow: inset 2px 2px 2px #000;
TEXT SHADOWtext-shadow: 2px 2px 2px #000;text-shadow: 0 -1px #000, 0 1px #fff;
BACKGROUNDS & BORDERSbackground-image: url(img1.png),url(img2.png), url(img3.png);  border-image: url(img1.png)  20 25 20 ...
BACKGROUNDS & BORDERS
BACKGROUNDS & BORDERS
SELECTORS     :first-child | :last-child  :first-of-type | :last-of-type :nth-child() | :nth-last-child():nth-of-type() | ...
SELECTORS:nth-of-type(even):not(:last-of-type)
OPACITY, ALPHA & COLOUR         opacity: 0.5;   color: rgba(255,0,0,0.5);    color: hsl(0,100%,50%);  color: hsla(0,100%,5...
OPACITY, ALPHA & COLOUR
WEB FONTS @font-face {   font-family: My Font;   src: url(/path/to/font.woff); } h1 { font-family: My Font; }
WEB FONTS  http://lostworldsfairs.com
MEDIA QUERIES@media all and (min-device-width:480px)@media all and (-webkit-pixel-ratio:2)    @media screen not (monochrom...
MEDIA QUERIES  http://mediaqueri.es
LINEAR GRADIENTS      linear-gradient(red,blue);linear-gradient(45deg,red,yellow,blue);repeating-linear-gradient(red,blue ...
RADIAL GRADIENTS       radial-gradient(red,blue); radial-gradient(0 100%,farthest-side, red,yellow,blue);repeating-radial-...
RADIAL GRADIENTS     -moz-radial-gradient(100% 0,     circle,red,blue); -webkit-gradient(radial,100% 0,0,100% 0,number,fro...
2   2sqrt(x +y )
GRADIENTShttp://leaverou.me/css3patterns/
2D TRANSFORMATIONS       transform: rotate(45deg);     transform: skew(15deg,7.5deg);transform: scale(2) translate(1em,-25...
2D TRANSFORMATIONShttp://media.24ways.org/2009/14/5/index.html
3D TRANSFORMATIONS  transform: rotate3d(1,1,0,45deg);transform: translate3d(1em,-15px,10%);    transform: scale3d(0.5,3,1....
3D TRANSFORMATIONShttp://broken-links.com/tests/nakamats
TRANSITIONS      transition: all 1s linear;transition: width 2s 500ms ease-in-out;
ANIMATIONS  @keyframes name {    from { border-width: 10px; }    50% { border-width: 1px; }    to {      border-width: 1px...
MULTIPLE COLUMNS         column-count: 3;        column-width: 25em;        column-gap: 1.5em;   column-rule: 3px double #...
FLEXIBLE BOX LAYOUT                           div { display: box;   A           B           width: 80em; }                ...
FLEXIBLE BOX LAYOUT                                c        a                       a                                b.a {...
GRID POSITIONINGdiv {                         div {display: grid;                display: grid;grid-columns: 1fr 1fr 2fr; ...
GRID POSITIONING       .a {       grid-column: 2;       grid-row: 2;       grid-column-span: 2;       }
TEMPLATE LAYOUT           a           b                       a        b        c           c.a { position: a; }          ...
TEMPLATE LAYOUT         a                                   c                          a    b        c                    ...
GRID POSITIONING         a                         a         b                              b        c         c.a { grid-...
EXTENDED FLOATS                             div {                             float: positioned;                          ...
REGIONS           a                            .a { flow: foo; }                            .b { content: from(foo); }    ...
EXCLUSIONS.b {wrap-shape: polygon(150px,0 0,300px 300px,300px);wrap-shape-mode: around;}        http://dev.w3.org/csswg/cs...
EXCLUSIONS.a { wrap-shape-mode: content; }.b {wrap-shape: polygon(150px,0 0,300px 300px,300px);wrap-shape-mode: around;}
GROUPING SELECTOR header h1, article h1, aside h1 {}; :any(header,article,aside) h1 {} ol ul li a, ul ul li a, ul ul ul li...
CALCULATIONS      width: calc(20em + 10px);height: calc((85% / 4) – (1em + 2px));  border-width: calc(110px mod 4);
IMAGES             background: url(             img.png#xywh=0,20,25,30             );             background: -moz-image-...
CONDITIONAL RULES       @supports (display: grid) {}   @supports (display: box)   and (background: linear-gradient) {}   @...
CONDITIONAL RULES  @document url(http://w3.org/index.html) {}  @document url-prefix(http://w3.org/blog/) {}          @docu...
VARIABLES & MIXINS     @var $myColor #f00;     h1 { color: $myColor; }       @mixin myStuff {         color: #f00;        ...
VARIABLES & MIXINS   @mixin myStuff($myColor #f00) {     color: $myColor;     font-size: 1.5em;   }   h1 {     font-weight...
CSS4
THX. PLEASE BUY MY BOOKhttp://nostarch.com/css3.htm
LEGAL NOTE Superman copyright is a contentious issue, but the images Iuse here belong to DC Comics and no permission was g...
The CSS3 of Tomorrow (Version 2)
The CSS3 of Tomorrow (Version 2)
The CSS3 of Tomorrow (Version 2)
The CSS3 of Tomorrow (Version 2)
The CSS3 of Tomorrow (Version 2)
The CSS3 of Tomorrow (Version 2)
The CSS3 of Tomorrow (Version 2)
The CSS3 of Tomorrow (Version 2)
The CSS3 of Tomorrow (Version 2)
The CSS3 of Tomorrow (Version 2)
Upcoming SlideShare
Loading in...5
×

The CSS3 of Tomorrow (Version 2)

8,126

Published on

Revised and updated talk about the (possible) future of CSS3, as presented at London Web Standards on 27/06/11.

Published in: Technology
2 Comments
15 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,126
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
162
Comments
2
Likes
15
Embeds 0
No embeds

No notes for slide

The CSS3 of Tomorrow (Version 2)

  1. 1. THECSS3 OFTOMORROW peter gasston @stopsatgreen broken-links.com
  2. 2. “35 Awesome CSS3 Examples!” “50+ Best CSS3 Examples!” “350+ Amazing CSS3 Resources - All Youll EverNeed to Become a CSS3 Master!”
  3. 3. BORDER-RADIUS border-radius: 5px; border-radius: 5px 5px 0 0; border-radius: 5px 0 / 2px 0;
  4. 4. BOX SHADOWbox-shadow: 2px 2px 2px #000;box-shadow: inset 2px 2px 2px #000;
  5. 5. TEXT SHADOWtext-shadow: 2px 2px 2px #000;text-shadow: 0 -1px #000, 0 1px #fff;
  6. 6. BACKGROUNDS & BORDERSbackground-image: url(img1.png),url(img2.png), url(img3.png); border-image: url(img1.png) 20 25 20 25 stretch;
  7. 7. BACKGROUNDS & BORDERS
  8. 8. BACKGROUNDS & BORDERS
  9. 9. SELECTORS :first-child | :last-child :first-of-type | :last-of-type :nth-child() | :nth-last-child():nth-of-type() | :nth-last-of-type()
  10. 10. SELECTORS:nth-of-type(even):not(:last-of-type)
  11. 11. OPACITY, ALPHA & COLOUR opacity: 0.5; color: rgba(255,0,0,0.5); color: hsl(0,100%,50%); color: hsla(0,100%,50%,0.5);
  12. 12. OPACITY, ALPHA & COLOUR
  13. 13. WEB FONTS @font-face { font-family: My Font; src: url(/path/to/font.woff); } h1 { font-family: My Font; }
  14. 14. WEB FONTS http://lostworldsfairs.com
  15. 15. MEDIA QUERIES@media all and (min-device-width:480px)@media all and (-webkit-pixel-ratio:2) @media screen not (monochrome) @media screen and (max-device-width: 640px) and (-moz-touch-enabled: 1)
  16. 16. MEDIA QUERIES http://mediaqueri.es
  17. 17. LINEAR GRADIENTS linear-gradient(red,blue);linear-gradient(45deg,red,yellow,blue);repeating-linear-gradient(red,blue 10%);
  18. 18. RADIAL GRADIENTS radial-gradient(red,blue); radial-gradient(0 100%,farthest-side, red,yellow,blue);repeating-radial-gradient(red,blue 10%);
  19. 19. RADIAL GRADIENTS -moz-radial-gradient(100% 0, circle,red,blue); -webkit-gradient(radial,100% 0,0,100% 0,number,from(red),to(blue));
  20. 20. 2 2sqrt(x +y )
  21. 21. GRADIENTShttp://leaverou.me/css3patterns/
  22. 22. 2D TRANSFORMATIONS transform: rotate(45deg); transform: skew(15deg,7.5deg);transform: scale(2) translate(1em,-25px);
  23. 23. 2D TRANSFORMATIONShttp://media.24ways.org/2009/14/5/index.html
  24. 24. 3D TRANSFORMATIONS transform: rotate3d(1,1,0,45deg);transform: translate3d(1em,-15px,10%); transform: scale3d(0.5,3,1.1);
  25. 25. 3D TRANSFORMATIONShttp://broken-links.com/tests/nakamats
  26. 26. TRANSITIONS transition: all 1s linear;transition: width 2s 500ms ease-in-out;
  27. 27. ANIMATIONS @keyframes name { from { border-width: 10px; } 50% { border-width: 1px; } to { border-width: 1px; height: 120px; } } div { animation: name 1s linear; }
  28. 28. MULTIPLE COLUMNS column-count: 3; column-width: 25em; column-gap: 1.5em; column-rule: 3px double #f00; column-span: all;
  29. 29. FLEXIBLE BOX LAYOUT div { display: box; A B width: 80em; } .a,.b { width: 25em; } A B .a,.b { box-flex: 1; } A B .a { box-flex: 3; } .b { box-flex: 2; }http://netmag.co.uk/tutorials/css3-flexible-box-model-explained
  30. 30. FLEXIBLE BOX LAYOUT c a a b.a { div { box-orient: vertical; }box-flex: 0; .a,.b {box-align: center; box-ordinal-group: 2; }box-pack: center; .c {} box-ordinal-group: 1; }
  31. 31. GRID POSITIONINGdiv { div {display: grid; display: grid;grid-columns: 1fr 1fr 2fr; grid-columns: 1fr 1fr 2fr;} grid-rows: 80px auto 10em; } http://j.mp/kul0H1
  32. 32. GRID POSITIONING .a { grid-column: 2; grid-row: 2; grid-column-span: 2; }
  33. 33. TEMPLATE LAYOUT a b a b c c.a { position: a; } div {.b { position: b; } display: abc;.c { position: c; } } http://www.w3.org/TR/css3-layout/ http://code.google.com/p/css-template-layout/
  34. 34. TEMPLATE LAYOUT a c a b c bdiv { div {display: aa bc; display: acc a.b;} }
  35. 35. GRID POSITIONING a a b b c c.a { grid-cell: a; } div {.b { grid-cell: b; } grid-template: aa bc;.c { grid-cell: c; } }
  36. 36. EXTENDED FLOATS div { float: positioned; position: absolute; left: 33.3%; top: 100px; width: 33.3%; } http://www.interoperabilitybridges.com/css3-floats/
  37. 37. REGIONS a .a { flow: foo; } .b { content: from(foo); } b b .b, .c, .d, .e { e content: from(foo); c } d http://labs.adobe.com/technologies/cssregions/ http://dev.w3.org/csswg/css3-regions/
  38. 38. EXCLUSIONS.b {wrap-shape: polygon(150px,0 0,300px 300px,300px);wrap-shape-mode: around;} http://dev.w3.org/csswg/css3-exclusions/
  39. 39. EXCLUSIONS.a { wrap-shape-mode: content; }.b {wrap-shape: polygon(150px,0 0,300px 300px,300px);wrap-shape-mode: around;}
  40. 40. GROUPING SELECTOR header h1, article h1, aside h1 {}; :any(header,article,aside) h1 {} ol ul li a, ul ul li a, ul ul ul li a, ol ul ul li a {}; :any(ol,ul,ul ul,ol ul) ul li a {}
  41. 41. CALCULATIONS width: calc(20em + 10px);height: calc((85% / 4) – (1em + 2px)); border-width: calc(110px mod 4);
  42. 42. IMAGES background: url( img.png#xywh=0,20,25,30 ); background: -moz-image- rect(url(img.png),20, 20,0,0);background-image:url(img.svg),url(img.png) or #f00;
  43. 43. CONDITIONAL RULES @supports (display: grid) {} @supports (display: box) and (background: linear-gradient) {} @supports (display: box) or (background: linear-gradient) {} @supports not (transform: rotate3d) {} http://dev.w3.org/csswg/css3-conditional/
  44. 44. CONDITIONAL RULES @document url(http://w3.org/index.html) {} @document url-prefix(http://w3.org/blog/) {} @document domain(w3.org) {}@document regexp(http://w3.org/[^/]*-d{8}/) {}
  45. 45. VARIABLES & MIXINS @var $myColor #f00; h1 { color: $myColor; } @mixin myStuff { color: #f00; font-size: 1.5em; } h1 { font-weight: bold; @mix myStuff; } http://www.xanthir.com/blog/b4Av0
  46. 46. VARIABLES & MIXINS @mixin myStuff($myColor #f00) { color: $myColor; font-size: 1.5em; } h1 { font-weight: bold; @mix myStuff(#00f); }
  47. 47. CSS4
  48. 48. THX. PLEASE BUY MY BOOKhttp://nostarch.com/css3.htm
  49. 49. LEGAL NOTE Superman copyright is a contentious issue, but the images Iuse here belong to DC Comics and no permission was given. I hope they fall under fair use doctrines. You should buy a copy of All Star Superman – its really good!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×