CSS3

Professor Gustavo Linhares

IFNMG Campus Januria Maio/2014

Alguns dos mdulos CSS3 mais

importantes so os seguintes:

Seletores

Box Model(Modelo de Caixa)

Fundos e Bordas

Valores de imagem e Substituindo contedo

Efeitos de Texto

Transformaes 2D/3D

Animao

layouts com colunas

Interface com o Usurio

Recomendao CSS3

A especificao CSS3 ainda est em desenvolvimento pelo W3C.

No entanto, muitas das novas propriedades CSS3 foram implementadas

em navegadores modernos.

CSS3 Borders

Com CSS3, voc pode criar bordas arredondadas, adicionar sombra para
caixas e usar uma imagem como uma borda - sem usar um programa de
desenho, como o Photoshop.

Neste Slider, voc vai aprender sobre as seguintes propriedades de

fronteira:

border-radius

box-shadow

border-image

Compatibilidade de navegador

Os nmeros na tabela especifica a primeira verso do navegador que

suporta totalmente a propriedade.

Nmeros seguidos de -webkit- ou -moz- especifica a primeira verso

que trabalhou com um prefixo.

O CSS3 propriedade borderradius( Cantos arredondados)

Adicionando cantos arredondados em CSS2 era complicado. Tnhamos

que usar imagens diferentes para cada

Em CSS3, criando cantos arredondados fcil.

Em CSS3, a propriedade border-radius usado para criar cantos

arredondados.

Exemplo

Adicionar cantos arredondados a um elemento

div
{
border:2px solid;
border-radius:25px;
}
Tente voc mesmo!

O CSS3 propriedade box-shadow

Em CSS3, a propriedade box-shadow usado para adicionar sombra de

caixas:

Exemplo

Adicione uma caixa-sombra a um elemento div:

div
{
box-shadow: 10px 10px 5px #888888;
}
Tente voc mesmo!

O CSS3 border-imagem Property

Com o CSS3 propriedade border-imagem que voc pode usar uma

imagem para criar uma borda:

Exemplo

Use uma imagem para criar uma borda em torno de um elemento div:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera 10.5-12.1 */
border-image:url(border.png) 30 30 round;
}
Tente voc mesmo!

Propriedades Border CSS3

Propriedade

Descrio

Border-image

Um atalho para definir todas as propriedades-image-* de fronteira

Border-radius

Um atalho para definir todas as quatro propriedades border-*-raio

Box-shadow

Anexa um ou mais gota sombras para a caixa

CSS3 Background

CSS3 contm vrias novas propriedades de fundo, o que permite maior

controle do elemento de fundo.

Neste Slide, voc vai aprender sobre as seguintes propriedades do

fundo:

background-size

background-origin

Voc tambm vai aprender a usar vrias imagens de fundo.

Compatibilidade de navegador

Os nmeros na tabela especifica a primeira verso do navegador que

suporta totalmente a propriedade.

Nmeros seguidos de -webkit- ou -moz- especifica a primeira verso que

trabalhou com um prefixo.

Propriedade Tamanho de fundo CSS3

A propriedade background-size especifica o tamanho da imagem de

fundo.

Antes CSS3, o tamanho da imagem de fundo foi determinada pelo

tamanho real da imagem. Em CSS3 possvel especificar o tamanho da
imagem de fundo, o que nos permite voltar a usar imagens de fundo em
diferentes contextos.

Voc pode especificar o tamanho em pixels ou em porcentagem. Se

voc especificar o tamanho como uma porcentagem, o tamanho
relativo largura e altura do elemento pai.

Exemplo 1

Redimensionar uma imagem de fundo:

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
Tente voc mesmo!

Exemplo 2

Estique a imagem de fundo para preencher completamente a rea de

contedo:

div
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
Tente voc mesmo!

Propriedade origem do fundo CSS3

A propriedade background-origin especifica a rea de posicionamento

das imagens de fundo.

A imagem de fundo pode ser colocado dentro de content-box, paddingbox, ou a rea de border-box.

Exemplo

Posicione a imagem de fundo no contedo-box:

div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}
Tente voc mesmo!

CSS3 Mltiplas imagens de fundo

CSS3 permite a utilizao de diversas imagens de fundo para um elemento.

