Downloaded 333 times
New HTML5/CSS3 techniques
- 1. Make your designshine withHTML5 and CSS3
- 2.
- 6.
- 7. HTML5Collection of featuresDon’tthrow anything awayEasy to get startedIt already works!It’s here to stay!
- 8.
- 9. New semantic elementsHTML5elements
- 10. <!DOCTYPE html><html lang="en"><head>…</head><body> <header> <hgroup>…</hgroup> <nav>…</nav> </header> <section> <article>…</article> <article>…</article> </section> <footer>…</footer></body></html>
- 11.
- 12.
- 13. CSS3It’s here tostay!Use in non critical areasFocus on experience levelStart today!
- 14. multiple background imagesCSS3properties
- 15. .foo { background:url(image1.png)no-repeat top left,url(image2.png) repeat-x bottom left,url(image3.png) repeat-y top right;}
- 16.
- 18.
- 19. prepare your IISserver for “.otf”web.config<system.webServer><staticContent>http://html5boilerplate.com/http://madskristensen.net/post/Prepare-webconfig-for-HTML5-and-CSS3.aspx
- 20.
- 21. .foo { border-radius:10px; }
- 22.
- 23. .foo { box-shadow:1px 1px 2px 2px #999 inset; }
- 24.
- 25. .foo { color:rgba(0, 0, 0, 0.75); }
- 26. .foo { opacity:0.5; }
- 27.
- 29.
- 30. what are 2Dtransforms?
- 31.
- 32.
- 33. .foo { transform:rotate(3deg); }
- 34. .foo { transform:scaleX(2) scaleY(3); }
- 35. .foo { transform:scale(2,3); }
- 36. .foo { transform:skewX(5deg) skewY(-20deg); }
- 37. .foo { transform:skew(5deg, -20deg); }
- 38. .foo { transform:translateX(10px) translateY(20px); }
- 39. .foo { transform:translate(10px, 20px); }
- 40.
- 41. .foo { transform-origin:left bottom; }
- 42.
- 43.
- 44. .foo {transition-property: background;transition-duration:0.3s;transition-timimg-function: ease; transition-delay: 0.5s;}
- 45. .foo { transition:background 0.3s ease 0.5s; }
- 46.
- 47. p { text-shadow:1px 1px 2px #999; }
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57. input boxes, cssbuttons and focus statesCSS3 forms
- 59.
- 60.
Editor's Notes
- #20 <system.webServer> <staticContent> <!-- HTML5 Audio/Video mime types--> <removefileExtension=".mp3" /> <mimeMapfileExtension=".mp3" mimeType="audio/mpeg" /> <removefileExtension=".mp4" /> <mimeMapfileExtension=".mp4" mimeType="video/mp4" /> <removefilextension=".ogg" /> <mimeMapfileExtension=".ogg" mimeType="audio/ogg" /> <removefileExtension=".ogv" /> <mimeMapfileExtension=".ogv" mimeType="video/ogg" /> <removefileExtension=".webm" /> <mimeMapfileExtension=".webm" mimeType="video/webm" /> <!-- Proper svgserving. Required for svg webfonts on iPad --> <removefileExtension=".svg" /> <mimeMapfileExtension=".svg" mimeType="images/svg+xml" /> <removefileExtension=".svgz" /> <mimeMapfileExtension=".svgz" mimeType="images/svg+xml" /> <!-- HTML4 Web font mime types --> <!-- Remove default IIS mime type for .eotwhichis application/octet-stream --> <removefileExtension=".eot" /> <mimeMapfileExtension=".eot" mimeType="application/vnd.ms-fontobject" /> <removefileExtension=".otf" /> <mimeMapfileExtension=".otf" mimeType="font/otf" /> <removefileExtension=".woff" /> <mimeMapfileExtension=".woff" mimeType="font/x-woff" /> <removefileExtension=".crx" /> <mimeMapfileExtension=".crx" mimeType="application/x-chrome-extension" /> <removefileExtension=".xpi" /> <mimeMapfileExtension=".xpi" mimeType="application/x-xpinstall" /> <removefileExtension=".safariextz" /> <mimeMapfileExtension=".safariextz" mimeType="application/octet-stream" /> <!-- Flash Video mime types--> <remove fileExtension=".flv" /> <mimeMapfileExtension=".flv" mimeType="video/x-flv" /> <removefileExtension=".f4v" /> <mimeMapfileExtension=".f4v" mimeType="video/mp4" /> </staticContent>