Imagens com CSS

Introdução

No desenvolvimento web, a manipulação de imagens utilizando CSS pode trazer efeitos visuais impressionantes sem a necessidade de editar a imagem original. Este artigo aborda cinco propriedades CSS fundamentais para manipulação de imagens: `background-blend-mode`, `clip-path`, `filter`, `mask` e `object-fit`.

Misturando Camadas (`background-blend-mode`)

A propriedade `background-blend-mode` define como as imagens de fundo e as cores de fundo se misturam entre si, permitindo criar efeitos visuais interessantes. 

Exemplo de valores para `background-blend-mode`:

- `normal`: valor padrão.

- `multiply`: cores multiplicadas, resultando em uma cor mais escura.

- `screen`: cores invertidas, multiplicadas e novamente invertidas, resultando em uma cor mais clara.

- `overlay`: combina `multiply` e `screen`, escurecendo ou clareando as cores.

- `darken`: mostra a cor mais escura entre as camadas.

- `lighten`: mostra a cor mais clara entre as camadas.

- `color-dodge`: aumenta o brilho da cor de fundo para refletir a cor da camada superior.

- `color-burn`: escurece a cor de fundo para refletir a cor da camada superior.

Recorte de Imagem (`clip-path`)

A propriedade `clip-path` permite recortar uma área específica de um elemento, como uma imagem, exibindo apenas a parte dentro da área definida. Isso é útil para criar formas complexas e efeitos visuais interessantes.

Exemplo de valores para `clip-path`:

- `polygon()`: define uma forma com base em uma lista de pontos (coordenadas).

- `circle()`: define uma área circular.

- `ellipse()`: define uma área elíptica.

- `inset()`: define uma área retangular com a possibilidade de arredondar os cantos.

- `path()`: define uma forma utilizando comandos de caminho SVG.

- `url()`: refere-se a uma forma predefinida em um arquivo SVG externo.

Aplicando Filtros (`filter`)

A propriedade `filter` permite aplicar efeitos gráficos, como desfoque, brilho, contraste, e mais, em elementos.

Exemplo de valores para `filter`:

- `blur()`: aplica um desfoque gaussiano.

- `brightness()`: ajusta o brilho da imagem.

- `contrast()`: ajusta o contraste da imagem.

- `drop-shadow()`: aplica uma sombra projetada ao redor do elemento.

- `grayscale()`: converte a imagem para tons de cinza.

- `hue-rotate()`: ajusta o matiz da imagem.

- `invert()`: inverte as cores da imagem.

- `opacity()`: ajusta a opacidade da imagem.

- `saturate()`: ajusta a saturação da imagem.

- `sepia()`: converte a imagem para tons sépia.

- `url()`: aplica um filtro gráfico de um recurso externo.

Aplicando Máscaras (`mask`)

A propriedade `mask` permite controlar a visibilidade de uma imagem ou de partes de um elemento usando uma máscara.

Exemplo de valores para `mask`:

- `mask-image`: define a imagem usada como máscara.

- `mask-mode`: define o modo da máscara (alpha ou luminância).

- `mask-repeat`: define como a imagem da máscara é repetida.

- `mask-position`: define a posição da imagem da máscara.

- `mask-clip`: define a área onde a máscara é aplicada.

- `mask-origin`: define a origem da área da máscara.

- `mask-size`: define o tamanho da imagem da máscara.

- `mask-composite`: define o modo de composição da máscara.

Ajuste de Conteúdo (`object-fit`)

A propriedade `object-fit` define como o conteúdo de um elemento substituído, como uma imagem ou um vídeo, deve se ajustar às suas dimensões do contêiner.

Exemplo de valores para `object-fit`:

- `fill`: o conteúdo preenche todo o contêiner, podendo distorcer se as proporções forem diferentes.

- `contain`: o conteúdo é redimensionado para caber dentro do contêiner, mantendo suas proporções.

- `cover`: o conteúdo é redimensionado para cobrir completamente o contêiner, mantendo suas proporções.

- `none`: o conteúdo mantém seu tamanho original.

- `scale-down`: comporta-se como `none` ou `contain`, o que quer que faça o conteúdo menor.

Agradecimento

Obrigada por ler até aqui! Comentários são bem vindos, ainda mais se contribuirem para o enriquecimento do conteúdo :D

Esse artigo foi gerado por IA e diagramado por um humano com base no e-book de mesmo título que você pode ver no meu Github https://github.com/GabrieliMendesNicolodi/create-ebook-with-ai.

Sinta-se a vontade para fazer fork do projeto e utilizar as dicas para gerar seu próprio e-book!

Meu linkedIn https://www.linkedin.com/in/gabiprogramadoraweb/