More Related Content Similar to CSSchexy - Saying hello to CSS3! (20) More from Robert Nyman (20) CSSchexy - Saying hello to CSS3!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
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;
}
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;
}
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/
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... */
}
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;
}
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;
} }
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;
}
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;
}
63. @font-face {
font-family: "Graublau Web";
src: url("GraublauWeb.eot");
src: local("☺"),
url("GraublauWeb.woff") format("woff"), url("GraublauWeb.ttf") format("truetype");
}
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);
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);
}
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;
}
}
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);
}
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);
}
}
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);
}
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));
}
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);
}
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;
}
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;
}
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/