CSS: Filtros (opacity, brightness, contrast e blur)

CSS: Filtros (opacity, brightness, contrast e blur)

  15 de setembro de 2020    henrique

---

No post de hoje irei mostrar alguns filtros bem interessantes do CSS. Principalmente utilizados em imagens.

Primeiro um dos filtros mais usados é o opecity, ele controla a opacidade do objeto, ele é muito utilizado para fotos, principalmente para fotos de fundo onde um texto ficará na sua frente dando assim uma melhor leitura. Para utilizá-lo é bem simples, apenas coloque a porcentagem de opacidade que deseja que o objeto fique.

.filtered {

  filter: opacity(70%);

}

Outro filtro seria o de brilho, bastante utilizado para dar um retoque de claridade a imagem ou para clarear a cor de um objeto de uma forma um pouco diferente do que apenas trocar a cor. No exemplo abaixo irei remover um pouco do brilho, por isso utilizo valores abaixo de 100%

.filtered {

  filter: brightness(50%);

}

Agora se não for o brilho que esteja faltando na imagem, mas sim o contraste o filtro a ser usado é o contrast, também definindo em porcentagem, no caso vou adicionar 40% ao contraste original da foto.

.filtered {

  filter: contrast(140%);

}

Este filtro causa um desfoque na foto, também muito interessante para usar em imagens de fundo com algum texto na frente. Segue um exemplo:

.blured {

  filter: blur(5px);

}