Yes we can!

6.080 visualizações

Publicada em

Agora que o Internet Explorer 8 morreu, e o número de usuários do Internet Explorer 9 é quase insignificante, há uma porção de recursos do CSS que finalmente podemos usar.

Publicada em: Software
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
6.080
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4.631
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Yes we can!

  1. 1. Yes we can!Yes we can!
  2. 2. vw / vhvw / vh vmin / vmaxvmin / vmax
  3. 3. Entre os nossos clientes:Entre os nossos clientes: 93,63% - Navegadores de Verdade 4,64% - Internet Explorer 10 e 11 1,73% - Internet Explorer 9 ou menor
  4. 4. IE 8 morreuIE 8 morreu IE 9 subiu no telhadoIE 9 subiu no telhado
  5. 5. ::placeholder::placeholder
  6. 6. https://css-tricks.com/snippets/https://css-tricks.com/snippets/ css/style-placeholder-text/css/style-placeholder-text/
  7. 7. CountersCounters
  8. 8. http://davidwalsh.name/css-couhttp://davidwalsh.name/css-cou ntersnters
  9. 9. Background position edgesBackground position edges
  10. 10. background-position:background-position: bottom 50px right 20pxbottom 50px right 20px
  11. 11. Background sizeBackground size
  12. 12. background-size: 20px 30px;background-size: 20px 30px; background-size: contain;background-size: contain; background-size: cover;background-size: cover;
  13. 13. https://css-tricks.com/almanachttps://css-tricks.com/almanac /properties/b/background-size//properties/b/background-size/
  14. 14. Multiple backgroundsMultiple backgrounds
  15. 15. http://www.css3.info/preview/http://www.css3.info/preview/ multiple-backgrounds/multiple-backgrounds/
  16. 16. Box-shadowBox-shadow
  17. 17. http://www.cssmatic.com/boxhttp://www.cssmatic.com/box -shadow-shadow
  18. 18. RGBARGBA
  19. 19. http://tableless.com.br/css3-bhttp://tableless.com.br/css3-b reve-introducao-a-rgba/reve-introducao-a-rgba/
  20. 20. GradientesGradientes
  21. 21. http://www.colorzilla.com/gradhttp://www.colorzilla.com/grad ient-editor/ient-editor/
  22. 22. Text-shadowText-shadow
  23. 23. Text-shadow Text-shadow Text-shadow Text-shadow Text-shadow Text-shadow
  24. 24. min-width / max-widthmin-width / max-width min-height / max-heightmin-height / max-height
  25. 25. .slide {.slide { width: 100vw;width: 100vw; height: 100vh;height: 100vh; }}
  26. 26. #quadrado {#quadrado { width: 90vmin;width: 90vmin; height: 90vmin;height: 90vmin; }}
  27. 27. remrem http://tableless.com.br/unidadhttp://tableless.com.br/unidad e-pixels-em-rem/e-pixels-em-rem/
  28. 28. box-sizingbox-sizing
  29. 29. http://www.binvisions.com/artihttp://www.binvisions.com/arti cles/box-sizing-property-diffecles/box-sizing-property-diffe rence-content-border/rence-content-border/
  30. 30. ColunasColunas
  31. 31. http://www.css3.info/preview/http://www.css3.info/preview/ multi-column-layout/multi-column-layout/
  32. 32. CálculosCálculos
  33. 33. http://www.maujor.com/tutorialhttp://www.maujor.com/tutorial /css3-funcao-css-calc.php/css3-funcao-css-calc.php div {div { width: calc(50% - 100px);width: calc(50% - 100px); height: calc(100vh - 50px);height: calc(100vh - 50px); }}
  34. 34. FlexboxFlexbox
  35. 35. https://css-tricks.com/snippets/https://css-tricks.com/snippets/ css/a-guide-to-flexbox/css/a-guide-to-flexbox/
  36. 36. Que mais?Que mais?
  37. 37. Mais:Mais: OutlineOutline word-break: break-allword-break: break-all text-overflowtext-overflow TransformaçõesTransformações
  38. 38. Mais:Mais: border-radiusborder-radius ::before e ::after::before e ::after Transições e animaçõesTransições e animações
  39. 39. Elcio FerreiraElcio Ferreira elcio@visie.com.brelcio@visie.com.br twitter: @elciotwitter: @elcio http://elcio.com.br/http://elcio.com.br/

×