The CSS3 of Tomorrow (Version 2)

9,072 views
8,651 views

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
9,072
On SlideShare
0
From Embeds
0
Number of Embeds
279
Actions
Shares
0
Downloads
164
Comments
2
Likes
15
Embeds 0
No embeds

No notes for slide

The CSS3 of Tomorrow (Version 2)

  1. THECSS3 OFTOMORROW peter gasston @stopsatgreen broken-links.com
  2. “35 Awesome CSS3 Examples!” “50+ Best CSS3 Examples!” “350+ Amazing CSS3 Resources - All Youll EverNeed to Become a CSS3 Master!”
  3. BORDER-RADIUS border-radius: 5px; border-radius: 5px 5px 0 0; border-radius: 5px 0 / 2px 0;
  4. BOX SHADOWbox-shadow: 2px 2px 2px #000;box-shadow: inset 2px 2px 2px #000;
  5. TEXT SHADOWtext-shadow: 2px 2px 2px #000;text-shadow: 0 -1px #000, 0 1px #fff;
  6. BACKGROUNDS & BORDERSbackground-image: url(img1.png),url(img2.png), url(img3.png); border-image: url(img1.png) 20 25 20 25 stretch;
  7. BACKGROUNDS & BORDERS
  8. BACKGROUNDS & BORDERS
  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. SELECTORS:nth-of-type(even):not(:last-of-type)
  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. OPACITY, ALPHA & COLOUR
  13. WEB FONTS @font-face { font-family: My Font; src: url(/path/to/font.woff); } h1 { font-family: My Font; }
  14. WEB FONTS http://lostworldsfairs.com
  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. MEDIA QUERIES http://mediaqueri.es
  17. LINEAR GRADIENTS linear-gradient(red,blue);linear-gradient(45deg,red,yellow,blue);repeating-linear-gradient(red,blue 10%);
  18. RADIAL GRADIENTS radial-gradient(red,blue); radial-gradient(0 100%,farthest-side, red,yellow,blue);repeating-radial-gradient(red,blue 10%);
  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. 2 2sqrt(x +y )
  21. GRADIENTShttp://leaverou.me/css3patterns/
  22. 2D TRANSFORMATIONS transform: rotate(45deg); transform: skew(15deg,7.5deg);transform: scale(2) translate(1em,-25px);
  23. 2D TRANSFORMATIONShttp://media.24ways.org/2009/14/5/index.html
  24. 3D TRANSFORMATIONS transform: rotate3d(1,1,0,45deg);transform: translate3d(1em,-15px,10%); transform: scale3d(0.5,3,1.1);
  25. 3D TRANSFORMATIONShttp://broken-links.com/tests/nakamats
  26. TRANSITIONS transition: all 1s linear;transition: width 2s 500ms ease-in-out;
  27. ANIMATIONS @keyframes name { from { border-width: 10px; } 50% { border-width: 1px; } to { border-width: 1px; height: 120px; } } div { animation: name 1s linear; }
  28. MULTIPLE COLUMNS column-count: 3; column-width: 25em; column-gap: 1.5em; column-rule: 3px double #f00; column-span: all;
  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. 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. 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. GRID POSITIONING .a { grid-column: 2; grid-row: 2; grid-column-span: 2; }
  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. TEMPLATE LAYOUT a c a b c bdiv { div {display: aa bc; display: acc a.b;} }
  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. EXTENDED FLOATS div { float: positioned; position: absolute; left: 33.3%; top: 100px; width: 33.3%; } http://www.interoperabilitybridges.com/css3-floats/
  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. EXCLUSIONS.b {wrap-shape: polygon(150px,0 0,300px 300px,300px);wrap-shape-mode: around;} http://dev.w3.org/csswg/css3-exclusions/
  39. EXCLUSIONS.a { wrap-shape-mode: content; }.b {wrap-shape: polygon(150px,0 0,300px 300px,300px);wrap-shape-mode: around;}
  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. CALCULATIONS width: calc(20em + 10px);height: calc((85% / 4) – (1em + 2px)); border-width: calc(110px mod 4);
  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. 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. 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. 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. VARIABLES & MIXINS @mixin myStuff($myColor #f00) { color: $myColor; font-size: 1.5em; } h1 { font-weight: bold; @mix myStuff(#00f); }
  47. CSS4
  48. THX. PLEASE BUY MY BOOKhttp://nostarch.com/css3.htm
  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!

×