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