THECSS3 OFTOMORROW         peter gasston      broken-links.com        @stopsatgreen
“35 Awesome CSS3 Examples!”“50+ Best CSS3 Examples!”“Push Your Web Design IntoThe Future With CSS3!”“Amazing CSS3 Techniqu...
BORDER-RADIUS       border-radius: 5px;   border-radius: 5px 5px 0 0;  border-radius: 5px 0 / 2px 0;
BORDER-RADIUS
BOX & TEXT SHADOW  box-shadow: 2px 2px 2px #000; text-shadow: 2px 2px 2px #000; text-shadow: inset 2px 2px #000;
BOX & TEXT SHADOW
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
INTERMISSION<!--[if lt IE 9]>div { behavior: url(/path/to/PIE.htc); }<![endif]-->    http://css3pie.com/
WEB FONTS @font-face {   font-family: My Font;   src: url(/path/to/font.woff); } h1 { font-family: My Font; } http://fonts...
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(#f00,#00f); linear-gradient(45deg,#f00,#0f0,#00f);repeating-linear-gradient(#f00,#0...
LINEAR GRADIENTS
RADIAL GRADIENTS       radial-gradient(#f00,#00f);repeating-radial-gradient(#f00,#00f 10%);
RADIAL GRADIENTS -moz-radial-gradient(100% 0,circle farthest-corner,#f00,#00f); -webkit-gradient(radial,100% 0,0,100% 0,[n...
2   2sqrt(x +y )
worst.syntax.ever.
GRADIENTShttp://leaverou.me/css3patterns/
TRANSITIONS     transition: all 1s linear;  transition:  border-width 2s 500ms ease-in-out;
TRANSITIONShttp://broken-links.com/tests/upintheair
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
3D TRANSFORMATIONShttp://paulrhayes.com/experiments/sphere/
COMBINING EFFECTS http://thefeed.orange.co.uk
ANIMATIONS  @keyframes name {    from { border-width: 10px; }    50% { border-width: 1px; }    to {      border-width: 1px...
ANIMATIONShttp://animatable.com/demos/madmanimation/
INTERMISSION  <link href="basic.css"  media="screen" rel="stylesheet">  <link href="desktop.css"  media="screen and (min-w...
INTERMISSION  <!--[if lt IE 9]>  <link href="ie8.css"  media="screen" rel="stylesheet">  <![endif]-->  <!--[if lt IE 8]>  ...
INTERMISSION       <html class="no-js"><script src="modernizr.js"></script><html class="svg no-cssgradients">   http://mod...
INTERMISSIONdiv {background: url(img.png);background: linear-gradient(#f00,#00f);transition: all 1s ease-in;}.multiplebgs ...
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); width: calc((85% / 4) – (1em + 2px));   border-width: calc(110px mod 4);
MULTIPLE COLUMNS         column-count: 3;        column-width: 25em;        column-gap: 1.5em;   column-rule: 3px double #...
FLEXIBLE BOX LAYOUT         div { display: box; }         .a,.b { box-flex: 1; }         .a { box-flex: 3; }         .b { ...
FLEXIBLE BOX LAYOUT                              c                              a        a                              b....
GRID POSITIONING             div {             display: grid;             grid-columns: 1fr             1fr 2fr;          ...
GRID POSITIONING            .a {            grid-column: 2;            grid-row: 3;            grid-column-span: 2;       ...
TEMPLATE LAYOUT          a          b              a    b    c          c.a { position: a; }   div {.b { position: b; }   ...
TEMPLATE LAYOUT          a                               c                       a      b       c                    bdiv ...
REGIONS    a     .x { flow-thread: a; }          .y { flow-thread: b; }    b     .a,.c {            region-thread: a;    c...
REGIONS     1           .a,.b,.c,.d {                   display: region;             4   } 2               .a { region-ind...
IMAGES             background: url(             img.png#xywh=0,20,25,30             );             background: -moz-image-...
VARIABLES & MIXINS     @var $myColor #f00;     h1 { color: $myColor; }      @mixin myStuff {        color: #f00;        fo...
VARIABLES & MIXINS   @mixin myStuff($myColor #f00) {     color: $myColor;     font-size: 1.5em;   }   h1 {     font-weight...
FEATURE QUERIES    @supports (display: grid) {}  @supports (display: box) and  (background: linear-gradient) {}@supports n...
CSS4
THANK YOU & GOOD NIGHTSuperman copyright is a contentious issue, but the images I use here belong to   DC Comics and no pe...
BUY MY BOOKhttp://nostarch.com/css3.htm
The CSS3 of Tomorrow
The CSS3 of Tomorrow
The CSS3 of Tomorrow
The CSS3 of Tomorrow
The CSS3 of Tomorrow
The CSS3 of Tomorrow
The CSS3 of Tomorrow
Upcoming SlideShare
Loading in...5
×

The CSS3 of Tomorrow

2,368

Published on

A talk on the future of CSS I gave at the London Web meetup, 21st April 2011.

Published in: Technology, Art & Photos
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,368
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "The CSS3 of Tomorrow"

  1. 1. THECSS3 OFTOMORROW peter gasston broken-links.com @stopsatgreen
  2. 2. “35 Awesome CSS3 Examples!”“50+ Best CSS3 Examples!”“Push Your Web Design IntoThe Future With CSS3!”“Amazing CSS3 TechniquesYou Can’t live Without!”“350+ Amazing CSS3 Resources- All Youll Ever Need toBecome a CSS3 Master!”
  3. 3. BORDER-RADIUS border-radius: 5px; border-radius: 5px 5px 0 0; border-radius: 5px 0 / 2px 0;
  4. 4. BORDER-RADIUS
  5. 5. BOX & TEXT SHADOW box-shadow: 2px 2px 2px #000; text-shadow: 2px 2px 2px #000; text-shadow: inset 2px 2px #000;
  6. 6. BOX & TEXT SHADOW
  7. 7. BACKGROUNDS & BORDERSbackground-image: url(img1.png),url(img2.png), url(img3.png); border-image: url(img1.png) 20 25 20 25 stretch;
  8. 8. BACKGROUNDS & BORDERS
  9. 9. BACKGROUNDS & BORDERS
  10. 10. SELECTORS :first-child | :last-child :first-of-type | :last-of-type :nth-child() | :nth-last-child():nth-of-type() | :nth-last-of-type()
  11. 11. SELECTORS:nth-of-type(even):not(:last-of-type)
  12. 12. 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);
  13. 13. OPACITY, ALPHA & COLOUR
  14. 14. INTERMISSION<!--[if lt IE 9]>div { behavior: url(/path/to/PIE.htc); }<![endif]--> http://css3pie.com/
  15. 15. WEB FONTS @font-face { font-family: My Font; src: url(/path/to/font.woff); } h1 { font-family: My Font; } http://fontsquirrel.com
  16. 16. WEB FONTS http://lostworldsfairs.com
  17. 17. 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)
  18. 18. MEDIA QUERIES http://mediaqueri.es
  19. 19. LINEAR GRADIENTS linear-gradient(#f00,#00f); linear-gradient(45deg,#f00,#0f0,#00f);repeating-linear-gradient(#f00,#00f 10%);
  20. 20. LINEAR GRADIENTS
  21. 21. RADIAL GRADIENTS radial-gradient(#f00,#00f);repeating-radial-gradient(#f00,#00f 10%);
  22. 22. RADIAL GRADIENTS -moz-radial-gradient(100% 0,circle farthest-corner,#f00,#00f); -webkit-gradient(radial,100% 0,0,100% 0,[number],from(#f00),to(#00f));
  23. 23. 2 2sqrt(x +y )
  24. 24. worst.syntax.ever.
  25. 25. GRADIENTShttp://leaverou.me/css3patterns/
  26. 26. TRANSITIONS transition: all 1s linear; transition: border-width 2s 500ms ease-in-out;
  27. 27. TRANSITIONShttp://broken-links.com/tests/upintheair
  28. 28. 2D TRANSFORMATIONS transform: rotate(45deg); transform: skew(15deg,7.5deg);transform: scale(2) translate(1em,-25px);
  29. 29. 2D TRANSFORMATIONShttp://media.24ways.org/2009/14/5/index.html
  30. 30. 3D TRANSFORMATIONS transform: rotate3d(1,1,0,45deg);transform: translate3d(1em,-15px,10%); transform: scale3d(0.5,3,1.1);
  31. 31. 3D TRANSFORMATIONShttp://broken-links.com/tests/nakamats
  32. 32. 3D TRANSFORMATIONShttp://paulrhayes.com/experiments/sphere/
  33. 33. COMBINING EFFECTS http://thefeed.orange.co.uk
  34. 34. ANIMATIONS @keyframes name { from { border-width: 10px; } 50% { border-width: 1px; } to { border-width: 1px; height: 120px; } } div { animation: name 1s linear; }
  35. 35. ANIMATIONShttp://animatable.com/demos/madmanimation/
  36. 36. INTERMISSION <link href="basic.css" media="screen" rel="stylesheet"> <link href="desktop.css" media="screen and (min-width: 481px)" rel="stylesheet"> <!--[if lt IE 9]> <link href="desktop.css" media="screen" rel="stylesheet"> <![endif]-->
  37. 37. INTERMISSION <!--[if lt IE 9]> <link href="ie8.css" media="screen" rel="stylesheet"> <![endif]--> <!--[if lt IE 8]> <link href="ie7.css" media="screen" rel="stylesheet"> <![endif]--> etc.
  38. 38. INTERMISSION <html class="no-js"><script src="modernizr.js"></script><html class="svg no-cssgradients"> http://modernizr.com
  39. 39. INTERMISSIONdiv {background: url(img.png);background: linear-gradient(#f00,#00f);transition: all 1s ease-in;}.multiplebgs div {background: url(img1.png),url(img2.png), url(img3.png);}
  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); width: calc((85% / 4) – (1em + 2px)); border-width: calc(110px mod 4);
  42. 42. MULTIPLE COLUMNS column-count: 3; column-width: 25em; column-gap: 1.5em; column-rule: 3px double #f00; column-span: all;
  43. 43. FLEXIBLE BOX LAYOUT div { display: box; } .a,.b { box-flex: 1; } .a { box-flex: 3; } .b { box-flex: 2; }
  44. 44. FLEXIBLE BOX LAYOUT c a a b.a { div { box-orient:box-flex: 0; vertical; }box-align: center; .a,.b { box-box-pack: center; ordinal-group: 2; }} .c { box-ordinal- group: 1; }
  45. 45. GRID POSITIONING div { display: grid; grid-columns: 1fr 1fr 2fr; grid-rows: 100px 5em 1fr; }
  46. 46. GRID POSITIONING .a { grid-column: 2; grid-row: 3; grid-column-span: 2; }
  47. 47. TEMPLATE LAYOUT a b a b c c.a { position: a; } div {.b { position: b; } display: abc;.c { position: c; } }
  48. 48. TEMPLATE LAYOUT a c a b c bdiv { div { display:display: aa bc; acc a.b;}}
  49. 49. REGIONS a .x { flow-thread: a; } .y { flow-thread: b; } b .a,.c { region-thread: a; c } .b { region-thread: b; }
  50. 50. REGIONS 1 .a,.b,.c,.d { display: region; 4 } 2 .a { region-index: 1; } 3 .b { region-index: 2; } .c { region-index: 3; } .d { region-index: 4; }
  51. 51. 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;
  52. 52. VARIABLES & MIXINS @var $myColor #f00; h1 { color: $myColor; } @mixin myStuff { color: #f00; font-size: 1.5em; } h1 { font-weight: bold; @mix myStuff; }
  53. 53. VARIABLES & MIXINS @mixin myStuff($myColor #f00) { color: $myColor; font-size: 1.5em; } h1 { font-weight: bold; @mix myStuff(#00f); }
  54. 54. FEATURE QUERIES @supports (display: grid) {} @supports (display: box) and (background: linear-gradient) {}@supports not (transform: rotate3d) {}
  55. 55. CSS4
  56. 56. THANK YOU & GOOD NIGHTSuperman copyright is a contentious issue, but the images I use 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!
  57. 57. BUY MY BOOKhttp://nostarch.com/css3.htm

×