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

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. BORDER-RADIUS
border-radius: 5px;
border-radius: 5px 5px 0 0;
border-radius: 5px 0 / 2px 0;

7. BOX SHADOW
box-shadow: 2px 2px 2px #000;
box-shadow: inset 2px 2px 2px #000;

8. TEXT SHADOW
text-shadow: 2px 2px 2px #000;
text-shadow: 0 -1px #000, 0 1px #fff;

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

10. BACKGROUNDS & BORDERS

11. BACKGROUNDS & BORDERS

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

13. SELECTORS
:nth-of-type(even):not(:last-of-type)

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

15. OPACITY, ALPHA & COLOUR

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

17. WEB FONTS
http://lostworldsfairs.com

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

19. MEDIA QUERIES
http://mediaqueri.es

21. LINEAR GRADIENTS
linear-gradient(red,blue);
linear-gradient(45deg,red,yellow,blue);
repeating-linear-gradient(red,blue 10%);

22. RADIAL GRADIENTS
radial-gradient(red,blue);
radial-gradient(0 100%,farthest-side,
red,yellow,blue);
repeating-radial-gradient(red,blue 10%);

23. RADIAL GRADIENTS
-moz-radial-gradient(100% 0,
circle,red,blue);
-webkit-gradient(radial,100% 0,0,100%
0,number,from(red),to(blue));

24. 2 2
sqrt(x +y )

25. GRADIENTS
http://leaverou.me/css3patterns/

26. 2D TRANSFORMATIONS
transform: rotate(45deg);
transform: skew(15deg,7.5deg);
transform: scale(2) translate(1em,-25px);

27. 2D TRANSFORMATIONS
http://media.24ways.org/2009/14/5/index.html

28. 3D TRANSFORMATIONS
transform: rotate3d(1,1,0,45deg);
transform: translate3d(1em,-15px,10%);
transform: scale3d(0.5,3,1.1);

29. 3D TRANSFORMATIONS
http://broken-links.com/tests/nakamats

30. TRANSITIONS
transition: all 1s linear;
transition: width 2s 500ms ease-in-out;

31. ANIMATIONS
@keyframes 'name' {
from { border-width: 10px; }
50% { border-width: 1px; }
to {
border-width: 1px;
height: 120px;
}
}
div { animation: name 1s linear; }

33. MULTIPLE COLUMNS
column-count: 3;
column-width: 25em;
column-gap: 1.5em;
column-rule: 3px double #f00;
column-span: all;

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

36. 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; }

37. GRID POSITIONING
div { div {
display: grid; display: grid;
grid-columns: 1fr 1fr 2fr; grid-columns: 1fr 1fr 2fr;
} grid-rows: 80px auto 10em;
}
http://j.mp/kul0H1

38. GRID POSITIONING
.a {
grid-column: 2;
grid-row: 2;
grid-column-span: 2;
}

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

40. TEMPLATE LAYOUT
a
c
a
b c b
div { div {
display: 'aa' 'bc'; display: 'acc' 'a.b';
} }

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

42. EXTENDED FLOATS
div {
float: positioned;
position: absolute;
left: 33.3%;
top: 100px;
width: 33.3%;
}
http://www.interoperabilitybridges.com/css3-floats/

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

45. EXCLUSIONS
.b {
wrap-shape: polygon(150px,0 0,300px 300px,300px);
wrap-shape-mode: around;
}
http://dev.w3.org/csswg/css3-exclusions/

46. EXCLUSIONS
.a { wrap-shape-mode: content; }
.b {
wrap-shape: polygon(150px,0 0,300px 300px,300px);
wrap-shape-mode: around;
}

48. 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 {}

49. CALCULATIONS
width: calc(20em + 10px);
height: calc((85% / 4) – (1em + 2px));
border-width: calc(110px mod 4);

50. 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;

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

52. 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}/') {}

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

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

57. CSS4

58. THX. PLEASE BUY MY BOOK
http://nostarch.com/css3.htm

59. 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!