More Related Content
What's hot
What's hot (20)
Similar to New HTML5/CSS3 techniques
Similar to New HTML5/CSS3 techniques (20)
New HTML5/CSS3 techniques
- 1. Make your design shine with HTML5 and CSS3
- 6. HTML5
- 7. HTML5 Collection of features Don’t throw anything away Easy to get started It already works! It’s here to stay!
- 9. New semantic elements HTML5 elements
- 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. demo
- 12. CSS3
- 13. CSS3 It’s here to stay! Use in non critical areas Focus on experience level Start today!
- 14. multiple background images CSS3 properties
- 15. .foo { background:url(image1.png) no-repeat top left,url(image2.png) repeat-x bottom left,url(image3.png) repeat-y top right;}
- 18. web fonts CSS3 properties
- 19. prepare your IIS server for “.otf” web.config <system.webServer> <staticContent> http://html5boilerplate.com/ http://madskristensen.net/post/Prepare-webconfig-for-HTML5-and-CSS3.aspx
- 21. .foo { border-radius: 10px; }
- 23. .foo { box-shadow: 1px 1px 2px 2px #999 inset; }
- 25. .foo { color: rgba(0, 0, 0, 0.75); }
- 26. .foo { opacity: 0.5; }
- 27. vendor-specific prefixes CSS3 properties
- 29. css transforms CSS3 properties
- 30. what are 2D transforms?
- 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); }
- 41. .foo { transform-origin: left bottom; }
- 42. css transitions CSS3 properties
- 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; }
- 47. p { text-shadow: 1px 1px 2px #999; }
- 48. new selectors CSS3 selectors
- 49. .foo:empty
- 50. .foo:first-child
- 52. .foo:only-child
- 53. .foo:last-child
- 54. .foo:target
- 55. .foo:checked
- 56. .pre ~ .foo
- 57. input boxes, css buttons and focus states CSS3 forms
- 59. Contacts www.bind.pt Twitter – bindskins beatrizoliveira@bind.pt
- 60. questions?
Editor's Notes
- <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>