SlideShare uma empresa Scribd logo
1 de 23
Novidades no CSS3 Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br
O que vocês fazem atualmente?
Viveríamos sem CSS hoje?
CSS Level 1 ,[object Object],[object Object],[object Object],http://en.wikipedia.org/wiki/Cascading_Style_Sheets (3/8/2007)
CSS Level 2 ,[object Object],[object Object],[object Object]
CSS Level 2 Revision 1 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS - Resumo ,[object Object],[object Object],[object Object]
 
NAVEGADORES E A SINTAXE EXCLUSIVA... SE A W3 NÃO DECIDE, EU IMPLEMENTO... SE A W3C NÃO FAZ, EU FAÇO..
Sintaxe proprietária ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Sintaxe proprietária  ,[object Object],[object Object]
O CSS 3
Desde quando... ,[object Object],http://en.wikipedia.org/wiki/Cascading_Style_Sheets (3/8/2007)
Trabalhando no CSS3 neste exato momento ,[object Object],[object Object]
Já posso usar o CSS3? Desenvolvimento em módulos   http://www.w3.org/TR/css3-roadmap/#columns
Que seletores a mais "temos": ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Pseudo-classes e Pseudo-elementos Visão geral da sintaxe para seletores CSS 3  Selector type Pattern Description Seletor para sub string de atributo E[att^="val"] Casa com qualquer elemento E cujo valor do atributo att começa com "val". Seletor para sub string de atributo E[att$="val"] Casa com qualquer elemento E cujo valor do atributo att termina com "val". Seletor para sub string de atributo E[att*="val"] Casa com qualquer elemento E cujo valor do atributo att contenha a sub string "val". Pseudo classe estrutural  E:root Casa com o elemento raiz do documento. Em HTML o elemento raiz é sempre o elemento HTML. Pseudo classe estrutural E:nth-child(n) Casa com qualquer elemento E que seja o n-th (enésimo) filho do elemento pai. Pseudo classe estrutural E:nth-last-child(n) Casa com qualquer elemento E que que seja o n-th (enésimo) filho do elemento pai, a contar do último filho. Pseudo classe estrutural E:nth-of-type(n) Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo. Pseudo classe estrutural E:nth-last-of-type(n) Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo, a contar do último filho Pseudo classe estrutural E:last-child Casa com qualquer elemento E que seja o último filho do elemento pai. Pseudo classe estrutural E:first-of-type Casa com qualquer elemento E que seja o primeiro elemento irmão do seu tipo. Pseudo classe estrutural E:last-of-type Casa com qualquer elemento E que seja o último elemento irmão do seu tipo. Pseudo classe estrutural E:only-child Casa com qualquer elemento E que seja o único filho do elemento pai. Pseudo classe estrutural E:only-of-type Casa com qualquer elemento E que seja o único elemento irmão do seu tipo. Pseudo classe estrutural E:empty Casa com qualquer elemento E que não tenha filhos (incluindo os nós de texto). Pseudo classe :target  E:target Casa com um elemento E que seja o destino da URL. Pseudo classe estado de elemento de UI E:enabled Casa com qualquer elemento E de interface de usuário (um controle de formulário) e que esteja habilitado (enabled). Pseudo classe estado de elemento de UI E:disabled Casa com qualquer elemento E de interface de usuário (um controle de formulário) que esteja desabilitado (disabled). Pseudo classe estado de elemento de UI E:checked Casa com qualquer elemento E de interface de usuário (um controle de formulário) que esteja marcado (checked). Pseudo-elemento fragmentos de elemento de UI E::selection Casa com a parte de qualquer elemento E que tenha sido selecionado ou destacado pelo usuário. Pseudo classe negação  E:not(s) Casa com qualquer elemento E que não case com o seletor simples s. Elemento de combinação irmão em g
Quais navegadores suportam o CSS3
Quando teremos mais suporte ao CSS3? ,[object Object],[object Object]
Praticando... Projeto ECOTRIP
Já é a hora de usar o CSS 3?
Conclusões ,[object Object],[object Object],[object Object]
Novidades no CSS3 Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br

Mais conteúdo relacionado

Destaque

Electoral competition and political selection: An analysis of the productivit...
Electoral competition and political selection: An analysis of the productivit...Electoral competition and political selection: An analysis of the productivit...
Electoral competition and political selection: An analysis of the productivit...Stockholm Institute of Transition Economics
 
חפשו את המטמון
חפשו את המטמוןחפשו את המטמון
חפשו את המטמוןYechiel Gottlieb
 
