Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Padrões para Criação e Interpretação de Conteúdos Web com HTML5

Padrões para Criação e Interpretação de Conteúdos Web com HTML5

Slides para iniciantes no mundo front-end.
HTML5 version of this presentation: talks.vagnersantana.com/infoeste

Vagner Santana

May 16, 2013
Tweet

More Decks by Vagner Santana

Other Decks in Programming

Transcript

  1. Padrões para Criação e Interpretação de Conteúdos Web com HTML5

    Vagner Santana - Web Developer at Associação Educacional Prudentina Infoeste 2013 - 14/05/2013
  2.  HTML Informação  CSS Aparência  JavaScript Comportamento De

    que é a responsabilidade talks.vagnersantana.com #infoeste2013 9/36
  3. CSS Seletores Básicos talks.vagnersantana.com #infoeste2013 /* Selecionando uma tag */

    p { color: #b23464; } /* Selecionando um ID */ #menu{ font-size: 30px; text-align: center; } /* Selecionando uma classe */ .box{ width: 600px; height: 600px; } CSS 16/36
  4. CSS Seletores Avançados talks.vagnersantana.com #infoeste2013 /* Primeiro elemento parágrafo da

    div com a classe article */ div.article p:first-child { font-style: italic; } /* Estados */ a:link{ color: #00b295; } a:active{ color: #005a4c; } a:hover{ color: #a4a4b2; } input[type=text]:focus { background: #f7ff47; } CSS 17/36
  5. CSS3 News talks.vagnersantana.com #infoeste2013 Border-radius Transparency / Opacity Gradients Animations

    Text-shadow Box-shadow Background Decoration Box Sizing · · · · · · · · 18/36
  6. @font-face talks.vagnersantana.com #infoeste2013 @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),

    url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } .ico{ font-family: 'icomoon'; } CSS 20/36
  7. Animações talks.vagnersantana.com #infoeste2013 a .circle{ transition: all 2s ease; }

    a:hover .circle{ transform: rotate(-720deg); } CSS 21/36
  8. Vendors Prefixes talks.vagnersantana.com #infoeste2013 a .circle{ -webkit-transition: all 2s ease;

    -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; } a:hover .circle{ -webkit-transform: rotate(-720deg); -moz-transform: rotate(-720deg); -o-transform: rotate(-720deg); transform: rotate(-720deg); } CSS 22/36