New HTML5/CSS3 techniques

6,810 views

Published on

New HTML5/CSS3 techniques

1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
6,810
On SlideShare
0
From Embeds
0
Number of Embeds
293
Actions
Shares
0
Downloads
283
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide
  • <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>
  • New HTML5/CSS3 techniques

    1. 1. Make your design shine with<br />HTML5 and CSS3<br />
    2. 2. Beatriz Oliveira<br />
    3. 3.
    4. 4.
    5. 5.
    6. 6. HTML5<br />
    7. 7. HTML5<br />Collection of features<br />Don’t throw anything away<br />Easy to get started<br />It already works!<br />It’s here to stay!<br />
    8. 8. <!DOCTYPE html><br />
    9. 9. New semantic elements<br />HTML5 elements<br />
    10. 10. <!DOCTYPE html><br /><html lang="en"><br /><head>…</head><br /><body><br /> <header><br /> <hgroup>…</hgroup><br /> <nav>…</nav><br /> </header><br /> <section><br /> <article>…</article><br /> <article>…</article><br /> </section><br /> <footer>…</footer><br /></body><br /></html><br />
    11. 11. demo<br />
    12. 12. CSS3<br />
    13. 13. CSS3<br />It’s here to stay!<br />Use in non critical areas<br />Focus on experience level<br />Start today!<br />
    14. 14. multiple background images<br />CSS3 properties<br />
    15. 15. .foo { background:url(image1.png) no-repeat top left,url(image2.png) repeat-x bottom left,url(image3.png) repeat-y top right;}<br />
    16. 16. parallax scrolling<br />
    17. 17.
    18. 18. web fonts<br />CSS3 properties<br />
    19. 19. prepare your IIS server for “.otf”<br />web.config<br /><system.webServer><br /><staticContent><br />http://html5boilerplate.com/<br />http://madskristensen.net/post/Prepare-webconfig-for-HTML5-and-CSS3.aspx<br />
    20. 20. border-radius<br />CSS3 properties<br />
    21. 21. .foo { border-radius: 10px; }<br />
    22. 22. box-shadow<br />CSS3 properties<br />
    23. 23. .foo { box-shadow: 1px 1px 2px 2px #999 inset; }<br />
    24. 24. opacity<br />CSS3 properties<br />
    25. 25. .foo { color: rgba(0, 0, 0, 0.75); }<br />
    26. 26. .foo { opacity: 0.5; }<br />
    27. 27. vendor-specific prefixes<br />CSS3 properties<br />
    28. 28.
    29. 29. css transforms<br />CSS3 properties<br />
    30. 30. what are 2D transforms?<br />
    31. 31. “transform" property<br />
    32. 32. transform functions<br />
    33. 33. .foo { transform: rotate(3deg); }<br />
    34. 34. .foo { transform: scaleX(2) scaleY(3); }<br />
    35. 35. .foo { transform: scale(2,3); }<br />
    36. 36. .foo { transform: skewX(5deg) skewY(-20deg); }<br />
    37. 37. .foo { transform: skew(5deg, -20deg); }<br />
    38. 38. .foo { transform: translateX(10px) translateY(20px); }<br />
    39. 39. .foo { transform: translate(10px, 20px); }<br />
    40. 40. “transform-origin" property<br />
    41. 41. .foo { transform-origin: left bottom; }<br />
    42. 42. css transitions<br />CSS3 properties<br />
    43. 43. smooth property changes<br />
    44. 44. .foo {transition-property: background;transition-duration: 0.3s;transition-timimg-function: ease; transition-delay: 0.5s;}<br />
    45. 45. .foo { transition: background 0.3s ease 0.5s; }<br />
    46. 46. text-shadow<br />CSS3 properties<br />
    47. 47. p { text-shadow: 1px 1px 2px #999; }<br />
    48. 48. new selectors<br />CSS3 selectors<br />
    49. 49. .foo:empty<br />
    50. 50. .foo:first-child<br />
    51. 51. .foo:nth-child(n)<br />
    52. 52. .foo:only-child<br />
    53. 53. .foo:last-child<br />
    54. 54. .foo:target<br />
    55. 55. .foo:checked<br />
    56. 56. .pre ~ .foo<br />
    57. 57. input boxes, css buttons and focus states<br />CSS3 forms<br />
    58. 58.
    59. 59. Contacts<br />www.bind.pt<br />Twitter – bindskins<br />beatrizoliveira@bind.pt<br />
    60. 60. questions?<br />

    ×