An introduction to CSS3 and its new features, how to implement it for various web browsers today and also what the future might hold.

1. CSSchexy
Saying hello to CSS3!

8. Sexy?

9. Sexy!

11. E[att^="val"] Attribute value begins with "val"
E[att$="val"] Attribute value ends with "val"
E[att*="val"] Attribute value contains the substring "val"
E ~ F F element that is preceded by an E element
E:not(s) E element that doesn’t match the s selector

12. E:nth-child(n) The n-th child of its parent
E:nth-last-child(n) The n-th child of its parent, from last
E:last-child The last child of its parent
E:only-child The only child of its parent
E:nth-of-type(n) The n-th sibling of its type
E:nth-last-of-type(n) The n-th sibling of its type, from last
E:first-of-type The first sibling of its type
E:last-of-type The last sibling of its type
E:only-of-type The only sibling of its type

13. E:root Document’s root element. In HTML, HTML element
E:empty E element that has no children
E:target The target element of the referring URL
E:enabled Form control E that is enabled
E:disabled Form control E that is disabled
E:checked Form control E that is checked

14. CSS 3 selectors explained

16. .rounded-corners {
width: 100px;
height: 100px;
color: #fff;
background: #f00;
padding: 10px;
/* Firefox */
-moz-border-radius: 5px;
/* WebKit */
-webkit-border-radius: 5px;
/* IE9, Opera 10.5+, Google Chrome */
border-radius: 5px;
}

17. .border-image {
width: 100px;
height: 100px;
border: 20px;
padding: 10px;
/* Firefox */
-moz-border-image: url(dot.png) 0 20 0 20 round round;
/* WebKit */
-webkit-border-image: url(dot.png) 0 20 0 20 round round;
/* Opera 10.5+ */
border-image: url(dot.png) 0 20 0 20 round round;
}

18. .border-image {
width: 100px;
height: 100px;
border: 20px;
padding: 10px;
/* Firefox */
-moz-border-image: url(dot.png) 0 20 0 20 round round;
/* WebKit */
-webkit-border-image: url(dot.png) 0 20 0 20 round round;
/* Opera 10.5+ */
border-image: url(dot.png) 0 20 0 20 round round;
}

19. .border-colors {
width: 100px;
height: 100px;
color: #fff;
border: 10px solid #f00;
padding: 10px;
/* Firefox */
-moz-border-top-colors: #eee #ddd #ccc #bbb #aaa;
-moz-border-left-colors: #111 #222 #333 #444 #555;
-moz-border-bottom-colors: #666 #777 #888 #999;
/* WebKit - not working */
-webkit-border-top-colors: #eee #ddd #ccc #bbb #aaa;
-webkit-border-left-colors: #111 #222 #333 #444 #555;
-webkit-border-bottom-colors: #666 #777 #888 #999;
/* IE9, Opera 10.5+ - not working */
border-top-colors: #eee #ddd #ccc #bbb #aaa;
border-left-colors: #111 #222 #333 #444 #555;
border-bottom-colors: #666 #777 #888 #999;
}

20. .border-colors {
width: 100px;
height: 100px;
color: #fff;
border: 10px solid #f00;
padding: 10px;
/* Firefox */
-moz-border-top-colors: #eee #ddd #ccc #bbb #aaa;
-moz-border-left-colors: #111 #222 #333 #444 #555;
-moz-border-bottom-colors: #666 #777 #888 #999;
/* WebKit - not working */
-webkit-border-top-colors: #eee #ddd #ccc #bbb #aaa;
-webkit-border-left-colors: #111 #222 #333 #444 #555;
-webkit-border-bottom-colors: #666 #777 #888 #999;
/* IE9, Opera 10.5+ - not working */
border-top-colors: #eee #ddd #ccc #bbb #aaa;
border-left-colors: #111 #222 #333 #444 #555;
border-bottom-colors: #666 #777 #888 #999;
}

21. .outline-offset {
width: 100px;
height: 100px;
margin: 30px;
padding: 10px;
border: 1px solid #000;
outline: 1px dotted #00f;
outline-offset: 20px;
}

22. .outline-offset {
width: 100px;
height: 100px;
margin: 30px;
padding: 10px;
border: 1px solid #000;
outline: 1px dotted #00f;
outline-offset: 20px;
}

