AULA 03 – CSS - IMAGENS

Profª Daiani Melo

Tamanho da imagem no CSS
• Usamos as propriedades width para a largura e height para a
altura.
Imagem com bordas arredondadas
• Usamos a propriedade border-radius
Imagem circular
• Usamos a propriedade border-radius:50%;
Adicionar borda a imagem
• Neste caso, usamos a propriedade border, para especificar a espessura,
estilo da linha e cor da borda.
• A propriedade padding permitiu um distanciamento da imagem para a borda.
• Usamos o background-color para preencher a distância.
Transparência em imagens
• A propriedade opacity pode assumir um valor de 0.0 a 1.0.
Quanto menor o valor, mais transparente:
Todas as imagens de mesmo tamanho
• Ao usar a altura
automática, a imagem
irá ser reduzida de
forma proporcional.
• A propriedade max-
width: 100%;, irá
fazer com que em
telas menores, a
imagem seja reduzida
automaticamente,
para ocupar o espaço
de tela.
Centralizar as imagens
• Quando as imagens não
estão contidas em
parágrafos, usamos uma
combinação de 2
propriedades para
centralizar: display:
block; margin: auto;
Criando classes
• Quando desejamos aplicar características diferentes às
imagens, devemos criar uma classe.
• Assim, somente a imagem que usar esta classe irá receber o
efeito.
• Você que define um nome para classe.
• No CSS ao “chamar” uma classe, devemos usar o ponto antes do
nome da classe.
Classe imagem circular
• Criamos uma classe
como nome de
circular. Apenas a
primeira imagem que
está usando esta
classe. Assim, as
demais imagens não
ficarão circular.
Classe imagem circular
• Criamos uma classe
como nome de
circular. Apenas a
primeira imagem que
está usando esta
classe. Assim, as
demais imagens não
ficarão circular.
Classe com bordas arredondadas
• Criamos uma classe
como nome de bordas.
Usamos a classe na
segunda e terceira
imagens.
Classe com bordas arredondadas
• Criamos uma classe
como nome de bordas.
Usamos a classe na
segunda e terceira
imagens.
Atividade
• Realize os exemplos apresentados nos slides.