Imagem com filtro usando CSS.

Filtro para imagem.

O estilo da pagina tem o poder de encantar o usuário e as imagens de baixa qualidade ou com edição ruim pode prejudicar.

Em alguns casos se torna necessário editar uma imagem para colocar algum efeito que vai melhorar ou dar mais evidencia, e para isso é costume editar a imagem em algum programa de edição de foto, mas se essa edição for algo simples podemos de modo fácil e rápido colocar filtros usando o CSS.

Primeiro coloque uma imagem e uma class para o CSS aplicar o estilo de filtro.

<img src="imagem.jpg" class="estilo-imagem" alt="" width="300px">

.estilo-imagem{

/*filtro*/

}

Exemplos.

Tipos de filtros.

Filtro blur(px), aplica um desfoque sendo 0px como normal ou padrão e qualquer valor superior o tanto de desfoque, sendo recomendado usar até 10px.

filter:blur(5px);

Filtro brightness(%), aplica brilho na imagem sendo 100% como padrão sem efeito, qualquer valor acima de 100 vai clarear a imagem e abaixo de 100 vai escurecer.

filter:brightness(200%);

Filtro contrast(%), semelhante ao efeito de brilho como padrão 100%, qualquer valor acima de 100 aumenta o contraste, e qualquer abaixo de 100 reduz o contraste tornado a imagem um tanto acinzentada.

filter:contrast(200%);

Filtro grayscale(%), serve para passa efeito cinza, sendo 100% como preto e branco e qualquer valor abaixo será a intensidade acrescentada do cinza e 0% como normal sem efeito.

filter:grayscale(100%);

Filtro invert(%), faz a inversão das cores sendo 100% como totalmente invertido, e 0% normal.

filter:invert(100%);

Filtro opacity(%), para aplicar a transparência, sendo 0% totalmente transparente e 100% sem transparência.

filter:opacity(30%);

Filtro saturate(%), valor padrão é 100% e qualquer abaixo vai tornando a imagem mais acinzentada e qualquer valor acima de 100% vai tornar supersaturada.  

filter:saturate(180%);

Filtro sepia(%), faz a imagem ficar com aspecto envelhecido, sendo 0% como normal e 100% com total efeito sapeia.

filter:sepia(100%);

Filtro hue-rotate(deg), troca as cores sendo 0deg como normal sem efeito e qualquer valor acima uma nova tonalidade.

filter:hue-rotate(90deg);

Filtro drop-shadow(), cria efeito de sombra usando 4 parâmetros, primeiro é a posição horizontal, segundo vertical, terceiro desfoque e o quanto é a cor

filter:drop-shadow(10px 20px 7px #FFEB3B);

Podemos aplicar individualmente como nos exemplos anteriores ou vários efeitos colocando mais um paramento depois do filter.

filter:drop-shadow(10px 20px 7px #000) contrast(200%);

.estilo-imagem{
filter:drop-shadow(10px 20px 7px #000) contrast(200%);
}