24. .shadow {
width: 100px;
height: 100px;
margin: 20px auto;
padding: 5px;
background: #ffffa2;
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow
(Strength=10, Direction=135, Color='#000000');
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow
(Strength=10, Direction=135, Color='#000000')";
/* Firefox */
-moz-box-shadow: 3px 3px 10px #000;
/* WebKit */
-webkit-box-shadow: 3px 3px 10px #000;
/* Standard */
box-shadow: 3px 3px 10px #000;
}

25. .shadow {
width: 100px;
height: 100px;
margin: 20px auto;
padding: 5px;
background: #ffffa2;
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow
(Strength=10, Direction=135, Color='#000000');
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow
(Strength=10, Direction=135, Color='#000000')";
/* Firefox */
-moz-box-shadow: 3px 3px 10px #000;
/* WebKit */
-webkit-box-shadow: 3px 3px 10px #000;
/* Standard */
box-shadow: 3px 3px 10px #000;
}

26. .text-shadow {
font-size: 2em;
/* Firefox, WebKit, Opera 9+ */
text-shadow: 3px 3px 5px #999;
}

27. .text-shadow {
font-size: 2em;
/* Firefox, WebKit, Opera 9+ */
text-shadow: 3px 3px 5px #999;
}

28. Images

29. .multiple-backgrounds {
width: 500px;
height: 200px;
border: 1px solid #f00;
padding: 20px;
/* Google Chrome, Safari, Firefox, Opera, IE9 */
background: url(dot.png) no-repeat left top, url(1.jpg) no-repeat right top, url
(view.jpg) no-repeat left bottom, url(blue-dot.png) no-repeat right bottom;
}

30. .multiple-backgrounds {
width: 500px;
height: 200px;
border: 1px solid #f00;
padding: 20px;
/* Google Chrome, Safari, Firefox, Opera, IE9 */
background: url(dot.png) no-repeat left top, url(1.jpg) no-repeat right top, url
(view.jpg) no-repeat left bottom, url(blue-dot.png) no-repeat right bottom;
}

31. .background-size {
width: 100px;
height: 100px;
color: #fff;
background: url(view.jpg) no-repeat;
border: 1px solid #0080ff;
margin-bottom: 20px;
padding: 10px;
/* Firefox */
-moz-background-size: 100px 50px;
/* WebKit */
-webkit-background-size: 100px 50px;
/* Opera 9.5+, Google Chrome, IE9 */
background-size: 100px 50px;
}

32. .background-size {
width: 100px;
height: 100px;
color: #fff;
background: url(view.jpg) no-repeat;
border: 1px solid #0080ff;
margin-bottom: 20px;
padding: 10px;
/* Firefox */
-moz-background-size: 100px 50px;
/* WebKit */
-webkit-background-size: 100px 50px;
/* Opera 9.5+, Google Chrome, IE9 */
background-size: 100px 50px;
}

33. .background-size-cover {
width: 200px;
height: 400px;
color: #fff;
background: url(view.jpg) no-repeat;
border: 1px solid #0080ff;
margin-bottom: 20px;
padding: 10px;
/* Firefox */
-moz-background-size: cover;
/* WebKit */
-webkit-background-size: cover;
/* Opera 9.5+, Google Chrome, IE9 */
background-size: cover;
}

34. .background-size-cover {
width: 200px;
height: 400px;
color: #fff;
background: url(view.jpg) no-repeat;
border: 1px solid #0080ff;
margin-bottom: 20px;
padding: 10px;
/* Firefox */
-moz-background-size: cover;
/* WebKit */
-webkit-background-size: cover;
/* Opera 9.5+, Google Chrome, IE9 */
background-size: cover;
}

35. .background-clip {
width: 100px;
height: 100px;
color: #fff;
background: url(view.jpg) no-repeat;
border: 1px solid #0080ff;
margin-bottom: 20px;
padding: 20px;
/* Firefox */
-moz-background-clip: content;
-moz-background-origin: content;
/* WebKit */
-webkit-background-clip: content;
-webkit-background-origin: content;
/* IE9, Opera 9.5+, Google Chrome */
background-clip: content-box;
background-origin: content-box;
}

36. .background-clip {
width: 100px;
height: 100px;
color: #fff;
background: url(view.jpg) no-repeat;
border: 1px solid #0080ff;
margin-bottom: 20px;
padding: 20px;
/* Firefox */
-moz-background-clip: content;
-moz-background-origin: content;
/* WebKit */
-webkit-background-clip: content;
-webkit-background-origin: content;
/* IE9, Opera 9.5+, Google Chrome */
background-clip: content-box;
background-origin: content-box;
}

