O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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 />
Próximos SlideShares
Carregando em…5
×

New HTML5/CSS3 techniques

7.214 visualizações

Publicada em

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

×