CSS3 e Html5 - O que há de novo / parte 1

3.910 visualizações

Publicada em

Nessa apresentação iremos falar um pouco da história do Html e do CSS e um pouco sobre o que há de novo no Html5 e no CSS3!

Publicada em: Tecnologia, Design
2 comentários
1 gostou
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
3.910
No SlideShare
0
A partir de incorporações
0
Número de incorporações
197
Ações
Compartilhamentos
0
Downloads
46
Comentários
2
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

CSS3 e Html5 - O que há de novo / parte 1

  1. 1. Vamos falar de
  2. 2. Html5 + SexyCSS3 + Potente
  3. 3. Um pouco da evolução
  4. 4. 1991 – Html1994 – Html21996 – Css1 e JavaScript1.21997 – Html41998 - CSS2
  5. 5. Surge a W3C2000 – XHtml12002 – Web Stantard2005 – AJAX2009 – Html 5 e CSS3
  6. 6. html5test.com
  7. 7. Quarto Lugar...
  8. 8. Terceiro Lugar...
  9. 9. Segundo Lugar...
  10. 10. Primeiro Lugar...
  11. 11. Não testado...
  12. 12. Xhtml 1
  13. 13. <?xml version=”1.0” encoding=”utf-8” ?><!DOCTYPE htlm PUBLIC *-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html lang=”pt – BR” xml:lang=”pt – BR” xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>CSS3 e Html 5</title> <meta content=”text/html; charset=UTF-8” http-equiv=”content-type” /> </head> <body> <div id=”principal”> <div id=”topo”> Imagem do topo </div> <div id=”conteudo”> Conteúdo da página </div> <div id=”rodape”> Links e informações do rodapé </div> </div> </body>
  14. 14. Html5 e CSS3
  15. 15. <!DOCTYPE htlm><html> <head> <title>CSS3 e Html 5</title> <meta charset=”utf-8”> </head> <body> <principal> <topo> Imagem do topo </topo> <conteudo> Conteúdo da página <conteudo> <rodape> Links e informações do rodapé </rodape> </principal> </body>
  16. 16. Tags do Html5
  17. 17. Unidade de medida...
  18. 18. “px” por “em” para defnir tamanho das fontes...
  19. 19. html { font-size: 100%; }body { font-size: .68em; }#conteudo h1 { font-size: 1.45em; }#conteudo p { font-size: 1.1em; }#conteudo p strong { font-size: 1.16em; }
  20. 20. Cálculo feito:11/16 = 0.68A idéia é que11px é igual a0.68em de16px.
  21. 21. (valor de referência) / (valor a ser convertido) = (valor que desejamos)
  22. 22. - bordas redondas- sombras- múltiplos backgrounds- novos seletores- transformação 2D e 3D em animações
  23. 23. box 1 / -webkit-transform: translate(3em,0);box 2 / -webkit-transform: rotate(30deg);box 3 / -webkit-transform: translate(-3em,1em);box 4 / -webkit-transform: scale(2);
  24. 24. Chrome e Safari = -webkit;Firefox = -moz;Opera = -o;

×