37. base64

38. .smurfette {
background: url(smurfette.png);
}

39. .smurfette {
background: url(smurfette.png);
}
.smurfette {
background: url(data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAADwCAMAAACe2r5
6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA
wBQTFRFAAMAAAQA8fbw6O3nAQYAHCEbCA0HlpuV3uPdyM3HR0Dwv8S
+BAYRSjvmYmdhDw0yPzTG1NnTCAkdoKWfO0A6LzQuLSiXRjnbeH13g
oeBtbq0ERYQbnNtqq
+pGxxhjJGL7tgZEBVARUpEExA9FBhLTlNNJSokWV5YGBtXOzK6ODCw
IiF2JiOBQzfRNCysMCmhKSWMCwonHx9sJisl3cQWMTYwys/
J5s4YU0kH1bsWZGljl5yWFBMANC8EAgcBwKsUg4iCt6ESExgSREEFg
ncNWlEHHR4BEhcRn48PqZoRjZKMoaagZFwKwMW/
mYcQZWpkT1ROl4UOY1sJx7MUq7CqyLQVv6oToZERWl9ZmIYPGxwARk
tFeX54CQ4ICA4AZV0LNTAFkH0OUFVPVUsJioAOHh8Cb3RuMjcxmJ2X
eGsKPjoHPEE7fXAPNjEGMy4D1rwXPTkGcWMLXFMJkX4Pem0McmQMFh
UBDgwBBw0AMDUvoqehBgwA8/
jyqJkQJCYBW2BaJigD3sUXeWwLYloIDgsIcGIKDAsoUUcFOzcEY2hi
HiMdJykErLGry9DKiX8Ne24Ntru13+TePDgFMzgyPDO7qpsSuKITFh
sVwcbANDkzybUWuaMUQ0AEDw0CXlULbmgN1drUKC0nEhA1gHULExIA
HyADR0xGLC8CcHVvHyQea2UKUVZQVVJPICUfDhMNTUEIdHFusZkT6/
DqCg8JQj8D6e7oalsLQUZAICBtLicFrbKs38YY2b8aGyBLPUI8CxAK
ppYWTEAHz7scsJgSICEEyc7ISUYKFxYCopISHB1idXp0uqQVFRgbkn
8QbGYLEA4DNzIH+/
OhHh5rTkIJzNHLISIFBgsFRTja6dEbCQoeV1RRCQYDKigdSEUJ2t/

40. CSSEmbed

41. Gradients

42. #gradient {
color: #fff;
height: 100px;
margin-bottom: 30px;
padding: 10px;
/* WebKit */
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
/* Firefox */
background: -moz-linear-gradient(top, #00f, #fff);
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF,
endColorstr=#FFFFFFFF);
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF,
endColorstr=#FFFFFFFF)";
}

43. #gradient {
color: #fff;
height: 100px;
margin-bottom: 30px;
padding: 10px;
/* WebKit */
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
/* Firefox */
background: -moz-linear-gradient(top, #00f, #fff);
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF,
endColorstr=#FFFFFFFF);
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF,
endColorstr=#FFFFFFFF)";
}

44. #gradient-with-stop {
color: #fff;
height: 100px;
margin-bottom: 30px;
padding: 10px;
/* WebKit */
background: -webkit-gradient(linear, left top, right top, from(#00f), to(#fff), color-stop(0.7, #fff));
/* Firefox */
background: -moz-linear-gradient(left top, #00f, #fff 70%);
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF,
GradientType=1);
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF,
GradientType=1);"
}

45. #gradient-with-stop {
color: #fff;
height: 100px;
margin-bottom: 30px;
padding: 10px;
/* WebKit */
background: -webkit-gradient(linear, left top, right top, from(#00f), to(#fff), color-stop(0.7, #fff));
/* Firefox */
background: -moz-linear-gradient(left top, #00f, #fff 70%);
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF,
GradientType=1);
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF,
GradientType=1);"
}

46. #gradient-radial {
color: #fff;
width: 100px;
height: 100px;
padding: 10px;
/* WebKit */
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#ffffa2), to(#00f));
/* Firefox */
background: -moz-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f);
/* For Internet Explorer */ /* As if... */
}

