Transferir como PDF, PPTX
Carregado porFlavia Siqueira
CSS3 e Html5 - O que há de novo / parte 1
O documento discute a evolução das linguagens HTML e CSS desde 1991, destacando novas funcionalidades introduzidas no HTML5 e CSS3 como bordas redondas, sombras, múltiplos backgrounds e transformações 2D e 3D.
Mais conteúdo relacionado
Semelhante a CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1
- 1.
- 2. Html5 + Sexy CSS3+ Potente
- 3. Um pouco daevolução
- 4. 1991 – Html 1994– Html2 1996 – Css1 e JavaScript1.2 1997 – Html4 1998 - CSS2
- 5. Surge a W3C 2000– XHtml1 2002 – Web Stantard 2005 – AJAX 2009 – Html 5 e CSS3
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 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.
- 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.
- 17.
- 18. “px” por “em”para defnir tamanho das fontes...
- 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. Cálculo feito: 11/16 =0.68 A idéia é que 11px é igual a 0.68em de 16px.
- 21. (valor de referência)/ (valor a ser convertido) = (valor que desejamos)
- 22. - bordas redondas -sombras - múltiplos backgrounds - novos seletores - transformação 2D e 3D em animações
- 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. Chrome e Safari= -webkit; Firefox = -moz; Opera = -o;