5
Bordas Arredondadas e Sombreamento com CSS-3 CSS - Style Sheet Professor: Jolvani Aula 34

Aula 34. bordas arredondadas e sombreamento

Embed Size (px)

Citation preview

Page 1: Aula 34. bordas arredondadas e sombreamento

Bordas Arredondadas e Sombreamento com

CSS-3CSS - Style Sheet

Professor: Jolvani

Aula 34

Page 2: Aula 34. bordas arredondadas e sombreamento

Bordas Arredondadas e Sombreamento CSS3

O CSS usado até agora abrangem a versão 1 e 2, já existe a versão 3 mas não é suportada por todos os browsers, somente alguns recursos.

Criamos mais uma aula com uma página que contem uma div com id container e queremos transforma-la num bloco.

Page 3: Aula 34. bordas arredondadas e sombreamento

Bordas Arredondadas e Sombreamento CSS3

Criando nossa folha de estilo. “bordas.css”

Até agora nenhuma novidade. Agora utilizando o recurso de arredondamento.

Page 4: Aula 34. bordas arredondadas e sombreamento

Bordas Arredondadas e Sombreamento CSS3

Quanto maior for o numero para border-radius:30px maior será o arredondamento.

Adicionando o efeito sombra com box-shadow, podendo definir a propriedade da sombra e sua cor mesmo que os editores de imagem usam.

Abaixo nós vemos o formato da sombra suportado pelo Firefox 3.0 Aquele usado acima é suportado pela versão 8.0 em diante.

Page 5: Aula 34. bordas arredondadas e sombreamento

Próxima Aula: Última Aula – Validação na W3C por sua conta.