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

1. Web emgrandeestilocom CSS3 Fabrício Lopes Sanchez Arquiteto de Soluções Web União Central Brasileira da IASD/APO

2. Agenda CSS, o que é? Qualsuafunção? História e evolução do CSS CSS3: Características e funções Modules Borders Backgrounds Color Text effects Selectors Other modules Demonstração 2

3. CSS3: O que é? Qualsuafunção? CSS: Cascading Style Sheets É umalinguagemparaformatação de páginas HTML Separas as responsabilidades: Desenvolvedor: estrutura (HTML) Designer: elementosgráficos A uniãodestascaracterísticasgera um novo tipo de estrutura: (X)HTML “Semântica” da páginamelhorada Criado e mantidopela W3C 3

4. CSS3: O que é? Qualsuafunção? 4 Fonte: devmedia.com.br

5. História e Evolução do CSS 1970: SGML – conceito de formatação de web pages surge pelaprimeiravez 1991: nasce o HTML com o objetivo de interligarcomputadores e exibirinformações 1993: surge o Mosaic e o HTML torna-se a linguagempadrão da web (primeirosmecanismos de formataçãoaparecem) 1996: Surge o CSS 1 1997: HTML passa a suportarextensões CSS 5

6. História e Evolução do CSS 1998: É apresentado o CSS 2 CSS 2 passa a serinterpretadanativamenteportodosos browsers CSS 2 trouxemuitascaraterísticas e funçõesimportantes A últimaversãooficializadapela W3C é a 2.1 6

8. Maior flexibilidade;

10. Coloração flexível;

11. Bordas com imagens;

13. CSS 3: Features Borders (resultado) 10

15. background-clip

16. background-size

19. HSLA Color

20. Opacity

22. CSS 3: Features Colors (exemplo 2) 15 <divstyle="background:rgb(255,0,0); opacity: 0.2;"></div> <divstyle=" background: rgb(255,0,0); opacity:0.4;"></div> <divstyle="background:rgb(255,0,0); opacity: 0.6;"></div> <divstyle="background:rgb(255,0,0); opacity: 0.8;"></div> <divstyle=" background:rgb(255,0,0); opacity: 1;"></div>

24. text-overflow

26. CSS 3: Features TextEffects (resultado) 18

28. Elemento [atributo $= valor]

31. CSS 3: Features Selectors E[att^=val] 22

34. CSS 3: Features Selectors E[att$=val] 25

37. CSS 3: Features Selectors E[att$=val] 28

39. @font-face

41. CSS 3: Features @font-face 31

42. Recursos suportados pelo IE9 32

43. Links W3C Working Drafthttp://www.w3.org/TR/css3-roadmap/ CSS 3 Infohttp://www.css3.info/ MSDN http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx Site pessoalhttp://www.fabriciosanchez.com.br/ 33

44. e-mail contato@fabriciosanchez.com.brtwitter @SanchezFabriciomsn fa_lo_sa@hotmail.comsite http://www.fabriciosanchez.com.br contato

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. 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.