Slideshare ppt ovning
Slideshare ppt ovningSlideshare ppt ovning
Slideshare ppt ovningemilie123
 
Layari Rating Status
Layari Rating StatusLayari Rating Status
Layari Rating StatusUzma Bashir
 
Open data, API and mobile devices
Open data, API and mobile devicesOpen data, API and mobile devices
Open data, API and mobile devicesAnnegrete Wulff
 
Adrik Berger Portfolio
Adrik Berger PortfolioAdrik Berger Portfolio
Adrik Berger Portfoliotreschilescom
 
BDD for RIAs with JavaScript - Skills Matter
BDD for RIAs with JavaScript - Skills MatterBDD for RIAs with JavaScript - Skills Matter
BDD for RIAs with JavaScript - Skills MatterCarlos Ble
 
"La Marca Empleador en el Desarrollo Holístico"
"La Marca Empleador en el Desarrollo Holístico""La Marca Empleador en el Desarrollo Holístico"
"La Marca Empleador en el Desarrollo Holístico"Alvaro Goyenechea
 
Limpieza y desinfección
Limpieza y desinfecciónLimpieza y desinfección
Limpieza y desinfecciónHelard García
 

Destaque (15)

Electoral competition and political selection: An analysis of the productivit...
Electoral competition and political selection: An analysis of the productivit...Electoral competition and political selection: An analysis of the productivit...
Electoral competition and political selection: An analysis of the productivit...
 
Atom moleculer
Atom moleculerAtom moleculer
Atom moleculer
 
חפשו את המטמון
חפשו את המטמוןחפשו את המטמון
חפשו את המטמון
 
EA
EAEA
EA
 
Slideshare ppt ovning
Slideshare ppt ovningSlideshare ppt ovning
Slideshare ppt ovning
 
Layari Rating Status
Layari Rating StatusLayari Rating Status
Layari Rating Status
 
Manvo
ManvoManvo
Manvo
 
Open data, API and mobile devices
Open data, API and mobile devicesOpen data, API and mobile devices
Open data, API and mobile devices
 
Presentation_NEW.PPTX
Presentation_NEW.PPTXPresentation_NEW.PPTX
Presentation_NEW.PPTX
 
Adrik Berger Portfolio
Adrik Berger PortfolioAdrik Berger Portfolio
Adrik Berger Portfolio
 
BDD for RIAs with JavaScript - Skills Matter
BDD for RIAs with JavaScript - Skills MatterBDD for RIAs with JavaScript - Skills Matter
BDD for RIAs with JavaScript - Skills Matter
 
Trabalho de Pesquisa Service Desk
Trabalho de Pesquisa Service DeskTrabalho de Pesquisa Service Desk
Trabalho de Pesquisa Service Desk
 
"La Marca Empleador en el Desarrollo Holístico"
"La Marca Empleador en el Desarrollo Holístico""La Marca Empleador en el Desarrollo Holístico"
"La Marca Empleador en el Desarrollo Holístico"
 
Limpieza y desinfección
Limpieza y desinfecciónLimpieza y desinfección
Limpieza y desinfección
 
Andrea
AndreaAndrea
Andrea
 

Semelhante a Novidades CSS3

Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosTiago Antônio da Silva
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoAnyssa Ferreira
 
Programação Web - CSS
Programação Web - CSSProgramação Web - CSS
Programação Web - CSSMauro Pereira
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Daniel Makiyama
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxLuiz Antonio
 
Apresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignApresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignIuri Andreazza
 
Padroes De Projeto
Padroes De ProjetoPadroes De Projeto
Padroes De Projetoejdn1
 
Apostila_JavaScript_pela_axademia_ardkgfv
Apostila_JavaScript_pela_axademia_ardkgfvApostila_JavaScript_pela_axademia_ardkgfv
Apostila_JavaScript_pela_axademia_ardkgfverickrodrigo23
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudosinfo_cimol
 
Padrões De Projeto e Anti Patterns
Padrões De Projeto e Anti PatternsPadrões De Projeto e Anti Patterns
Padrões De Projeto e Anti PatternsHerval Freire
 
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!Thiago Nascimento Oliveira
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdfRubenManhia
 

Semelhante a Novidades CSS3 (20)

CSS
CSSCSS
CSS
 
CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
Programação Web - CSS
Programação Web - CSSProgramação Web - CSS
Programação Web - CSS
 
Html 20.10
Html   20.10Html   20.10
Html 20.10
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Apresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignApresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do Design
 
Padroes De Projeto
Padroes De ProjetoPadroes De Projeto
Padroes De Projeto
 
