CSSchexy - Saying hello to CSS3!

8,719 views
6,112 views

Published on

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

Published in: Technology
2 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total views
8,719
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
135
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

CSSchexy - Saying hello to CSS3!

  1. CSSchexy Saying hello to CSS3!
  2. Sexy?
  3. Sexy!
  4. 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
  5. 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
  6. 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
  7. CSS 3 selectors explained
  8. .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; }
  9. .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; }
  10. .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; }
  11. .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; }
  12. .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; }
  13. .outline-offset { width: 100px; height: 100px; margin: 30px; padding: 10px; border: 1px solid #000; outline: 1px dotted #00f; outline-offset: 20px; }
  14. .outline-offset { width: 100px; height: 100px; margin: 30px; padding: 10px; border: 1px solid #000; outline: 1px dotted #00f; outline-offset: 20px; }
  15. .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; }
  16. .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; }
  17. .text-shadow { font-size: 2em; /* Firefox, WebKit, Opera 9+ */ text-shadow: 3px 3px 5px #999; }
  18. .text-shadow { font-size: 2em; /* Firefox, WebKit, Opera 9+ */ text-shadow: 3px 3px 5px #999; }
  19. Images
  20. .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; }
  21. .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; }
  22. .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; }
  23. .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; }
  24. .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; }
  25. .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; }
  26. .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; }
  27. .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; }
  28. base64
  29. .smurfette { background: url(smurfette.png); }
  30. .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/
  31. CSSEmbed
  32. Gradients
  33. #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)"; }
  34. #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)"; }
  35. #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);" }
  36. #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);" }
  37. #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... */ }
  38. #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... */ }
  39. Multi-column layout
  40. .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; }
  41. .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; }
  42. box-sizing
  43. .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; } }
  44. .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; } }
  45. resize
  46. .resize { width: 100px; height: 50px; border: 1px solid #000; overflow: auto; /* Firefox */ -moz-resize: both; /* WebKit */ -webkit-resize: both; /* Google Chrome */ resize: both; }
  47. .resize { width: 100px; height: 50px; border: 1px solid #000; overflow: auto; /* Firefox */ -moz-resize: both; /* WebKit */ -webkit-resize: both; /* Google Chrome */ resize: both; }
  48. font-size-adjust
  49. .font-size-adjust { font: 16px Arial, Helvetica, sans-serif; font-size-adjust: 0.5; }
  50. word-wrap
  51. .word-wrap { width: 100px; height: 100px; padding: 10px; border: 1px solid #000; word-wrap: break-word; }
  52. .word-wrap { width: 100px; height: 100px; padding: 10px; border: 1px solid #000; word-wrap: break-word; }
  53. font-face
  54. @font-face { font-family: "Graublau Web"; src: url("GraublauWeb.eot"); src: local("☺"), url("GraublauWeb.woff") format("woff"), url("GraublauWeb.ttf") format("truetype"); }
  55. Bulletproof @font-face syntax @font-face Generator
  56. I'm Comic Sans, Asshole
  57. RGBa
  58. .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); }
  59. .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); }
  60. // IE hex alpha - replace 0.6 with your desired alpha level Math.floor(0.6 * 255).toString(16);
  61. HSLa
  62. .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); }
  63. .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); }
  64. Media queries
  65. .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; } }
  66. /* 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%; } }
  67. .portrait, .landscape { display: none; } @media screen and (orientation: portrait) { .portrait { display: inline; } } @media screen and (orientation: landscape) { .landscape { display: inline; } }
  68. Transitions
  69. /* 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; }
  70. /* 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; }
  71. /* 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; }
  72. /* 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); }
  73. /* 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); }
  74. /* 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); }
  75. Mac OS X Stacks with CSS
  76. Animations
  77. .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); } }
  78. .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); } }
  79. 3D
  80. Morphing Power Cubes
  81. 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
  82. #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; }
  83. #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); } }
  84. /* ---------- 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); }
  85. Reflections
  86. .reflection { /* WebKit */ -webkit-box-reflect: below 5px -webkit-gradient (linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); }
  87. .reflection { /* WebKit */ -webkit-box-reflect: below 5px -webkit-gradient (linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); }
  88. Reflections.js for jQuery
  89. calc()
  90. .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); }
  91. Templates
  92. Tables
  93. Floats
  94. Source order independence
  95. Source order independence Equal height columns
  96. .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; }
  97. .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; }
  98. css-template-layout for jQuery
  99. Grids
  100. body { columns: 3; column-gap: 0.5in; } img { float: page top right; width: 3gr; }
  101. body { grid-columns: * * (0.5in * *)[2]; grid-rows: 20% *; columns: 3; column-gap: 0.5in; } img { float: page top left; float-offset: 4gr 1gr; }
  102. Web browser support
  103. CSS3 Please!
  104. http://robertnyman.com/css3/
  105. 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/

×