Exemplo
Defina duas imagens de fundo para o elemento body:
body
{
background:url(img_tree.gif),url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
Tente voc mesmo!

Propriedades background CSS3

Propriedade

Descrio

background-clip

Especifica a rea de pintura das imagens de fundo

background-origin

Especifica a rea de posicionamento das imagens de

fundo

background-size

Especifica o tamanho das imagens de fundo

CSS3 Gradients
Gradientes CSS3 permitem exibir transies suaves entre duas ou mais
cores especificadas.

CSS3 Gradients
Antes, voc tinha que usar imagens para estes efeitos. No entanto, usando
gradientes CSS3, voc pode reduzir o tempo de download e uso de banda.
Alm disso, os elementos com gradientes parecer melhor quando
ampliada, porque o gradiente gerado pelo navegador.

CSS3 define dois tipos de gradientes:

Gradientes lineares (vai para cima / baixo / esquerda / direita / diagonal)

Radial gradientes (definido pelo seu centro)

Compatibilidade de navegador

Os nmeros na tabela especifica a primeira verso do navegador que

suporta totalmente a propriedade.

Nmeros seguidos de -webkit- ou -moz- especifica a primeira verso que

trabalhou com um prefixo.

CSS3 lineares gradientes

Para criar um gradiente linear que voc deve definir pelo menos duas
paradas de cor. Paradas de cores so as cores que deseja para tornar
transies suaves entre. Voc tambm pode definir um ponto de partida
e uma direo (ou um ngulo), juntamente com o efeito de gradiente.

Exemplo de gradiente linear:

Sintaxe

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Gradient - Top to Bottom (this is default)

O exemplo a seguir mostra um gradiente linear que comea no topo.

Comea vermelho, a transio para o azul:

Exemplo

A linear gradient from top to bottom:

#grad
{
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
}
Tente voc mesmo!

Linear Gradient - Left to Right

O exemplo a seguir mostra um gradiente linear que comea a partir da esquerda.

Comea vermelho, a transio para o azul:

#grad
{
background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax */
}
Tente voc mesmo!

Linear Gradient - Diagonal

Linear Gradiente - Diagonal

Voc pode fazer um gradiente em diagonal, especificando ambas as

posies iniciais horizontais e verticais.

O exemplo a seguir mostra um gradiente linear que comea no canto

superior esquerdo (e vai para o canto inferior direito). Comea
vermelho, a transio para o azul:

exemplo

Um gradiente linear que comea no canto superior esquerdo (e vai para o canto inferior
direito):

#grad
{
background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
}
Tente voc mesmo!

CSS3 Efeitos de Texto

CSS3 contm vrios novos recursos de texto.

Neste Slider, voc vai aprender sobre as seguintes propriedades do

texto:

text-shadow

word-wrap

Compatibilidade de navegador

Os nmeros na tabela especifica a primeira verso do navegador que

suporta totalmente a propriedade.

CSS3 texto sombra

Em CSS3, a propriedade text-shadow aplica sombra ao texto.

Voc especifica a sombra horizontal, a sombra vertical, a distncia

borro, ea cor da sombra:

Exemplo

Adicionar uma sombra a um cabealho:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}
Tente voc mesmo!

CSS3 Palavra Wrapping

Se uma palavra muito grande para caber dentro de uma rea, ele se
expande do lado de fora:

Em CSS3, a propriedade word-wrap permite forar o texto para

embrulhar - mesmo que isso signifique dividindo-o no meio de uma
palavra:

Exemplo

Permitir palavras longas para ser capaz de quebrar e quebrar para a

prxima linha:

p {word-wrap:break-word;}
Tente voc mesmo!

Propriedades CSS3 Texto

hanging-punctuation

Especifica se um caractere de pontuao pode ser colocado fora da

caixa de linha
Especifica se um caractere de pontuao devem ser aparadas
Descreve como a ltima linha de um bloco ou uma linha antes de
uma quebra de linha forada est alinhado quando text-align
"justificar"
Aplica marcas de nfase, ea cor de primeiro plano das marcas de
nfase, para o texto do elemento
especifica o mtodo de justificao usada quando text-align
"justificar"
Especifica um esboo do texto
Especifica o que deve acontecer quando o texto transborda o
elemento que contm
Adiciona sombra ao texto

Continuamos depois!

Referncia: www.w3schools.com