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

1. THECSS3 OF
TOMORROW
PETER GASSTON
@STOPSATGREEN
BROKEN-LINKS.COM

5. “35 Awesome CSS3 Examples!”
“50+ Best CSS3 Examples!”
“350+ Amazing CSS3
Resources - All You'll Ever
Need to Become a CSS3 Master!”

6. CSS3 TODAY
border-radius: 5px;
box-shadow: 2px 2px 4px #000;
text-shadow: 4px 4px 2px #000;

7. BACKGROUNDS & BORDERS
background-image:
url('img1.png'),
url('img2.png'),
url('img3.png');
border-image:
url('img1.png')
20 25 20 25 stretch;

8. SELECTORS
:first-child | :last-child
:first-of-type | :last-of-type
:nth-child() | :nth-last-child()
:nth-of-type() | :nth-last-of-type()

9. 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);

10. WEB FONTS
@font-face {
font-family: 'My Font';
src: url('/path/to/font.woff');
}
h1 { font-family: 'My Font'; }

11. 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)

13. 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/

14. TRANSFORMATIONS
transform: rotate(45deg);
transform: rotate3d(1,1,0,45deg);
http://westciv.com/tools/
transforms/

15. TRANSITIONS & ANIMATIONS
transition: all 2s 500ms ease-in;
@keyframes foo {
from { color: #f00; }
50% { color: #00f; }
to { color: #0f0; }
}
div { animation: foo 1s linear; }

16. TRANSITIONS & ANIMATIONS
http://daneden.me/
animate/

19. 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.

21. 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 more
about this in an article I wrote: http://www.netmagazine.com/tutorials/css3-flexible-box-model-explained

22. 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

23. 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/

24. GRID LAYOUT
article {
grid-column: 2;
grid-row: 2;
grid-column-span: 2;
}

25. GRID LAYOUT
a
.a { grid-cell: a; }
.b { grid-cell: b; }
.c { grid-cell: c; }
b
c
div {
grid-template: 'abc';
}
a b c

26. GRID LAYOUT
a
div {
grid-template: 'aa'
'bc';
}
b c
div {
c grid-template: 'acc'
'a.b';
a
}
b

28. 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 }
d
Currently in IE10: http://msdn.microsoft.com/en-us/ie/hh272902.aspx#_CSSConnected and in an
experimental WebKit build, using a different syntax: http://labs.adobe.com/technologies/cssregions/.
Latest spec: http://dev.w3.org/csswg/css3-regions/

29. 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/

30. 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/

31. EXCLUSIONS
div {
shape-inside: polygon(150px,0 0,300px 300px,300px);
}

33. 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

34. 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

35. SHADERS
img {
filter: custom(url(foo.fs), 20 20, phase 90);
}
Currently unimplemented. Introduction: http://dstorey.tumblr.com/post/11059109286/cssshaders. Latest
spec: https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html

38. 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/

39. 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/

40. 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/

41. 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

42. 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/. Latest
spec: http://dev.w3.org/csswg/css-device-adapt/

43. VARIABLES
@var $myColor #f00;
h1 { color: $myColor; }
Only a suggestion at the moment: http://www.xanthir.com/blog/b4AD0

44. 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

45. MIXINS
@mixin myStuff($myColor #f00) {
color: $myColor;
font-size: 1.5em;
}
h1 {
@mix myStuff(#00f);
font-weight: bold;
}

46. NESTING
h1 { border: 1px solid #f00;
& a { color: #00f;
&:hover { color: #ff0; }
}
}
Only a suggestion at the moment: http://www.xanthir.com/blog/b49w0

47. 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/

49. http://www.netmagazine.com/features/developers-guide-browser-adoption-rates

50. http://
caniuse.com/

51. THX. PLEASE BUY MY BOOK
http://nostarch.com/css3.htm
http://thebookofcss3.com or http://nostarch.com/
css3.htm

52. LEGAL NOTE
Superman 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 – it’s really good!