Formatação de imagens
Imagens Arredondadas
A propriedade “border-radius” pode ser utilizada para criar imagens arredondadas
●img {border-radius: 50%;}
Imagens Responsivas
Ao definir as propriedades “Width” e “Height” como “auto”, a imagem se ajusta ao tamanho da tela. Há também como definir esta propriedade como uma porcentagem da página.
●“Width:auto”;
●“Height:auto”;
Imagens Trasnparentes
Para alterar a opacidade de uma imagem, usa-se a propriedade “opacity”.
●opacity: 0.5;
Imagem Invertida
Para inverter uma imagem, utilizamos a propriedade “transform”com o valor “scaleX(-1)”.
Galeria de Imagens
Galerias de imagem podem ser criadas personalizando caixas que contém imagens.
Imagens em outros itens
Imagens em links
Para usar uma imagem como um link, você pode definir a imagem como plano de fundo do link, usando a sintaxe em css:
●“background-image: url(localdaimagem.png);” ou
●“background: url(localdaimagem.png);”
imagens em listas
Para especificar uma imagem como marcador de item em uma lista:
●list-style-image: url(‘apple.gif’);
Exercícios
Aplique os conhecimentos de imagens abordados na aula para colocar as imagens na página de exercício como apresenta o exemplo.
Arquivos da aula: https://drive.google.com/drive/folders/1nEPs-DCe1yviCjkjDIDzI-sbzJ7VvJYd?usp=sharing
