Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS3: CSS3 (aula 2)

1,107 views

Published on

Curso de Extensão em Desenvolvimento Web - Módulo II: CSS3.
Curso de Sistemas de Informação da ULBRA Cachoeira do Sul

Published in: Internet
  • Be the first to comment

CSS3: CSS3 (aula 2)

  1. 1. Aula 2:
  2. 2. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3: Suporte suporte dos navegadores e técnicas de compatibilidade
  3. 3. prof. Gustavo Zimmermann | contato@gust4vo.com Motores de Renderização CSS3 - Start CSS3: Suporte O suporte as linguagens não é feito exatamente pelo navegador, e sim pelo motor de renderização que ele utiliza. MOTOR BROWSER Webkit Gecko Trident Presto *Atualmente, o Webkit é o motor de renderização que tem maior compatibilidade com o HTML5 e CSS3.
  4. 4. prof. Gustavo Zimmermann | contato@gust4vo.com Avaliando o nível de suporte do HTML5 e CSS3 CSS3 - Start CSS3: Suporte Existem na web alguns bons site e algumas boas ferramentas para nos mostrar o nível atual de suporte dos navegadores com relação as novas versões das linguagens. HTML5 & CSS3 READINESS: http://html5readiness.com/ HTML5 TEST: http://html5test.com/ Can I use: http://caniuse.com/
  5. 5. prof. Gustavo Zimmermann | contato@gust4vo.com pseudo-classes •Dinâmicos •Estruturais
  6. 6. prof. Gustavo Zimmermann | contato@gust4vo.com Pseudo-Classes Dinâmicas CSS3 - Start pseudo-classes As pseudo-classes dinâmicas controlam os estados dos elementos. Alguns deles são: •:hover – quando passamos o mouse em cima do elemento. •:active – quando ativamos o elemento. •:visited – quando o link é visitado. •:focus – quando um elemento recebe foco. *Teoricamente, todos os elementos tem estes 4 estados.
  7. 7. prof. Gustavo Zimmermann | contato@gust4vo.com Pseudo-Classes Estruturais CSS3 - Start pseudo-classes As pseudo-classes estruturais servem para selecionarmos um elemento da estrutura do código. Existem várias, por exemplo: •:first-child – seleciona o primeiro filho de um outro elemento. •:last-child – seleciona o último filho de um elemento. •:lang() – seleciona elementos que tem o atributo lang com um valor específico. •Lista Pseudo-Classes: http://www.w3.org/wiki/CSS/Selectors#Dynamic_pseudo-classes
  8. 8. prof. Gustavo Zimmermann | contato@gust4vo.com pseudo-elementos
  9. 9. prof. Gustavo Zimmermann | contato@gust4vo.com after CSS3 - Start pseudo-elementos Altera o último filho virtual do elemento selecionado. Tipicamente usado para adicionar conteúdo no fim de um elemento. .texto-emocionante::after { conteúdo : "« agora isso * é * emocionante!" ; cor : verde ; } .texto-chato::after { conteúdo : "« CHATO!" ; cor : vermelho ; }
  10. 10. prof. Gustavo Zimmermann | contato@gust4vo.com before CSS3 - Start pseudo-elementos Altera o primeiro filho virtual do elemento selecionado. Tipicamente usado para adicionar conteúdo no início de um elemento. p::before { content: "«"; color: blue; } p::after { content: "»"; color: red; }
  11. 11. prof. Gustavo Zimmermann | contato@gust4vo.com first-letter CSS3 - Start pseudo-elementos O pseudo-elemento first-letter é usado para obter um efeito especial na primeira letra de um texto. p { font-size: 12px; } p::first-letter { font-size: 300%; }
  12. 12. prof. Gustavo Zimmermann | contato@gust4vo.com first-line CSS3 - Start pseudo-elementos O pseudo-elemento first-letter é usado para obter um efeito especial na primeira letra de um texto. p { font-size: 12px; } p::first-line { color: #0000FF; font-variant: small-caps; } •Lista Pseudo-Elementos: http://www.w3.org/wiki/CSS/Selectors#Pseudo-elements
  13. 13. prof. Gustavo Zimmermann | contato@gust4vo.com Seletores Complexos
  14. 14. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3 - Start Seletores Complexos Os seletores complexos foram feitos para suprir necessidades muito específicas do layout. Por exemplo: Imagine uma página de cadastro, essa página há um formulário enorme, com campos de todos os tipos: radio, checkbox, text, submit etc… <form action=""> <fieldset> <label>Nome: <input type="text" class="input-text" /></label> <label> <input type="checkbox" class="input-checkbox" /> Desejo receber newsletters </label> </fieldset> </form>
  15. 15. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3 - Start Seletores Complexos SELETOR DESCRIÇÃO input[type=“text”] Seleciona o elemento INPUT com o atributo TYPE cujo valor seja exatamente o valor TEXT. input:checked Um radio button ou um checkbox que esteja marcado. a[title] Seleciona o elemento a que contenha o atributo title não importando o valor. a[href$=html] Seleciona elementos com atributos cujo seu valor termine com .html. Por exemplo, você poderia querer selecionar todos os links que apontam para um arquivo .pdf, ou .php etc.
  16. 16. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3 - Start Seletores Complexos SELETOR DESCRIÇÃO a[title*="artigo"] Seleciona os elementos a cujo o valor tenha pelo menos uma ocorrência com a palavra “artigo”. a[title~=“estudo"] Seleciona os elementos cujo o atributo tenha um valor que seja separado por espaços. No exemplo acima ele seleciona um link que contenha o atributo title e que em seu valor tenha a palavra “estudo” no meio. a[hreflang|="pt"] Seleciona o elemento a cujo o valor do atributo hreflang comece com PT. Ou seja valores como “pt-br” serão encontrados.
  17. 17. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3 - Start Seletores Complexos SELETOR DESCRIÇÃO a[href^="http://url.com/"] Seleciona elementos com o atributos que comecem com um valor. Você pode querer selecionar apenas os links que apontem para um site específico, por exemplo. a[href="http://url.com/"] Seleciona o elemento a cujo o valor do atributo href seja exatamente http://url.com/. •Lista de Seletores Complexos: http://www.w3.org/TR/css3-selectors/#selectors
  18. 18. prof. Gustavo Zimmermann | contato@gust4vo.com CSS Vendor Prefixes
  19. 19. prof. Gustavo Zimmermann | contato@gust4vo.com A utilização de CSS Vendor Prefixes é uma maneira dos fabricantes de browsers adicionarem suporte para novos recursos CSS3 por uma espécie de período de teste experimental, ou seja, esse é um método para adicionar novos recursos que podem ou não fazer parte de uma especificação formal e sim de formulação “beta”. Na maioria dos casos, para usar uma propriedade mais avançada de estilo CSS, você toma a propriedade CSS padrão e adiciona o prefixo para cada browser, focando sempre na técnica de cross-browser que tem como objetivo fazer o resultado da codificação ser visualizada, da mesma forma, independente do navegador que o usuário estiver utilizando. •Tabela de CSS Vendor Prefized: http://peter.sh/experiments/vendor-prefixed-css-property-overview/ CSS3 - Start CSS Vendor Prefixes
  20. 20. prof. Gustavo Zimmermann | contato@gust4vo.com WebKit -webkit- Gecko -moz- Opera -o- Microsoft -ms- CSS3 - Start CSS Vendor Prefixes Prefixos e Navegadores
  21. 21. prof. Gustavo Zimmermann | contato@gust4vo.com Gradientes
  22. 22. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3 - Start Gradientes PROPRIEDADE linear-gradient 10.0 26.0 10.0 -webkit- 16.0 3.6 -moz- 6.1 5.1 - webkit- 12.1 11.1 -o- radial-gradient 10.0 26.0 10.0 -webkit- 16.0 3.6 -moz- 6.1 5.1 - webkit- 12.1 11.1 -o- repeating-linear-gradient 10.0 26.0 10.0 -webkit- 16.0 3.6 -moz- 6.1 5.1 - webkit- 12.1 11.1 -o- repeating-radial-gradient 10.0 26.0 10.0 -webkit- 16.0 3.6 -moz- 6.1 5.1 - webkit- 12.1 11.1 -o- CSS3 Gradients permitem exibir transições suaves entre duas ou mais cores especificadas. Antes, você tinha que usar imagens para estes efeitos, no entando, usando gradientes em CSS3 você pode reduzir o tempo de download e uso de banda.
  23. 23. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3 - Start Gradientes Para definir um gradiente linear precisa ser definido pelo menos duas cores. Você pode definir “stops” para deixar a transição mais suave, pontos de partidas e ângulos também podem ser utilizados. background: tipo-gradient (direção, color-stop1, color-stop2, ...); SINTAXE:
  24. 24. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3 - Start Gradientes linear-gradient: TOPO para BASE #gradiente{ background: -webkit-linear-gradient(red, blue); background: -o-linear-gradient(red, blue); background: -moz-linear-gradient(red, blue); background: linear-gradient(red, blue); }
  25. 25. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3 - Start Gradientes linear-gradient: ESQUERDA para DIREITA #gradiente{ background: -webkit-linear-gradient(left, red, blue); background: -o-linear-gradient(right, red, blue); background: -moz-linear-gradient(right, red, blue); background: linear-gradient(right, red, blue); }
  26. 26. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3 - Start Gradientes linear-gradient: Diagonal #gradiente{ background: -webkit-linear-gradient(left top, red, blue); background: -o-linear-gradient(bottom right, red, blue); background: -moz-linear-gradient(bottom right, red, blue); background: linear-gradient(bottom right, red, blue); }
  27. 27. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3 - Start Gradientes linear-gradient: Ângulo #gradiente{ background: -webkit-linear-gradient(180deg, red, blue); background: -o-linear-gradient(180deg, red, blue); background: -moz-linear-gradient(180deg, red, blue); background: linear-gradient(180deg, red, blue); }
  28. 28. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3 - Start Gradientes linear-gradient: Multiplas Cores #gradiente{ background: -webkit-linear-gradient(red, green, blue , ...); background: -o-linear-gradient(red, green, blue, ...); background: -moz-linear-gradient(red, green, blue , ...); background: linear-gradient(red, green, blue , ...); }
  29. 29. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3 - Start Gradientes linear-gradient: Transparência #gradiente{ background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); background: -o-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); background: -moz-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); background: linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); }
  30. 30. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3 - Start Gradientes “Stops” ou definindo o tamanho do seu gradiente O padrão é que o gradiente ocupe 100% do elemento, mas muitas vezes queremos fazer apenas um detalhe. Nesse caso nós temos que definir um STOP, para que o browser saiba onde uma cor deve terminar para começar a outra. Perceba o 20% ao lado da cor vermelha. O browser calcula quanto é 20% da altura (ou largura dependendo do caso) do elemento, e começa o gradiente da cor exatamente ali. background: -webkit-linear-gradient(green, red 20%); background: -o-linear-gradient(green, red 20%); background: -moz-linear-gradient(green, red 20%); background: linear-gradient(green, red 20%);
  31. 31. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3 - Start Gradientes radial-gradient #gradiente{ background: -webkit-radial-gradient(red, green, blue.); background: -o-radial-gradient(red, green, blue.); background: -moz-radial-gradient(red, green, blue.); background: radial-gradient(red, green, blue.); } *Gradientes Radial não possuem ângulos, logo se você utilizar o gradiente não ocorrerá.
  32. 32. prof. Gustavo Zimmermann | contato@gust4vo.com CSS3 - Start Gradientes CSS3 Gradient: Links •W3School: http://www.w3schools.com/css/css3_gradients.asp/ •Tableless: http://tableless.com.br/como-usar-gradient-no-css-de-forma-consciente/ •Editor de Gradiente (online): http://www.colorzilla.com/gradient-editor/
  33. 33. prof. Gustavo Zimmermann | contato@gust4vo.com <fim />
  34. 34. prof. Gustavo Zimmermann | contato@gust4vo.com Referências Bibliográficas CSS3 - Start Referências AGNI, Eduardo. HTML5 & CSS3: suporte dos navegadores e técnicas de compatibilidade. Disponível em <http://www.uxdesign.blog.br/padroes- web/css3/html5-css3-suporte-dos-navegadores-e-tecnicas-de-compatibilidade/>. Acessado em 14 de AGO de 2014. KYRNIN, Jennifer. CSS Vendor Prefixes. Disponível em http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm. Acessado em 5 de SET de 2014. MDN. Pseudo-classes. Disponível em <https://developer.mozilla.org/en- US/docs/Web/CSS/Pseudo-classes>. Acessado em 13 de AGO de 2014.

×