The document covers various advanced CSS3 features and techniques, such as border-radius, box shadows, gradients, transitions, and animations. It also touches on responsive design with media queries, flexible box layout, grid positioning, and conditional rules, along with variables and mixins in CSS. Additionally, it includes links to external resources and mentions copyright issues related to specific images used in the document.

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!