CSS3: CSS3 (aula 2)

Aula 2:

prof. Gustavo Zimmermann | contato@gust4vo.com

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

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.

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/

prof. Gustavo Zimmermann | contato@gust4vo.com

pseudo-classes • Dinâmicos • Estruturais

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.

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

prof. Gustavo Zimmermann | contato@gust4vo.com

pseudo-elementos

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 ;

}

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;

}

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

}

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

prof. Gustavo Zimmermann | contato@gust4vo.com

Seletores Complexos

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>

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.

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.

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

prof. Gustavo Zimmermann | contato@gust4vo.com

CSS Vendor Prefixes

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

prof. Gustavo Zimmermann | contato@gust4vo.com

WebKit -webkit-

Gecko -moz-

Opera -o-

Microsoft -ms-

CSS3 - Start

CSS Vendor Prefixes

Prefixos e Navegadores

prof. Gustavo Zimmermann | contato@gust4vo.com

Gradientes

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.

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:

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

}

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

}

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

}

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

}

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

}

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

}

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

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

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/

prof. Gustavo Zimmermann | contato@gust4vo.com

<fim />

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.