47. #gradient-radial {
color: #fff;
width: 100px;
height: 100px;
padding: 10px;
/* WebKit */
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#ffffa2), to(#00f));
/* Firefox */
background: -moz-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f);
/* For Internet Explorer */ /* As if... */
}

48. Multi-column layout

49. .multi-column {
/* Firefox */
-moz-column-width: 13em;
-moz-column-gap: 1em;
/* WebKit */
-webkit-column-width: 13em;
-webkit-column-gap: 1em;
/* Standard */
column-width: 13em;
column-gap: 1em;
}

50. .multi-column {
/* Firefox */
-moz-column-width: 13em;
-moz-column-gap: 1em;
/* WebKit */
-webkit-column-width: 13em;
-webkit-column-gap: 1em;
/* Standard */
column-width: 13em;
column-gap: 1em;
}

51. box-sizing

52. .box-sizing { .box-sizing-border-box {
width: 300px; width: 300px;
height: 100px; height: 100px;
border: 1px solid #0080ff; border: 1px solid #0080ff;
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px; padding: 10px;
/* Firefox */ /* Firefox */
-moz-box-sizing: content-box; -moz-box-sizing: border-box;
/* WebKit */ /* WebKit */
-webkit-box-sizing: content-box; -webkit-box-sizing: border-box;
/* Opera 9.5+, Google Chrome, IE9 */ /* Opera 9.5+, Google Chrome, IE9 */
box-sizing: content-box; box-sizing: border-box;
} }

53. .box-sizing { .box-sizing-border-box {
width: 300px; width: 300px;
height: 100px; height: 100px;
border: 1px solid #0080ff; border: 1px solid #0080ff;
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px; padding: 10px;
/* Firefox */ /* Firefox */
-moz-box-sizing: content-box; -moz-box-sizing: border-box;
/* WebKit */ /* WebKit */
-webkit-box-sizing: content-box; -webkit-box-sizing: border-box;
/* Opera 9.5+, Google Chrome, IE9 */ /* Opera 9.5+, Google Chrome, IE9 */
box-sizing: content-box; box-sizing: border-box;
} }

54. resize

55. .resize {
width: 100px;
height: 50px;
border: 1px solid #000;
overflow: auto;
/* Firefox */
-moz-resize: both;
/* WebKit */
-webkit-resize: both;
/* Google Chrome */
resize: both;
}

56. .resize {
width: 100px;
height: 50px;
border: 1px solid #000;
overflow: auto;
/* Firefox */
-moz-resize: both;
/* WebKit */
-webkit-resize: both;
/* Google Chrome */
resize: both;
}

57. font-size-adjust

58. .font-size-adjust {
font: 16px Arial, Helvetica, sans-serif;
font-size-adjust: 0.5;
}

59. word-wrap

60. .word-wrap {
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #000;
word-wrap: break-word;
}

61. .word-wrap {
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #000;
word-wrap: break-word;
}

62. font-face

63. @font-face {
font-family: "Graublau Web";
src: url("GraublauWeb.eot");
src: local("☺"),
url("GraublauWeb.woff") format("woff"), url("GraublauWeb.ttf") format("truetype");
}

64. Bulletproof @font-face
syntax
@font-face Generator

65. I'm Comic Sans, Asshole

66. RGBa

67. .alpha70 {
position: relative;
z-index: 2;
width: 100px;
height: 100px;
color: #fff;
padding: 10px;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0); /* Note: set to transparent for IE */
/* IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,
endColorstr=#b2000000);
/* IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,
endColorstr=#b2000000)";
/* RGBa with 0.7 opacity */
background: rgba(0, 0, 0, 0.7);
}

68. .alpha70 {
position: relative;
z-index: 2;
width: 100px;
height: 100px;
color: #fff;
padding: 10px;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0); /* Note: set to transparent for IE */
/* IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,
endColorstr=#b2000000);
/* IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,
endColorstr=#b2000000)";
/* RGBa with 0.7 opacity */
background: rgba(0, 0, 0, 0.7);
}

69. // IE hex alpha - replace 0.6 with your desired alpha level
Math.floor(0.6 * 255).toString(16);

70. HSLa

71. .alpha70 {
position: relative;
z-index: 2;
width: 100px;
height: 100px;
color: #fff;
padding: 10px;
/* Fallback for web browsers that doesn't support RGBa */
background: #f00; /* Note: set to transparent for IE */
/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr=#B2FF0000,endColorstr=#B2FF0000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorstr=#B2FF0000,endColorstr=#B2FF0000)";
/* HSLa with 0.7 opacity */
background: hsla(0, 100%, 50%, 0.7);
}