Apostila_JavaScript_pela_axademia_ardkgfv
Apostila_JavaScript_pela_axademia_ardkgfvApostila_JavaScript_pela_axademia_ardkgfv
Apostila_JavaScript_pela_axademia_ardkgfv
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudos
 
Padrões De Projeto e Anti Patterns
Padrões De Projeto e Anti PatternsPadrões De Projeto e Anti Patterns
Padrões De Projeto e Anti Patterns
 
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
 
Doctrine for dummies
Doctrine for dummiesDoctrine for dummies
Doctrine for dummies
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 

Mais de ECDD Infnet

SPP - Histórias Vivas: A Arte de Deixar Marcas
SPP - Histórias Vivas:  A Arte de Deixar MarcasSPP - Histórias Vivas:  A Arte de Deixar Marcas
SPP - Histórias Vivas: A Arte de Deixar MarcasECDD Infnet
 
SPP - As Novas concepções da Propaganda Política no Ambiente Digital
SPP - As Novas concepções da Propaganda Política no Ambiente DigitalSPP - As Novas concepções da Propaganda Política no Ambiente Digital
SPP - As Novas concepções da Propaganda Política no Ambiente DigitalECDD Infnet
 
SPP - Design e Direção de Arte
SPP - Design e Direção de ArteSPP - Design e Direção de Arte
SPP - Design e Direção de ArteECDD Infnet
 
2º DesignNAmente - Design Thinking: Ontem e Hoje
2º DesignNAmente - Design Thinking: Ontem e Hoje2º DesignNAmente - Design Thinking: Ontem e Hoje
2º DesignNAmente - Design Thinking: Ontem e HojeECDD Infnet
 
2º DesignNAmente - Life branding
2º DesignNAmente - Life branding2º DesignNAmente - Life branding
2º DesignNAmente - Life brandingECDD Infnet
 
MBA em Design Estrategico
MBA em Design EstrategicoMBA em Design Estrategico
MBA em Design EstrategicoECDD Infnet
 
Os 4 pilares do e-commerce
Os 4 pilares do e-commerce Os 4 pilares do e-commerce
Os 4 pilares do e-commerce ECDD Infnet
 
Qual o meio de pagamento online para a sua loja virtual
Qual o meio de pagamento online para a sua loja virtualQual o meio de pagamento online para a sua loja virtual
Qual o meio de pagamento online para a sua loja virtualECDD Infnet
 
Buzz Monitor em Mídias Sociais - Infnet
Buzz Monitor em Mídias Sociais - InfnetBuzz Monitor em Mídias Sociais - Infnet
Buzz Monitor em Mídias Sociais - InfnetECDD Infnet
 
Palestra Search Engine Marketing - Com foco nos resultados
Palestra Search Engine Marketing - Com foco nos resultadosPalestra Search Engine Marketing - Com foco nos resultados
Palestra Search Engine Marketing - Com foco nos resultadosECDD Infnet
 
Palestra TV Digital - Instituto Infnet
Palestra TV Digital - Instituto InfnetPalestra TV Digital - Instituto Infnet
Palestra TV Digital - Instituto InfnetECDD Infnet
 
Escala de Cores Pantone
Escala de Cores PantoneEscala de Cores Pantone
Escala de Cores PantoneECDD Infnet
 

Mais de ECDD Infnet (12)

SPP - Histórias Vivas: A Arte de Deixar Marcas
SPP - Histórias Vivas:  A Arte de Deixar MarcasSPP - Histórias Vivas:  A Arte de Deixar Marcas
SPP - Histórias Vivas: A Arte de Deixar Marcas
 
SPP - As Novas concepções da Propaganda Política no Ambiente Digital
SPP - As Novas concepções da Propaganda Política no Ambiente DigitalSPP - As Novas concepções da Propaganda Política no Ambiente Digital
SPP - As Novas concepções da Propaganda Política no Ambiente Digital
 
SPP - Design e Direção de Arte
SPP - Design e Direção de ArteSPP - Design e Direção de Arte
SPP - Design e Direção de Arte
 
2º DesignNAmente - Design Thinking: Ontem e Hoje
2º DesignNAmente - Design Thinking: Ontem e Hoje2º DesignNAmente - Design Thinking: Ontem e Hoje
2º DesignNAmente - Design Thinking: Ontem e Hoje
 
2º DesignNAmente - Life branding
2º DesignNAmente - Life branding2º DesignNAmente - Life branding
2º DesignNAmente - Life branding
 
