This document provides an extensive overview of CSS3, including various features such as selectors, media queries, gradients, transformations, transitions, animations, and layout techniques like Flexbox and Grid. It discusses the state of implementation in different browsers and provides links to further resources. Additionally, it touches on advanced concepts like variables, mixins, and conditional rules within CSS3.

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!