Web em grande estilo com CSS 3
2 gostaram1,339 visualizações
O documento discute a evolução e as características do CSS, destacando a importância do CSS3 na formatação de páginas da web. Aborda as novas funcionalidades, como bordas, backgrounds, cores, efeitos de texto e seletores, além de mencionar a arquitetura modular do CSS3. Também inclui informações sobre a história do CSS desde sua origem até suas atualizações mais recentes.
![CSS 3: FeaturesSelectors19Alguns novos seletores adicionados. A seguir o funcionamento de alguns deles:Elemento [atributo ^= valor]](https://image.slidesharecdn.com/17-03-2011-css3-110321224130-phpapp01/85/Web-em-grande-estilo-com-CSS-3-27-320.jpg)
![Elemento [atributo $= valor]](https://image.slidesharecdn.com/17-03-2011-css3-110321224130-phpapp01/85/Web-em-grande-estilo-com-CSS-3-28-320.jpg)
![Elemento [atributo *= valor]CSS 3: FeaturesSelectors20E[atributo^=valor]Aplica o estilo ao elemento cujo “atributo” possui valor iniciado com a sequência de caracteres “valor”.](https://image.slidesharecdn.com/17-03-2011-css3-110321224130-phpapp01/85/Web-em-grande-estilo-com-CSS-3-29-320.jpg)
![div[id^=“par”]CSS 3: FeaturesSelectors E[att^=val]21div[id^=“par”]{ background:red; } … <div id=“paragrafo1”>Teste 1</div> <div id=“espaco”>Testeespaco</div> <div id=“paragrafo2”>Teste 2</div>](https://image.slidesharecdn.com/17-03-2011-css3-110321224130-phpapp01/85/Web-em-grande-estilo-com-CSS-3-30-320.jpg)
![CSS 3: FeaturesSelectors E[att^=val]22](https://image.slidesharecdn.com/17-03-2011-css3-110321224130-phpapp01/85/Web-em-grande-estilo-com-CSS-3-31-320.jpg)
![CSS 3: FeaturesSelectors23E[atributo$=valor]Aplica o estilo ao elemento cujo “atributo” possui valor finalizado com a string de caracteres “valor”.](https://image.slidesharecdn.com/17-03-2011-css3-110321224130-phpapp01/85/Web-em-grande-estilo-com-CSS-3-32-320.jpg)
![div[id$=“fo”]CSS 3: FeaturesSelectorsE[att$=val]24div[id$=“co”]{ background:blue; } … <div id=“paragrafo1”>Teste 1</div> <div id=“espaco”>Testeespaço</div> <div id=“paragrafo2”>Teste 2</div>](https://image.slidesharecdn.com/17-03-2011-css3-110321224130-phpapp01/85/Web-em-grande-estilo-com-CSS-3-33-320.jpg)
![CSS 3: FeaturesSelectors E[att$=val]25](https://image.slidesharecdn.com/17-03-2011-css3-110321224130-phpapp01/85/Web-em-grande-estilo-com-CSS-3-34-320.jpg)
![CSS 3: FeaturesSelectors26E[atributo*=valor]Aplica o estilo ao elemento cujo “atributo” possui valor que contém a string de caracteres “valor”.](https://image.slidesharecdn.com/17-03-2011-css3-110321224130-phpapp01/85/Web-em-grande-estilo-com-CSS-3-35-320.jpg)
Web em grande estilo com CSS 3
- 1. Web emgrandeestilocom CSS3Fabrício Lopes SanchezArquiteto de Soluções WebUnião Central Brasileira da IASD/APO
- 2. AgendaCSS, o que é? Qualsuafunção?História e evolução do CSSCSS3: Características e funçõesModulesBordersBackgroundsColorText effectsSelectorsOther modulesDemonstração2
- 3. CSS3: O que é? Qualsuafunção?CSS: Cascading Style SheetsÉ umalinguagemparaformatação de páginas HTMLSeparas as responsabilidades: Desenvolvedor: estrutura (HTML)Designer: elementosgráficosA uniãodestascaracterísticasgera um novo tipo de estrutura: (X)HTML“Semântica” da páginamelhoradaCriado e mantidopela W3C3
- 4. CSS3: O que é? Qualsuafunção?4Fonte: devmedia.com.br
- 5. História e Evolução do CSS1970: SGML – conceito de formatação de web pages surge pelaprimeiravez1991: nasce o HTML com o objetivo de interligarcomputadores e exibirinformações1993: surge o Mosaic e o HTML torna-se a linguagempadrão da web (primeirosmecanismos de formataçãoaparecem)1996: Surge o CSS 11997: HTML passa a suportarextensões CSS5
- 6. História e Evolução do CSS1998: É apresentado o CSS 2CSS 2 passa a serinterpretadanativamenteportodosos browsersCSS 2 trouxemuitascaraterísticas e funçõesimportantesA últimaversãooficializadapela W3C é a 2.16
- 7. CSS 3: FeaturesModules7CSS 3 traz arquitetura modular. Os objetivos a serem alcançados são:Atualizações modulares;
- 9. Implementação de características que realmente importam por parte dos browsers;CSS 3: FeaturesBorders8Em relação a utilização de bordas as principais modificações são:Cantos arredondados;
- 12. SombreamentoCSS 3: FeaturesBorders (exemplo)9 #ExBordas{ box-shadow:10px 10px 5px #888; background-color:#efefef; width:400px; padding:20px; } ... <div id=“ExBordas”>Teste</div>
- 13. CSS 3: FeaturesBorders (resultado)10
- 14. CSS 3: FeaturesBackgrounds11Em relação a composição de backgrounds temos as novidades:background-origin
- 15. background-clip
- 16. background-size
- 17. Backgrounds múltiplosCSS 3: FeaturesBackgrounds (exemplo)12 #Back{ background-size:200px 100px #000; color:#fff; } ... <div id=“Back”>Teste</div>
- 18. CSS 3: FeaturesColors13Novidades em relação aos padrões de cores suportados:HSL Color
- 19. HSLA Color
- 20. Opacity
- 21. RGBA ColorsCSS 3: FeaturesColors (exemplo 1)14<div style="background-color: hsl(0,100%, 50%);"></div> <div style="background-color: hsl(120,100%, 50%);"></div><div style="background-color: hsl(240,100%, 50%);"></div>
- 22. CSS 3: FeaturesColors (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>
- 23. CSS 3: FeaturesTextEffects16Alguns novos e interessantes efeitos para textos:text-shadow
- 24. text-overflow
- 25. word-wrapCSS 3: FeaturesTextEffects (exemplo)17p {text-shadow: 2px 2px2px #000;} … <p>Testetesteteste</p>
- 26. CSS 3: FeaturesTextEffects (resultado)18
- 27. CSS 3: FeaturesSelectors19Alguns novos seletores adicionados. A seguir o funcionamento de alguns deles:Elemento [atributo ^= valor]
- 28. Elemento [atributo $= valor]
- 29. Elemento [atributo *= valor]CSS 3: FeaturesSelectors20E[atributo^=valor]Aplica o estilo ao elemento cujo “atributo” possui valor iniciado com a sequência de caracteres “valor”.
- 30. div[id^=“par”]CSS 3: FeaturesSelectors E[att^=val]21div[id^=“par”]{ background:red; } … <div id=“paragrafo1”>Teste 1</div> <div id=“espaco”>Testeespaco</div> <div id=“paragrafo2”>Teste 2</div>
- 31. CSS 3: FeaturesSelectors E[att^=val]22
- 32. CSS 3: FeaturesSelectors23E[atributo$=valor]Aplica o estilo ao elemento cujo “atributo” possui valor finalizado com a string de caracteres “valor”.
- 33. div[id$=“fo”]CSS 3: FeaturesSelectorsE[att$=val]24div[id$=“co”]{ background:blue; } … <div id=“paragrafo1”>Teste 1</div> <div id=“espaco”>Testeespaço</div> <div id=“paragrafo2”>Teste 2</div>
- 34. CSS 3: FeaturesSelectors E[att$=val]25
- 35. CSS 3: FeaturesSelectors26E[atributo*=valor]Aplica o estilo ao elemento cujo “atributo” possui valor que contém a string de caracteres “valor”.
- 36. div[id*=“pa”]CSS 3: FeaturesSelectorsE[att*=val]27div[id*=“pa”]{ background:green; } … <div id=“paragrafo1”>Teste 1</div> <div id=“espaco”>Testeespaço</div> <div id=“paragrafo2”>Teste 2</div>
- 37. CSS 3: FeaturesSelectors E[att$=val]28
- 38. CSS 3: FeaturesOther modules29Alguns outros recursos candidatos a entrar na especificação do CSS3:multi-column
- 39. @font-face
- 40. speechCSS 3: Features@font-face30@font-face{font-family:kimberley;src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype"); } …h1 { font-family: "Kimberley" }
- 42. Recursos suportados pelo IE932
- 43. LinksW3C 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.aspxSite pessoalhttp://www.fabriciosanchez.com.br/33
- 44. e-mail [email protected] @SanchezFabriciomsn [email protected] http://www.fabriciosanchez.com.brcontato
- 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.