MBA em Design Estrategico
MBA em Design EstrategicoMBA em Design Estrategico
MBA em Design Estrategico
 
Os 4 pilares do e-commerce
Os 4 pilares do e-commerce Os 4 pilares do e-commerce
Os 4 pilares do e-commerce
 
Qual o meio de pagamento online para a sua loja virtual
Qual o meio de pagamento online para a sua loja virtualQual o meio de pagamento online para a sua loja virtual
Qual o meio de pagamento online para a sua loja virtual
 
Buzz Monitor em Mídias Sociais - Infnet
Buzz Monitor em Mídias Sociais - InfnetBuzz Monitor em Mídias Sociais - Infnet
Buzz Monitor em Mídias Sociais - Infnet
 
Palestra Search Engine Marketing - Com foco nos resultados
Palestra Search Engine Marketing - Com foco nos resultadosPalestra Search Engine Marketing - Com foco nos resultados
Palestra Search Engine Marketing - Com foco nos resultados
 
Palestra TV Digital - Instituto Infnet
Palestra TV Digital - Instituto InfnetPalestra TV Digital - Instituto Infnet
Palestra TV Digital - Instituto Infnet
 
Escala de Cores Pantone
Escala de Cores PantoneEscala de Cores Pantone
Escala de Cores Pantone
 

Novidades CSS3

  • 1. Novidades no CSS3 Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br
  • 2. O que vocês fazem atualmente?
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.  
  • 9. NAVEGADORES E A SINTAXE EXCLUSIVA... SE A W3 NÃO DECIDE, EU IMPLEMENTO... SE A W3C NÃO FAZ, EU FAÇO..
  • 10.
  • 11.
  • 13.
  • 14.
  • 15. Já posso usar o CSS3? Desenvolvimento em módulos http://www.w3.org/TR/css3-roadmap/#columns
  • 16.
  • 17. Pseudo-classes e Pseudo-elementos Visão geral da sintaxe para seletores CSS 3 Selector type Pattern Description Seletor para sub string de atributo E[att^="val"] Casa com qualquer elemento E cujo valor do atributo att começa com "val". Seletor para sub string de atributo E[att$="val"] Casa com qualquer elemento E cujo valor do atributo att termina com "val". Seletor para sub string de atributo E[att*="val"] Casa com qualquer elemento E cujo valor do atributo att contenha a sub string "val". Pseudo classe estrutural E:root Casa com o elemento raiz do documento. Em HTML o elemento raiz é sempre o elemento HTML. Pseudo classe estrutural E:nth-child(n) Casa com qualquer elemento E que seja o n-th (enésimo) filho do elemento pai. Pseudo classe estrutural E:nth-last-child(n) Casa com qualquer elemento E que que seja o n-th (enésimo) filho do elemento pai, a contar do último filho. Pseudo classe estrutural E:nth-of-type(n) Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo. Pseudo classe estrutural E:nth-last-of-type(n) Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo, a contar do último filho Pseudo classe estrutural E:last-child Casa com qualquer elemento E que seja o último filho do elemento pai. Pseudo classe estrutural E:first-of-type Casa com qualquer elemento E que seja o primeiro elemento irmão do seu tipo. Pseudo classe estrutural E:last-of-type Casa com qualquer elemento E que seja o último elemento irmão do seu tipo. Pseudo classe estrutural E:only-child Casa com qualquer elemento E que seja o único filho do elemento pai. Pseudo classe estrutural E:only-of-type Casa com qualquer elemento E que seja o único elemento irmão do seu tipo. Pseudo classe estrutural E:empty Casa com qualquer elemento E que não tenha filhos (incluindo os nós de texto). Pseudo classe :target E:target Casa com um elemento E que seja o destino da URL. Pseudo classe estado de elemento de UI E:enabled Casa com qualquer elemento E de interface de usuário (um controle de formulário) e que esteja habilitado (enabled). Pseudo classe estado de elemento de UI E:disabled Casa com qualquer elemento E de interface de usuário (um controle de formulário) que esteja desabilitado (disabled). Pseudo classe estado de elemento de UI E:checked Casa com qualquer elemento E de interface de usuário (um controle de formulário) que esteja marcado (checked). Pseudo-elemento fragmentos de elemento de UI E::selection Casa com a parte de qualquer elemento E que tenha sido selecionado ou destacado pelo usuário. Pseudo classe negação E:not(s) Casa com qualquer elemento E que não case com o seletor simples s. Elemento de combinação irmão em g
  • 19.
  • 21. Já é a hora de usar o CSS 3?
  • 22.
  • 23. Novidades no CSS3 Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br