Your SlideShare is downloading. ×
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)
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)
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)
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)
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)
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The CSS3 of Tomorrow (Version 2)

8,074

Published on

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

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,074
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
162
Comments
2
Likes
15
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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!

×