Your SlideShare is downloading. ×
The CSS of Tomorrow (Front Row 2011)
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 CSS of Tomorrow (Front Row 2011)

2,506
views

Published on

Completely updated version of my talk, given at Front Row 2011 in Krakow, in October 2011. Contains links and brief annotation.

Completely updated version of my talk, given at Front Row 2011 in Krakow, in October 2011. Contains links and brief annotation.

Published in: Technology

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,506
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
7
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. CSS3 TODAY border-radius: 5px; box-shadow: 2px 2px 4px #000; text-shadow: 4px 4px 2px #000;
  • 4. BACKGROUNDS & BORDERSbackground-image: url(img1.png), url(img2.png), url(img3.png);border-image:url(img1.png)20 25 20 25 stretch;
  • 5. SELECTORS :first-child | :last-child :first-of-type | :last-of-type :nth-child() | :nth-last-child() :nth-of-type() | :nth-last-of-type()
  • 6. 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);
  • 7. WEB FONTS @font-face { font-family: My Font; src: url(/path/to/font.woff); } h1 { font-family: My Font; }
  • 8. MEDIA QUERIES @media all and (min-device-width: 480px) @media all and (pixel-ratio: 2) @media screen not (monochrome) @media screen and (max-device-width: 640px) and (touch-enabled: 1)
  • 9. GRADIENTS linear-gradient(45deg,red,yellow); repeating-linear-gradient(red,blue 10%); radial-gradient(circle cover,red,blue); repeating-radial-gradient(red,blue 10%);http://leaverou.me/css3patterns/
  • 10. TRANSFORMATIONS transform: rotate(45deg); transform: rotate3d(1,1,0,45deg);http://westciv.com/tools/transforms/
  • 11. TRANSITIONS & ANIMATIONS transition: all 2s 500ms ease-in; @keyframes foo { from { color: #f00; } 50% { color: #00f; } to { color: #0f0; } } div { animation: foo 1s linear; }
  • 12. TRANSITIONS & ANIMATIONShttp://daneden.me/animate/
  • 13. MULTIPLE COLUMNS div { column-count: 3; column-width: 25em; column-gap: 1.5em; column-rule: 3px double #f00; } h2 { column-span: all; }Implemented fully in Chrome, Opera, Safari, coming in IE10, in Firefox but using -moz- prefix.
  • 14. FLEXIBLE BOX LAYOUT div { display: flexbox; } A B .a,.b { width: 40%; } .a,.b { width: flex(1); } A B .a { width: flex(3); } A B .b { width: flex(2); }Currently in Chrome, Firefox, Safari, coming in IE10, but all use an older syntax; you can read moreabout this in an article I wrote: http://www.netmagazine.com/tutorials/css3-flexible-box-model-explained
  • 15. FLEXIBLE BOX LAYOUT .a { flex-align: center; a flex-pack: center; width: flex(0); } c div { flex-flow: column; } .a,.b { flex-order: 2; } a .c { flex-order: 1; } b
  • 16. GRID LAYOUT div { div { display: grid; display: grid; grid-columns: 1fr 1fr 2fr; grid-columns: 1fr 1fr 2fr; grid-rows: 80px auto 10em; } }Coming in IE10, work apparently underway in WebKit too. Latest spec: http://dev.w3.org/csswg/css3-grid-align/
  • 17. GRID LAYOUT article { grid-column: 2; grid-row: 2; grid-column-span: 2; }
  • 18. GRID LAYOUT a .a { grid-cell: a; } .b { grid-cell: b; } .c { grid-cell: c; } b c div { grid-template: abc; } a b c
  • 19. GRID LAYOUT a div { grid-template: aa bc; } b c div { c grid-template: acc a.b; a } b
  • 20. REGIONS a .a { flow-into: foo; } b .b { flow-from: foo; } b .b, .c, .d, .e { flow-from: foo; } e c @region .b { color: #f00 } dCurrently in IE10: http://msdn.microsoft.com/en-us/ie/hh272902.aspx#_CSSConnected and in anexperimental WebKit build, using a different syntax: http://labs.adobe.com/technologies/cssregions/.Latest spec: http://dev.w3.org/csswg/css3-regions/
  • 21. LINE GRID article { layout-grid-line: 1.5; } h1 { layout-grid-mode: block; } p { layout-grid-mode: line; margin-bottom: 1gd; }Not currently implemented. Latest spec: http://dev.w3.org/csswg/css-line-grid/
  • 22. EXCLUSIONS div { shape-outside: circle(50%, 50%, 50px); wrap-flow: both; }Currently only in an experimental WebKit build, with a different syntax: http://labs.adobe.com/technologies/cssregions/. Latest spec: http://dev.w3.org/csswg/css3-exclusions/
  • 23. EXCLUSIONS div { shape-inside: polygon(150px,0 0,300px 300px,300px); }
  • 24. PAGED MEDIA @media paged { height: 100%; overflow: paged-x; } <link rel="next" href="p2.htm"> @navigation { nav-right: link-rel(next); }Currently only in an experimental Opera build: http://people.opera.com/howcome/2011/reader/index.html
  • 25. FILTER EFFECTS img { filter: grayscale(0.25); } img { filter: blur(5,2) sepia(1); }Currently unimplemented. Latest spec: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/publish/Filters.html
  • 26. SHADERS img { filter: custom(url(foo.fs), 20 20, phase 90); }Currently unimplemented. Introduction: http://dstorey.tumblr.com/post/11059109286/cssshaders. Latestspec: https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html
  • 27. IMAGES background-image: url( img.png#xywh=0,20,25,30); background-image: image(img.svg,img.png,#f00); background-image: element(#foobar);Latest spec: http://www.w3.org/TR/2011/WD-css3-images-20110908/
  • 28. VALUES width: calc((12em * 3) + 10px); height: min(3em, 30px); list-style-type: cycle(disk, circle); content: attr(href);Latest spec: http://www.w3.org/TR/css3-values/
  • 29. CONDITIONAL RULES @supports (display: grid) {} @supports (display: box) and (background: linear-gradient) {} @supports (display: box) or (background: linear-gradient) {} @supports not (transform: rotate3d) {}Latest spec: http://dev.w3.org/csswg/css3-conditional/
  • 30. 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}/) {}Implemented in Firefox: https://developer.mozilla.org/en/CSS/@-moz-document
  • 31. DEVICE ADAPTATION <meta name="viewport" content="width=device-width"> @viewport { width: device-width; }Implemented in Opera: http://www.opera.com/docs/specs/presto28/css/viewportdeviceadaptation/. Latestspec: http://dev.w3.org/csswg/css-device-adapt/
  • 32. VARIABLES @var $myColor #f00; h1 { color: $myColor; }Only a suggestion at the moment: http://www.xanthir.com/blog/b4AD0
  • 33. MIXINS @mixin myStuff { color: #f00; font-size: 1.5em; } h1 { @mix myStuff; font-weight: bold; }Only a suggestion at the moment: http://www.xanthir.com/blog/b4Av0
  • 34. MIXINS @mixin myStuff($myColor #f00) { color: $myColor; font-size: 1.5em; } h1 { @mix myStuff(#00f); font-weight: bold; }
  • 35. NESTING h1 { border: 1px solid #f00; & a { color: #00f; &:hover { color: #ff0; } } }Only a suggestion at the moment: http://www.xanthir.com/blog/b49w0
  • 36. SELECTORS :matches(header,aside,div) h1 {} :not(header,aside,div) h1 {} $div h1 {}Introduction: http://www.blog.highub.com/css/whats-new-in-css-selectors-level-4/. Latest spec: http://dev.w3.org/csswg/selectors4/
  • 37. http://www.netmagazine.com/features/developers-guide-browser-adoption-rates
  • 38. http://caniuse.com/
  • 39. THX. PLEASE BUY MY BOOK http://nostarch.com/css3.htmhttp://thebookofcss3.com or http://nostarch.com/css3.htm
  • 40. 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 – it’s really good!