CSS3: CSS3 (aula 2)

  • View
    439

  • Download
    5

Embed Size (px)

DESCRIPTION

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

Text of CSS3: CSS3 (aula 2)

  • 1. Aula 2:

2. prof. Gustavo Zimmermann | contato@gust4vo.comCSS3: Suportesuporte dos navegadores e tcnicas de compatibilidade 3. prof. Gustavo Zimmermann | contato@gust4vo.comMotores de RenderizaoCSS3 - StartCSS3: SuporteO suporte as linguagens no feito exatamente pelo navegador, e sim pelo motor de renderizao que ele utiliza.MOTORBROWSERWebkitGeckoTridentPresto*Atualmente, o Webkit o motor de renderizao que tem maior compatibilidade com o HTML5 e CSS3. 4. prof. Gustavo Zimmermann | contato@gust4vo.comAvaliando o nvel de suporte do HTML5 e CSS3CSS3 - StartCSS3: SuporteExistem na web alguns bons site e algumas boas ferramentas para nos mostrar o nvel atual de suporte dos navegadores com relao as novas verses das linguagens.HTML5 & CSS3 READINESS: http://html5readiness.com/HTML5 TEST: http://html5test.com/Can I use: http://caniuse.com/ 5. prof. Gustavo Zimmermann | contato@gust4vo.compseudo-classesDinmicosEstruturais 6. prof. Gustavo Zimmermann | contato@gust4vo.comPseudo-Classes DinmicasCSS3 - Startpseudo-classesAs pseudo-classes dinmicas controlam os estados dos elementos. Alguns deles so::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. prof. Gustavo Zimmermann | contato@gust4vo.comPseudo-Classes EstruturaisCSS3 - Startpseudo-classesAs pseudo-classes estruturais servem para selecionarmos um elemento da estrutura do cdigo. Existem vrias, 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 especfico.Lista Pseudo-Classes: http://www.w3.org/wiki/CSS/Selectors#Dynamic_pseudo-classes 8. prof. Gustavo Zimmermann | contato@gust4vo.compseudo-elementos 9. prof. Gustavo Zimmermann | contato@gust4vo.comafterCSS3 - Start pseudo-elementosAltera o ltimo filho virtual do elemento selecionado. Tipicamente usado para adicionar contedo no fim de um elemento..texto-emocionante::after {contedo : " agora isso * * emocionante!" ;cor : verde ;}.texto-chato::after {contedo : " CHATO!" ;cor : vermelho ;} 10. prof. Gustavo Zimmermann | contato@gust4vo.combeforeCSS3 - Start pseudo-elementosAltera o primeiro filho virtual do elemento selecionado. Tipicamente usado para adicionar contedo no incio de um elemento.p::before {content: "";color: blue;}p::after {content: "";color: red;} 11. prof. Gustavo Zimmermann | contato@gust4vo.comfirst-letterCSS3 - Startpseudo-elementosO 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. prof. Gustavo Zimmermann | contato@gust4vo.comfirst-lineCSS3 - Startpseudo-elementosO 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. prof. Gustavo Zimmermann | contato@gust4vo.comSeletores Complexos 14. prof. Gustavo Zimmermann | contato@gust4vo.comCSS3 - StartSeletores ComplexosOs seletores complexos foram feitos para suprir necessidades muito especficas do layout. Por exemplo: Imagine uma pgina de cadastro, essa pgina h um formulrio enorme, com campos de todos os tipos: radio, checkbox, text, submit etcNome: Desejo receber newsletters 15. prof. Gustavo Zimmermann | contato@gust4vo.comCSS3 - StartSeletores ComplexosSELETORDESCRIOinput[type=text]Seleciona o elemento INPUT com o atributo TYPE cujo valor seja exatamente o valor TEXT.input:checkedUm radio button ou um checkbox que esteja marcado.a[title]Seleciona o elemento a que contenha o atributo title no 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. prof. Gustavo Zimmermann | contato@gust4vo.comCSS3 - Start Seletores ComplexosSELETORDESCRIOa[title*="artigo"]Seleciona os elementos a cujo o valor tenha pelo menos uma ocorrncia com a palavra artigo.a[title~=estudo"]Seleciona os elementos cujo o atributo tenha um valor que seja separado por espaos. 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 sero encontrados. 17. prof. Gustavo Zimmermann | contato@gust4vo.comCSS3 - Start Seletores ComplexosSELETORDESCRIOa[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 especfico, 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. prof. Gustavo Zimmermann | contato@gust4vo.comCSSVendor Prefixes 19. prof. Gustavo Zimmermann | contato@gust4vo.comA utilizao de CSS Vendor Prefixes uma maneira dos fabricantes de browsers adicionarem suporte para novos recursos CSS3 por uma espcie de perodo de teste experimental, ou seja, esse um mtodo para adicionar novos recursos que podem ou no fazer parte de uma especificao formal e sim de formulao beta. Na maioria dos casos, para usar uma propriedade mais avanada de estilo CSS, voc toma a propriedade CSS padro e adiciona o prefixo para cada browser, focando sempre na tcnica de cross-browser que tem como objetivo fazer o resultado da codificao ser visualizada, da mesma forma, independente do navegador que o usurio estiver utilizando.Tabela de CSS Vendor Prefized: http://peter.sh/experiments/vendor-prefixed-css-property-overview/CSS3 - StartCSS Vendor Prefixes 20. prof. Gustavo Zimmermann | contato@gust4vo.comWebKit -webkit-Gecko -moz-Opera -o-Microsoft -ms-CSS3 - Start CSS Vendor PrefixesPrefixos e Navegadores 21. prof. Gustavo Zimmermann | contato@gust4vo.comGradientes 22. prof. Gustavo Zimmermann | contato@gust4vo.comCSS3 - StartGradientesPROPRIEDADElinear-gradient10.026.010.0 -webkit-16.03.6 -moz-6.15.1 - webkit-12.111.1 -o-radial-gradient10.026.010.0 -webkit-16.03.6 -moz-6.15.1 - webkit-12.111.1 -o-repeating-linear-gradient10.026.010.0 -webkit-16.03.6 -moz-6.15.1 - webkit-12.111.1 -o-repeating-radial-gradient10.026.010.0 -webkit-16.03.6 -moz-6.15.1 - webkit-12.111.1 -o-CSS3 Gradients permitem exibir transies 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. prof. Gustavo Zimmermann | contato@gust4vo.comCSS3 - StartGradientesPara definir um gradiente linear precisa ser definido pelo menos duas cores. Voc pode definir stops para deixar a transio mais suave, pontos de partidas e ngulos tambm podem ser utilizados.background: tipo-gradient (direo, color-stop1, color-stop2, ...);SINTAXE: 24. prof. Gustavo Zimmermann | contato@gust4vo.comCSS3 - Start Gradienteslinear-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. prof. Gustavo Zimmermann | contato@gust4vo.comCSS3 - StartGradienteslinear-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. prof. Gustavo Zimmermann | contato@gust4vo.comCSS3 - Start Gradienteslinear-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. prof. Gustavo Zimmermann | contato@gust4vo.comCSS3 - Start Gradienteslinear-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. prof. Gustavo Zimmermann | contato@gust4vo.comCSS3 - Start Gradienteslinear-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. prof. Gustavo Zimmermann | contato@gust4vo.comCSS3 - StartGradienteslinear-gradient: Transparncia#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. prof. Gustavo Zimmermann | contato@gust4vo.comCSS3 - StartGradientesStops ou definindo o tamanho do seu gradienteO padro que o gradiente ocupe 100% do elemento, mas muitas vezes queremos fazer apenas um detalhe. Nesse caso ns temos que definir um STOP, para que o browser saiba onde uma cor deve terminar para comear 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 comea 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. prof. Gus