CSS: Filtros (drop-shadow, grayscale, saturate, sepia e invert)

CSS: Filtros (drop-shadow, grayscale, saturate, sepia e invert)

  22 de setembro de 2020    henrique

---

 

No post de hoje continuaremos falando de mais alguns filtros do CSS, caso não tenha visto o post anterior CSS: Filtros (opacity, brightness, contrast e blur)

Começando com o sepia, como o nome já diz ele vai converter a imagem em sépia, onde 0% significa a imagem original e 100% é sépia por completo, qualquer valor entre isso é uma mistura da original com o tom de sépia.

.filtered {

  filter:sepia(100%);

}

O filtro saturate vai mexer com a saturação da imagem onde eu posso adicionar ou remover a saturação onde 100% é a imagem original, então caso queira aumentar deve ser valores maiores que isso (200% por exemplo) e para diminuir pode colocar entre 0 e 99%.

.filtered {

  filter:saturate(80%);

}

Converte a imagem em escala de cinza quanto maior a porcentagem mais evidente fica a escala de cinza.

.filtered {

  filter:grayscale(100%);

}

Esse filtro cria uma sombra no objeto, nesse exemplo vou colocar uma sombra um pouco abaixo, para a direita com um leve desfoque e na cor cinza. A ordem dos parâmetros é a seguinte, sombra horizontal, sombra vertical, desfoque e cor.

.filtered {

  filter:drop-shadow(8px 8px 10px gray);

}

Esse filtro inverte as cores da imagem, semelhante ao que tínhamos nos negativos de fotos. O valor de 0% é da imagem original e 100% é a imagem totalmente invertida.

.filtered {

  filter:invert(100%);

}