Web em grande estilo com CSS 3

2,215 views

Published on

Neste webcast apresento as principais novidades relacionadas ao CSS 3 e sua compatibilidade com o Internet Explorer 9.

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

No Downloads
Views
Total views
2,215
On SlideShare
0
From Embeds
0
Number of Embeds
76
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web em grande estilo com CSS 3

  1. 1. Web emgrandeestilocom CSS3<br />Fabrício Lopes Sanchez<br />Arquiteto de Soluções Web<br />União Central Brasileira da IASD/APO<br />
  2. 2. Agenda<br />CSS, o que é? Qualsuafunção?<br />História e evolução do CSS<br />CSS3: Características e funções<br />Modules<br />Borders<br />Backgrounds<br />Color<br />Text effects<br />Selectors<br />Other modules<br />Demonstração<br />2<br />
  3. 3. CSS3: O que é? Qualsuafunção?<br />CSS: Cascading Style Sheets<br />É umalinguagemparaformatação de páginas HTML<br />Separas as responsabilidades: <br />Desenvolvedor: estrutura (HTML)<br />Designer: elementosgráficos<br />A uniãodestascaracterísticasgera um novo tipo de estrutura: (X)HTML<br />“Semântica” da páginamelhorada<br />Criado e mantidopela W3C<br />3<br />
  4. 4. CSS3: O que é? Qualsuafunção?<br />4<br />Fonte: devmedia.com.br<br />
  5. 5. História e Evolução do CSS<br />1970: SGML – conceito de formatação de web pages surge pelaprimeiravez<br />1991: nasce o HTML com o objetivo de interligarcomputadores e exibirinformações<br />1993: surge o Mosaic e o HTML torna-se a linguagempadrão da web (primeirosmecanismos de formataçãoaparecem)<br />1996: Surge o CSS 1<br />1997: HTML passa a suportarextensões CSS<br />5<br />
  6. 6. História e Evolução do CSS<br />1998: É apresentado o CSS 2<br />CSS 2 passa a serinterpretadanativamenteportodosos browsers<br />CSS 2 trouxemuitascaraterísticas e funçõesimportantes<br />A últimaversãooficializadapela W3C é a 2.1<br />6<br />
  7. 7. CSS 3: Features<br />Modules<br />7<br />CSS 3 traz arquitetura modular. Os objetivos a serem alcançados são:<br /><ul><li>Atualizações modulares;
  8. 8. Maior flexibilidade;
  9. 9. Implementação de características que realmente importam por parte dos browsers;</li></li></ul><li>CSS 3: Features<br />Borders<br />8<br />Em relação a utilização de bordas as principais modificações são:<br /><ul><li>Cantos arredondados;
  10. 10. Coloração flexível;
  11. 11. Bordas com imagens;
  12. 12. Sombreamento</li></li></ul><li>CSS 3: Features<br />Borders (exemplo)<br />9<br /> #ExBordas{<br /> box-shadow:10px 10px 5px #888;<br /> background-color:#efefef;<br /> width:400px;<br /> padding:20px;<br /> }<br /> ...<br /> <div id=“ExBordas”>Teste</div><br />
  13. 13. CSS 3: Features<br />Borders (resultado)<br />10<br />
  14. 14. CSS 3: Features<br />Backgrounds<br />11<br />Em relação a composição de backgrounds temos as novidades:<br /><ul><li>background-origin
  15. 15. background-clip
  16. 16. background-size
  17. 17. Backgrounds múltiplos</li></li></ul><li>CSS 3: Features<br />Backgrounds (exemplo)<br />12<br /> #Back{<br /> background-size:200px 100px #000;<br /> color:#fff;<br /> }<br /> ...<br /> <div id=“Back”>Teste</div><br />
  18. 18. CSS 3: Features<br />Colors<br />13<br />Novidades em relação aos padrões de cores suportados:<br /><ul><li>HSL Color
  19. 19. HSLA Color
  20. 20. Opacity
  21. 21. RGBA Colors</li></li></ul><li>CSS 3: Features<br />Colors (exemplo 1)<br />14<br /><div style="background-color: hsl(0,100%, 50%);"></div><br /> <div style="background-color: hsl(120,100%, 50%);"></div><br /><div style="background-color: hsl(240,100%, 50%);"></div> <br />
  22. 22. CSS 3: Features<br />Colors (exemplo 2)<br />15<br /><divstyle="background:rgb(255,0,0); opacity: 0.2;"></div> <br /> <divstyle=" background: rgb(255,0,0); opacity:0.4;"></div><br /><divstyle="background:rgb(255,0,0); opacity: 0.6;"></div> <br /> <divstyle="background:rgb(255,0,0); opacity: 0.8;"></div> <br /> <divstyle=" background:rgb(255,0,0); opacity: 1;"></div><br />
  23. 23. CSS 3: Features<br />TextEffects<br />16<br />Alguns novos e interessantes efeitos para textos:<br /><ul><li>text-shadow
  24. 24. text-overflow
  25. 25. word-wrap</li></li></ul><li>CSS 3: Features<br />TextEffects (exemplo)<br />17<br />p {text-shadow: 2px 2px2px #000;}<br /> …<br /> <p>Testetesteteste</p><br />
  26. 26. CSS 3: Features<br />TextEffects (resultado)<br />18<br />
  27. 27. CSS 3: Features<br />Selectors<br />19<br />Alguns novos seletores adicionados. A seguir o funcionamento de alguns deles:<br /><ul><li>Elemento [atributo ^= valor]
  28. 28. Elemento [atributo $= valor]
  29. 29. Elemento [atributo *= valor]</li></li></ul><li>CSS 3: Features<br />Selectors<br />20<br />E[atributo^=valor]<br /><ul><li>Aplica o estilo ao elemento cujo “atributo” possui valor iniciado com a sequência de caracteres “valor”.
  30. 30. div[id^=“par”]</li></li></ul><li>CSS 3: Features<br />Selectors E[att^=val]<br />21<br />div[id^=“par”]{ background:red; }<br /> …<br /> <div id=“paragrafo1”>Teste 1</div><br /> <div id=“espaco”>Testeespaco</div> <div id=“paragrafo2”>Teste 2</div><br />
  31. 31. CSS 3: Features<br />Selectors E[att^=val]<br />22<br />
  32. 32. CSS 3: Features<br />Selectors<br />23<br />E[atributo$=valor]<br /><ul><li>Aplica o estilo ao elemento cujo “atributo” possui valor finalizado com a string de caracteres “valor”.
  33. 33. div[id$=“fo”]</li></li></ul><li>CSS 3: Features<br />SelectorsE[att$=val]<br />24<br />div[id$=“co”]{ background:blue; }<br /> …<br /> <div id=“paragrafo1”>Teste 1</div><br /> <div id=“espaco”>Testeespaço</div> <div id=“paragrafo2”>Teste 2</div><br />
  34. 34. CSS 3: Features<br />Selectors E[att$=val]<br />25<br />
  35. 35. CSS 3: Features<br />Selectors<br />26<br />E[atributo*=valor]<br /><ul><li>Aplica o estilo ao elemento cujo “atributo” possui valor que contém a string de caracteres “valor”.
  36. 36. div[id*=“pa”]</li></li></ul><li>CSS 3: Features<br />SelectorsE[att*=val]<br />27<br />div[id*=“pa”]{ background:green; }<br /> …<br /> <div id=“paragrafo1”>Teste 1</div><br /> <div id=“espaco”>Testeespaço</div> <div id=“paragrafo2”>Teste 2</div><br />
  37. 37. CSS 3: Features<br />Selectors E[att$=val]<br />28<br />
  38. 38. CSS 3: Features<br />Other modules<br />29<br />Alguns outros recursos candidatos a entrar na especificação do CSS3:<br /><ul><li>multi-column
  39. 39. @font-face
  40. 40. speech</li></li></ul><li>CSS 3: Features<br />@font-face<br />30<br />@font-face{<br />font-family:kimberley;<br />src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype"); <br /> }<br /> …<br />h1 { font-family: "Kimberley" }<br />
  41. 41. CSS 3: Features<br />@font-face<br />31<br />
  42. 42. Recursos suportados pelo IE9<br />32<br />
  43. 43. Links<br />W3C Working Drafthttp://www.w3.org/TR/css3-roadmap/<br />CSS 3 Infohttp://www.css3.info/<br />MSDN http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx<br />Site pessoalhttp://www.fabriciosanchez.com.br/<br />33<br />
  44. 44. e-mail contato@fabriciosanchez.com.brtwitter @SanchezFabriciomsn fa_lo_sa@hotmail.comsite http://www.fabriciosanchez.com.br<br />contato<br />
  45. 45. © 2010 Microsoft Corporation. All rights reserved. Microsoft, MSDN, the MSDN logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies.  <br />The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.  Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.  MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.<br />

×