O documento descreve recursos de HTML5 e CSS3, incluindo novos elementos semânticos em HTML5 como <header> e <video>, e novos módulos em CSS3 como seletores, transições e transformações. Também fornece exemplos de como usar essas novas funcionalidades.

1. Caio Cesar Gomes
Digital Front End Engineer
RECURSOS

3. HTML 5
• Hypertext Markup Language
• 28 de Outubro de 2014 - se torna recomendação oficial do
W3C
• Traz uma semântica melhor
• Suporte a elementos como vídeo e áudio

4. HTML 5 – Novos Elementos
• Elementos Semânticos: <header>, <footer>, <article>, e
<section>
• Atributos: number, date, time, calendar, e range
• Elementos Gráficos: <svg> e <canvas>
• Elementos Multimedia: <audio> e <video>

5. HTML 5 – Novas API’s
• HTML Geolocation
• HTML Drag and Drop
• HTML Local Storage
• HTML Application Cache
• HTML Web Workers
• HTML SSE

7. CSS 3
• Cascading Style Sheets Level 3
• Ainda não é recomendação oficial da W3C
• Muitos módulos já são recomendações
• Versão recomendada atualmente é CSS 2.1

8. CSS 3 - Módulos
• Seletores
• Backgrounds e Bordas
• Efeitos de Texto
• Transfomrações 2D/3D
• Animações
• Layout de Múltiplas Colunas
• Interface de Usuário
• Entre outros…

9. CSS 3 - Compatibilidade
• Internet Explorer 7 e 8 – Muito pouco ou quase nenhum
suporte.
• Internet Explorer 9 – Suporta bem.
• Firefox 3 – Suporta razoavelmente bem.
• Firefox 4 – Suporta muito bem.
• Safari, Chrome e Opera – Suportam muito bem.

10. CSS 3 - Prefixos
• Safari e Chrome: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-
• Opera: -o-
• Opera e o Internet Explorer 9 não precisam dos prefixos.

11. RECURSOS

12. HTML 5 - Figure
A tag <figure> indica um campo para imagem e a
<figcaption> uma legenda.
Exemplo:
<figure>
<img src="path/to/image" alt="Sobre a Imagem" />
<figcaption>
<p>Isso é uma imagem de algo interessante. </p>
</figcaption>
</figure>

13. HTML 5 – E-mail
Para os campos de input, agora é possível colocar o tipo de
e-mail, que, inclusive permite ao próprio navegador fazer
validação do campo.
Exemplo:
<input id="email" name="email" type="email" />

14. HTML 5 – Header e Footer
Foram implementadas as tags <header> e <footer> para
definir de forma semântica o cabeçalho e rodapé das
páginas.
Exemplo:
<header>…</header>
<footer>…</footer>

15. HTML 5 – Required
Para os campos de input pertencentes a um formulário,
agora é possível colocar o atributo required para que o
campo seja validado antes do formulário ser submetido.
Exemplo:
<input id="email" name="email“ required type="email" />

16. HTML 5 – Áudio
Foi implementada a tag <audio> para eliminar o uso de
objetos ou flash utilizados anteriormente.
Exemplo:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

17. HTML 5 – Vídeo
Foi implementada a tag <video> com o objetivo de eliminar
o uso de objetos e flash amplamente utilizados.
Exemplo:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

18. HTML 5 - Range
Para os campos de input, agora é possível colocar o tipo de
range que cria um campo de seleção entre dois números.
Exemplo:
<input type="range" name="range" min="0" max="10" step="1" value="">

19. HTML 5 – Output
A tag <output> foi criada representar o resultado de
cálculos matemáticos.
Exemplo:
<p>
10 + 5 = <output name="sum"></output>
</p>

20. CSS 3 – Media Queries
As regras de @media são utilizadas para especificar
determinados estilos para a resolução estipulada.
Exemplo:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

21. CSS 3 – Font Face
A regra @font-face permite incorporar as páginas fontes
que não são nativas dos sistemas operacionais.
Exemplo:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

22. CSS 3 – Múltiplas Colunas
Utiliza as propriedades column-count, column-gap,
column-rule-style, column-rule-width, column-rule-color,
column-rule, column-span, column-width para criar
múltiplas colunas de conteúdo através do css.
Exemplo:
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}

23. CSS 3 – Múltiplas Colunas
A regra @font-face permite incorporar as páginas fontes
que não são nativas dos sistemas operacionais.
Exemplo:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

24. CSS 3 – Border Radius
A propriedade border-radius é utilizada para arredondar os
cantos dos elementos e talvez uma das mais utilizadas do
CSS 3.
Exemplo:
div {
border: 2px solid;
border-radius: 25px;
}

25. CSS 3 – Box Shadow
A propriedade box-shadow é utilizada para criar
sombreamento em elementos.
Exemplo:
div {
box-shadow: 10px 10px 5px #888888;
}

26. CSS 3 – Text Shadow
A propriedade text-shadow é utilizada criar o efeito de
sombreamento nos textos.
Exemplo:
h1 {
text-shadow: 2px 2px #ff0000;
}

27. CSS 3 – Cores RGBA
Cores no formato RGBA permitem a definição de cores
utilizando a escala RGB adicionando o campo de Alpha para
fornecer transparência através do CSS. Recurso suportado
nos navegadores: IE9+, Firefox 3+, Chrome, Safari, e Opera
10+
Exemplo:
#p1 {background-color: rgba(255, 0, 0, 0.3);}

28. CSS 3 – Resize
A propriedade resize é utilizada para definir se determinado
elemento pode ser redimensionado.
Exemplo:
div {
resize: both;
overflow: auto;
}

29. CSS 3 – Word Wrap
A propriedade word-wrap é utilizada quando se tem frases
longas e é usada para definir se elas podem ser quebradas
para a próxima linha.
Exemplo:
p.test {
word-wrap: break-word;
}

30. CSS 3 – Transition
A propriedade transition é utilizada para definir o tipo de
animação, o tempo e em que propriedades elas serão
aplicadas.
Exemplo:
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s ease; /* Safari */
transition: width 2s ease;
}

31. CSS 3 – Transition
s

32. CSS 3 – Transform
A propriedade transform é utilizada para definir o tipo de
transformação que alguns elementos podem ter, como, por
exemplo: blur, rotação, scale, outros.
Exemplo:
div {
transform: rotate(7deg);
}

33. REFERÊNCIAS

34. Referências
• http://tableless.com.br/agora-sim-o-html5-se-tornou-oficialmente-uma-recomendacao/
• https://pt.wikipedia.org/wiki/HTML5
• https://pt.wikipedia.org/wiki/CSS3
• http://www.w3schools.com/css/css3_intro.asp
• http://www.w3.org/TR/#tr_CSS
• http://www.w3.org/TR/#tr_HTML
• http://www.html5rocks.com/pt/tutorials/workers/basics/#toc-introduction-jsthreading
• http://code.tutsplus.com/pt/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-
13520
• http://thiagothamiel.com/2011/11/24/o-que-o-css3-tem-de-novo/
• http://www.devmedia.com.br/css3-utilizando-recursos-de-css-e-seletores-para-formatacao-de-
conteudo-net-magazine-79/18796
• http://tableless.com.br/prefixos-dos-browsers-a-web-precisa-de-voce/
• http://thiagothamiel.com/2011/11/24/o-que-o-css3-tem-de-novo/
• http://www.the-art-of-web.com/css/css-animation/