Baixar para ler offline
![CSS - SELETORES E[att=”val”] - seleciona o elemento com atributo = a val ex (input[type=”submit”]) E:last-child - seleciona último filho E do elemento pai E:first-child - seleciona último filho E do elemento pai E:nth-child(n) - seleciona elemento E que seja o n-th (enésimo) filho do elemento pai. E:not(<seletor>) - Seleciona elemento cujo não contenha expressão ...](https://image.slidesharecdn.com/html5ecss3-170609003221/75/Html5-e-css3-57-2048.jpg)
Html5 e css3
- 1. HTML5 e CSS3: Oque tem de novo na Web?
- 2. About me: Rafael Mallmann Eng.da Computação Freelancer e Programador no Portal UNIVATES desde de 2011
- 3. HTML5 Tava na horade melhorar...
- 4. HTML5 Tava na horade melhorar...
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. Eu sei, usouma DIV ou outra ...
- 14. Mas e seeu utilizar comentário :p
- 15. O HTML5 Resolveueste problema:
- 16. O HTML5 -Nova estrutura de TAGS: <header> -> ele é usado para estruturar um cabeçalho, geralmente de informações, de uma página, como o nome do site, slogan, marca, títulos etc. <nav> -> se refere à navegação de um site, que geralmente é composta por links com as principais páginas ou seções(MENU).
- 17. O HTML5 -Nova estrutura de TAGS: <article> -> define e estrutura uma região do seu site, de modo a deixar ela mais independente. <footer> -> rodapé, geralmente, trechos de um site que aparecem ao fim de cada página. <section> -> uma seção, ele define e estrutura diversas partes de uma página
- 18. O HTML5 -Nova estrutura de TAGS: <aside> -> para definir elementos, ou agrupá-los, para definir regiões para publicidade, links laterais, banners e tudo mais que não for conteúdo principal.
- 19. Novas tags xCSS O CSS faz referência direta aos novos elementos:
- 20. Por quê utilizara nova estrutura HTML? (Eu curto divs) o/
- 21. Além de deixaro código mais elegante, a nova estrutura HTML5 trás um grande retorno frente aos motores de buscas como Google, Bing e Yahoo.
- 22. OK entendi aestrutura, mas o que mais tem de novidade?
- 23. Tag audio: Defineum conteúdo de audio. - Exemplo (audio.html) - http://www.univates.br/radio/ao-vivo# (um exemplo mais elaborado)
- 24. Tag vídeo: Defineum conteúdo de vídeo. - Exemplo1 (video1.html) - Exemplo2 (video2.html)
- 25. TODO SITE PRECISADE UM BOM FORMULÁRIO :) O HTML5 introdoziu diversas novidades para formulários, o campo INPUT recebeu novos tipos e facilidades de validação.
- 26. Campo INPUT: search emailurl tel number range date month week time datetime datetime-local color
- 27. Campos INPUT: - Exemplo(formulario.html)
- 28. E o taldo CANVAS?
- 29. E o taldo CANVAS?
- 30. CANVAS O HTML <canvas>elemento é usado para desenhar gráficos, em tempo real, através de scripting (normalmente JavaScript). O elemento <canvas> é apenas uma recipiente para gráficos. Você deve usar um script para realmente desenhar os gráficos. Canvas tem vários métodos para desenhar caminhos, caixas, círculos, texto, e adicionar imagens.
- 31.
- 32. AFINAL DE CONTAS, COMOFICOU O FLASH?
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39. CSS3 Já imaginou podercriar efeitos direto no CSS sem NENHUM Javascript?
- 40. CSS3 Já imaginou podercriar efeitos direto no CSS sem NENHUM Javascript?
- 42. O CSS3 TROUXEGRANDES NOVIDADES PARA CRIAÇÃO DE EFEITOS VISUAIS:
- 43.
- 44. Transition Transições suaves, comdeterminação de tempo e efeito. Parâmetros: delay, duration, property e timing-function
- 45. Transition elemento{ transition: .1s .0s; -webkit-transition:.1s .0s;/*Safari*/ } elemento{ -webkit-transition: 0.2s linear transform, 0.2s linear background; transition: 0.2s linear transform, 0.2s linear background; }
- 46.
- 47. Transforms - Translate (Mudançade posição) - Rotate (Rotação) - Scale (Ampliar)
- 48. Transforms - Translate -Exemplo (translate.html)
- 49. Transforms - Rotate -Exemplo (rotate.html)
- 50. Transforms - Scale -Exemplo (scale.html)
- 51. skewY() skew() div {-ms-transform: skewY(20deg); /* IE 9 */ -webkit-transform: skewY(20deg); /* Safari */ transform: skewY(20deg);} div { -ms-transform: skew(20deg, 10deg); /* IE 9 */ -webkit-transform: skew(20deg, 10deg); /* Safari */ transform: skew(20deg, 10deg);}
- 52. skewY() skew() - Exemplo(skew.html)
- 53. Transforms - 3D -translate3d(x,y,z) - scale3d(x,y,z) - rotate3d(x,y,z,angle)
- 54. Transforms - 3D -Exemplos (rotate3D.html, transfor3D.html, flip3D.html)
- 56. CSS - SELETORES Nossagama de seletores foi ampliada e cada vez menos é necessário criar classes e ids para estilizar nosso site.
- 57. CSS - SELETORES E[att=”val”]- seleciona o elemento com atributo = a val ex (input[type=”submit”]) E:last-child - seleciona último filho E do elemento pai E:first-child - seleciona último filho E do elemento pai E:nth-child(n) - seleciona elemento E que seja o n-th (enésimo) filho do elemento pai. E:not(<seletor>) - Seleciona elemento cujo não contenha expressão ...
- 58. CSS3 - SELETORES -Exemplo (seletores.html) - http://www.maujor.com/tutorial/seletores-css3.php
- 59. CSS3 + SELETORES DEEVENTOS
- 60. NÓS TEMOS OPODER!!
- 61. Exemplos: - http://tableless.com.br/elementos-de-interface- utilizando-apenas-css3/ - http://tableless.github.io/exemplos/ -http://www.betomarques.com/artigos/artigo_019.p hp
- 62.
- 64.