Download pdf - CSS3: CSS3 (aula 2)

Transcript
Page 1: CSS3: CSS3 (aula 2)

Aula 2:

Page 2: CSS3: CSS3 (aula 2)
Page 3: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

CSS3: Suporte suporte dos navegadores e técnicas de compatibilidade

Page 4: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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.

Page 5: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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/

Page 6: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

pseudo-classes • Dinâmicos • Estruturais

Page 7: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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.

Page 8: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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

Page 9: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

pseudo-elementos

Page 10: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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 ;

}

Page 11: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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;

}

Page 12: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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%;

}

Page 13: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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

Page 14: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

Seletores Complexos

Page 15: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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>

Page 16: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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.

Page 17: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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.

Page 18: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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

Page 19: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

CSS Vendor Prefixes

Page 20: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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

Page 21: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

WebKit -webkit-

Gecko -moz-

Opera -o-

Microsoft -ms-

CSS3 - Start

CSS Vendor Prefixes

Prefixos e Navegadores

Page 22: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

Gradientes

Page 23: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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.

Page 24: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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:

Page 25: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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);

}

Page 26: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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);

}

Page 27: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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);

}

Page 28: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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);

}

Page 29: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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 , ...);

}

Page 30: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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));

}

Page 31: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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%);

Page 32: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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

Page 33: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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/

Page 34: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

<fim />

Page 35: CSS3: CSS3 (aula 2)

prof. Gustavo Zimmermann | [email protected]

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.