72. .alpha70 {
position: relative;
z-index: 2;
width: 100px;
height: 100px;
color: #fff;
padding: 10px;
/* Fallback for web browsers that doesn't support RGBa */
background: #f00; /* Note: set to transparent for IE */
/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr=#B2FF0000,endColorstr=#B2FF0000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorstr=#B2FF0000,endColorstr=#B2FF0000)";
/* HSLa with 0.7 opacity */
background: hsla(0, 100%, 50%, 0.7);
}

73. Media queries

74. .media-query-elm {
width: 300px;
height: 200px;
margin-bottom: 20px;
padding: 10px;
color: #fff;
background: #f00;
}
@media screen and (min-width: 400px) and (max-width: 1000px) {
.media-query-elm {
background: #00f;
}
}
@media screen and (max-width: 399px) {
.media-query-elm {
color: #000;
background: #0f0;
}
}

75. /* Using or operator */
@media screen and (min-width: 100px),
@media handheld {
.navigation {
width: 350px;
}
}
/* Use to hide for older user agents */
@media only screen and (min-width: 100px) {
.navigation {
width: 350px;
}
}
/* Using the not keyword */
@media not screen and (min-width: 100px) {
.navigation {
width: 100%;
}
}

76. .portrait,
.landscape {
display: none;
}
@media screen and (orientation: portrait) {
.portrait {
display: inline;
}
}
@media screen and (orientation: landscape) {
.landscape {
display: inline;
}
}

78. Transitions

79. /* Shorthand version */
#hello {
display: inline-block;
border: 1px dashed #000;
padding: 10px;
background: #ffffa2;
height: 20px;
opacity: 0.3;
/* Firefox */
-moz-transition: height 1s ease-out, opacity 1s ease;
/* WebKit */
-webkit-transition: height 1s ease-out, opacity 1s ease;
/* Opera */
-o-transition: height 1s ease-out, opacity 1s ease;
/* Standard */
transition: height 1s ease-out, opacity 1s ease;
}
#hello:hover {
height: 40px;
opacity: 1;
}

80. /* Shorthand version */
#hello {
display: inline-block;
border: 1px dashed #000;
padding: 10px;
background: #ffffa2;
height: 20px;
opacity: 0.3;
/* Firefox */
-moz-transition: height 1s ease-out, opacity 1s ease;
/* WebKit */
-webkit-transition: height 1s ease-out, opacity 1s ease;
/* Opera */
-o-transition: height 1s ease-out, opacity 1s ease;
/* Standard */
transition: height 1s ease-out, opacity 1s ease;
}
#hello:hover {
height: 40px;
opacity: 1;
}

81. /* Shorthand version */
#hello {
display: inline-block;
border: 1px dashed #000;
padding: 10px;
background: #ffffa2;
height: 20px;
opacity: 0.3;
/* Firefox */
-moz-transition: height 1s ease-out, opacity 1s ease;
/* WebKit */
-webkit-transition: height 1s ease-out, opacity 1s ease;
/* Opera */
-o-transition: height 1s ease-out, opacity 1s ease;
/* Standard */
transition: height 1s ease-out, opacity 1s ease;
}
#hello:hover {
height: 40px;
opacity: 1;
}

82. /* Shorthand version */
.menu-item {
border: 1px dashed #000;
background: #ffffa2;
height: 20px;
opacity: 0.3;
/* Firefox */
-moz-transition: all 1s ease;
/* WebKit */
-webkit-transition: all 1s ease;
/* Opera */
-o-transition: all 1s ease;
/* Standard */
transition: all 1s ease;
}
.menu-item:hover {
opacity: 1;
/* Firefox */
-moz-transform: scale(2) rotate(30deg) translate(50px);
/* WebKit */
-webkit-transform: scale(1.2) rotate(30deg) translate(50px);
/* Opera */
-o-transform: scale(2) rotate(30deg) translate(50px);
/* Standard */
transform: scale(2) rotate(30deg) translate(50px);
}

