CSS3 - O que realmente mudou

8,215 views
7,790 views

Published on

O que realmente mudou com a vinda do CSS3? CSS não serve apenas para pintar quadradinhos no layout.

Published in: Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,215
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
180
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

CSS3 - O que realmente mudou

  1. 1. CSS3 <ul><li>O que mudou para nós? </li></ul><ul><li>por Diego Eis </li></ul><ul><li>http://tableless.com.br / </li></ul><ul><li>http://visie.com.br/ </li></ul><ul><li>@diegoeis </li></ul><ul><li>@tableless </li></ul>
  2. 2. O NOVO desenvolvedor client-side
  3. 3. Formatar o conteúdo. Não importa como ele seja servido. CSS Aural por exemplo, “formata” a voz dos leitores de tela. O CSS serve pra portar o conteúdo para diversos meios de acesso. Alguns meios de acesso: Leitores de Tela, Mobiles, Tablets, Tvs, Impressoras, Impressoras Braille, e qualquer outro dispositivo que possa acessar informação. PARA QUE SERVE O CSS?
  4. 4. Não se foque no Navegador, se foque no Motor de Renderização. Os navegadores são muitos, motores de renderização apenas alguns. COMPATIBILIDADE
  5. 5. mudanças do CSS3 <ul><li>O Desenvolvimento do CSS é modular. </li></ul><ul><li>Antes tínhamos que esperar muito tempo para usar novidades. Hoje podemos utilizamos as novidades imediatamente. </li></ul>
  6. 6. mudanças do CSS3 O CSS faz parte da terceira camada de desenvolvimento Antes o Javascript era responsável pelo comportamento dos elementos. Hoje o CSS divide esse trabalho.
  7. 7. O CSS não serve mais para pintar quadradinhos no layout Antes você aumentava o tamanho da letra, escolhia cores de background e letra, borda e etc. Hoje você controla animação, transparência, sombras e principalmente, controla a portabilidade do visual do site para diversos meios de acesso. MUDANÇAS DO CSS3
  8. 8. Novas propriedades <ul><li>box-shadow </li></ul><ul><li>text-shadow </li></ul><ul><li>animation / transition </li></ul><ul><li>rgba </li></ul><ul><li>border-radius </li></ul><ul><li>columns </li></ul><ul><li>media-queries </li></ul><ul><li>@font-face </li></ul><ul><li>entre outras. </li></ul>Essas são propriedades simples que ajudam o designer a corrigir e elaborar layouts mais precisos e interessantes com CSS. Contudo, há propriedades como a keyframes, transitions, transforms e etc, que ajudam o desenvolvedor a dar mais interatividade ao website/sistema.
  9. 9. alguns Exemplos
  10. 10. Obrigado! <ul><li>DIEGO EIS </li></ul><ul><li>http://tableless.com.br / </li></ul><ul><li>http://visie.com.br/ </li></ul><ul><li>@diegoeis </li></ul><ul><li>@tableless </li></ul>

×