Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The CSS3 of Tomorrow (Version 2)

10,009 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

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!

×