83. /* Shorthand version */
.menu-item {
border: 1px dashed #000;
background: #ffffa2;
height: 20px;
opacity: 0.3;
/* Firefox */
-moz-transition: all 1s ease;
/* WebKit */
-webkit-transition: all 1s ease;
/* Opera */
-o-transition: all 1s ease;
/* Standard */
transition: all 1s ease;
}
.menu-item:hover {
opacity: 1;
/* Firefox */
-moz-transform: scale(2) rotate(30deg) translate(50px);
/* WebKit */
-webkit-transform: scale(1.2) rotate(30deg) translate(50px);
/* Opera */
-o-transform: scale(2) rotate(30deg) translate(50px);
/* Standard */
transform: scale(2) rotate(30deg) translate(50px);
}

84. /* Shorthand version */
.menu-item {
border: 1px dashed #000;
background: #ffffa2;
height: 20px;
opacity: 0.3;
/* Firefox */
-moz-transition: all 1s ease;
/* WebKit */
-webkit-transition: all 1s ease;
/* Opera */
-o-transition: all 1s ease;
/* Standard */
transition: all 1s ease;
}
.menu-item:hover {
opacity: 1;
/* Firefox */
-moz-transform: scale(2) rotate(30deg) translate(50px);
/* WebKit */
-webkit-transform: scale(1.2) rotate(30deg) translate(50px);
/* Opera */
-o-transform: scale(2) rotate(30deg) translate(50px);
/* Standard */
transform: scale(2) rotate(30deg) translate(50px);
}

85. Mac OS X Stacks with CSS

86. Animations

87. .animation-container {
height: 60px;
padding: 10px;
-webkit-animation-name: movearound;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease;
}
@-webkit-keyframes movearound {
from {
width: 200px;
background: #f00;
opacity: 0.5;
-webkit-transform: scale(0.5) rotate(15deg);
}
to {
width: 400px;
background: #ffffa2;
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}

88. .animation-container {
height: 60px;
padding: 10px;
/* Shorthand syntax */
-webkit-animation: movearound 4s ease 3 normal;
}
@-webkit-keyframes movearound {
0% {
width: 200px;
background: #f00;
opacity: 0.5;
-webkit-transform: scale(0.5) rotate(15deg);
}
30% {
width: 300px;
background: #f00;
opacity: 1;
-webkit-transform: scale(1.3) rotate(15deg);
}
60% {
width: 100px;
background: #00f;
opacity: 0.3;
-webkit-transform: scale(0.3) rotate(15deg);
}
100% {
width: 400px;
background: #ffffa2;
opacity: 0.5;
-webkit-transform: scale(1) rotate(0deg);
}
}

89. 3D

90. Morphing Power Cubes

92. translate3d(x, y, z), translateZ(z)
scale3d(sx, sy, sz), scaleZ(sz)
rotateX(angle), rotateY(angle), rotate3d(x, y, z, angle),
perspective(p)
matrix3d(…)
-webkit-transform-origin now accepts a z offset too

93. #container {
width: 100%;
height: 700px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
#stage {
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 2s;
-webkit-transform-style: preserve-3d;
}
#shape {
position: relative;
top: 160px;
margin: 0 auto;
height: 200px;
width: 200px;
-webkit-transform-style: preserve-3d;
}
.plane {
position: absolute;
height: 200px;
width: 200px;
border: 1px solid white;
-webkit-border-radius: 12px;
-webkit-box-sizing: border-box;
text-align: center;
font-family: Times, serif;
font-size: 124pt;
color: black;
background-color: rgba(255, 255, 255, 0.6);
-webkit-transition: -webkit-transform 2s, opacity 2s;
-webkit-backface-visibility: hidden;
}

94. #shape.backfaces .plane {
-webkit-backface-visibility: visible;
}
#shape {
-webkit-animation: spin 8s infinite linear;
}
@-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-360deg); }
}

95. /* ---------- cube styles ------------- */
.cube > .one {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
}
.cube > .two {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
}
.cube > .three {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
}
.cube > .four {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
}
.cube > .five {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
}
.cube > .six {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
}
.cube > .seven {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);
}
.cube > .eight {
-webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
}
.cube > .nine {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);
}
.cube > .ten {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);
}
.cube > .eleven {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);
}
.cube > .twelve {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);
}

96. Reflections

97. .reflection {
/* WebKit */
-webkit-box-reflect: below 5px -webkit-gradient
(linear, left top, left bottom, from(transparent),
color-stop(0.5, transparent), to(white));
}

98. .reflection {
/* WebKit */
-webkit-box-reflect: below 5px -webkit-gradient
(linear, left top, left bottom, from(transparent),
color-stop(0.5, transparent), to(white));
}

99. Reflections.js for jQuery

100. calc()

