Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Make your design shine with<br />HTML5 and CSS3<br />
Beatriz Oliveira<br />
HTML5<br />
HTML5<br />Collection of features<br />Don’t throw anything away<br />Easy to get started<br />It already works!<br />It’s...
<!DOCTYPE html><br />
New semantic elements<br />HTML5 elements<br />
<!DOCTYPE html><br /><html lang="en"><br /><head>…</head><br /><body><br />  <header><br />    <hgroup>…</hgroup><br />   ...
demo<br />
CSS3<br />
CSS3<br />It’s here to stay!<br />Use in non critical areas<br />Focus on experience level<br />Start today!<br />
multiple background images<br />CSS3 properties<br />
.foo { background:url(image1.png) no-repeat top left,url(image2.png) repeat-x bottom left,url(image3.png) repeat-y top rig...
parallax scrolling<br />
web fonts<br />CSS3 properties<br />
prepare your IIS server for “.otf”<br />web.config<br /><system.webServer><br /><staticContent><br />http://html5boilerpla...
border-radius<br />CSS3 properties<br />
.foo { border-radius: 10px; }<br />
box-shadow<br />CSS3 properties<br />
.foo { box-shadow: 1px 1px 2px 2px #999 inset; }<br />
opacity<br />CSS3 properties<br />
.foo { color: rgba(0, 0, 0, 0.75); }<br />
.foo { opacity: 0.5; }<br />
vendor-specific prefixes<br />CSS3 properties<br />
css transforms<br />CSS3 properties<br />
what are 2D transforms?<br />
“transform" property<br />
transform functions<br />
.foo { transform: rotate(3deg); }<br />
.foo { transform: scaleX(2) scaleY(3); }<br />
.foo { transform: scale(2,3); }<br />
.foo { transform: skewX(5deg) skewY(-20deg); }<br />
.foo { transform: skew(5deg, -20deg); }<br />
.foo { transform: translateX(10px) translateY(20px); }<br />
.foo { transform: translate(10px, 20px); }<br />
“transform-origin" property<br />
.foo { transform-origin: left bottom; }<br />
css transitions<br />CSS3 properties<br />
smooth property changes<br />
.foo {transition-property: background;transition-duration: 0.3s;transition-timimg-function: ease;	transition-delay: 0.5s;}...
.foo { transition: background 0.3s ease 0.5s; }<br />
text-shadow<br />CSS3 properties<br />
p { text-shadow: 1px 1px 2px #999; }<br />
new selectors<br />CSS3 selectors<br />
.foo:empty<br />
.foo:first-child<br />
.foo:nth-child(n)<br />
.foo:only-child<br />
.foo:last-child<br />
.foo:target<br />
.foo:checked<br />
.pre ~ .foo<br />
input boxes, css buttons and focus states<br />CSS3 forms<br />
Contacts<br />www.bind.pt<br />Twitter – bindskins<br />beatrizoliveira@bind.pt<br />
questions?<br />
Upcoming SlideShare
Loading in …5
×

New HTML5/CSS3 techniques

7,069 views

Published on

New HTML5/CSS3 techniques

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 />

×