101. .calc {
width: 100px;
height: 100px;
border: 1px solid #f00;
padding: 10px;
/* Firefox */
width: -moz-calc(75% - 100px);
/* WebKit */
width: -webkit-calc(75% - 100px);
/* Opera */
width: -o-calc(75% - 100px);
/* Standard */
width: calc(75% - 100px);
}

102. Templates

103. Tables

104. Floats

106. Source order independence

107. Source order independence
Equal height columns

108. .template-layouts {
display: "ab"
"cd";
}
.template-layout-a {
position: a;
}
.template-layout-b {
position: b;
}
.template-layout-c {
position: c;
}
.template-layout-d {
position: d;
}

109. .template-layouts {
display: "ab"
<div class="template-layouts">
"cd";
<div class="template-layout-a">
}
I am element a
</div>
.template-layout-a {
position: a;
<div class="template-layout-b">
}
I am element b
</div>
.template-layout-b {
position: b;
<div class="template-layout-c">
}
I am element c
</div>
.template-layout-c {
position: c;
<div class="template-layout-d">
}
I am element d
</div>
.template-layout-d {
</div>
position: d;
}

110. css-template-layout for jQuery

111. Grids

113. body {
columns: 3;
column-gap: 0.5in;
}
img {
float: page top right;
width: 3gr;
}

114. body {
grid-columns: * * (0.5in * *)[2];
grid-rows: 20% *;
columns: 3;
column-gap: 0.5in;
}
img {
float: page top left;
float-offset: 4gr 1gr;
}

115. Web browser support

119. CSS3 Please!

120. http://robertnyman.com/css3/

122. Robert Nyman
robertnyman.com/speaking/
Twitter: @robertnyman
Pictures:
http://www.originalprop.com/blog/2008/03/20/teenage-mutant-ninja-turtles-costume-restoration/ http://www.cihlinfoto.se/wpblogg/?tag=val-2010
http://www.starsjournal.com/3192/bruce-willis-is-being-sued-for-4-million-dollars.html http://www.devon.gov.uk/index/socialcare/learning-disability/ldis-total-com-symbols/ldis-
http://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska%20flaggan.html symb-vp.htm
http://open.salon.com/blog/just-walt/2009/10/29/real_men_he-men_pictures_whos_the_manliest_of_men http://tentacolor.com/2007/12/17/project-animation-export-from-blender-update/
http://veronica-mars-episodes.download-tvshows.com/kristen-bell-loves-megan-fox/ http://www.tutoriallounge.com/2009/04/20-best-3d-creative-effects-in-photoshop-tutorial-
http://blogs.myspace.com/baobinga pack/
http://drboycebankruptcy.blogspot.com/ http://www.redbubble.com/people/ruthlambert/art/3375716-3-blue-gill-reflection
http://www.flickr.com/photos/gurmokh/galleries/72157622521351141/ http://www.apple.com/downloads/dashboard/calculate_convert/calculate.html
http://www.newlisp.org/index.cgi?Postscript http://www.respiro.org/Issue21/Non_fiction/time_sphinx.htm
http://www.yehoodi.com/comment/57387/picture-post-game-part-ii/62 http://www.hongkiat.com/blog/60-high-quality-free-web-templates-and-layouts/
http://edipermadi.wordpress.com/2008/04/22/an-implementation-of-base64-encoderdecoder-using-pic16f84/ http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-
http://www.freelancewritereditor.com/editorial_newspaper_column.html a-mobile-version-of-your-website/
http://www.discshop.se/shop/ds_produkt.php?lang=&id=69761&lang=se&subsite=bluray&&ref= http://www.photoschau.de/index.php?showimage=25
http://www.supershareware.com/info/magic-photo-editor.html http://failblog.org/2010/09/11/epic-fail-photos-about-to-fail/
http://harveyswallhangers.com/attitude.html http://www.zamaanonline.com/category/funny-amazing-stuff/geek-fun
http://www.market-melange.com/tag/goldman-sachs/ http://failsalon.com/?p=183
http://randsco.com/index.php/2009/07/04/p680 http://paulirish.com/2010/high-res-browser-icons/
http://www.candlepowerforums.com/vb/showthread.php?t=286602 http://thefourcornersclassroom.wikispaces.com/Group+30+-+Pre-Project
http://petelepage.com/blog/2010/07/how-to-hsl-and-hsla-color-models/ http://www.funonthenet.in/content/view/395/31/