Você que é desenvolvedor ou desenvolvedora de sites e sistemas, já se deparou com algum momento que a imagem que você usaria em sua aplicação não estava nos padrões desejados e, teve que recorrer a ferramentas de design como Photoshop, Ilustrator, dentre outras?
Pois bem, no CSS3, há um recurso de uma função que nos permite alterar a imagem, de forma que a mesma fique com efeitos similares das ferramentas acima: a função filter.
Nesta função, há algumas propriedades em específico para a mesma ser utilizada:
– BLUR — define se a imagem terá a presença de borrões ou não;
– BRIGHTNESS — define o grau de brilho da imagem;
– CONTRAST — Define o grau de contraste na imagem;
– GRAYSCALE — Define o grau de escala de cinza que será utilizada na imagem;
– INVERT — inverte as cores da imagem, conforme valores desejados;
– OPACITY — Define o grau de opacidade na imagem;
– SATURATE — Define o grau de saturação da imagem;
– SEPIA — Define o grau de foto envelhecida, que a imagem terá.
Os valores a serem utilizados nesses filtros podem variar de acordo com as medidas, podendo ser utilizadas:
– porcentagem (%);
– pixels (px);
– valores decimais;
– valor em deg (ângulos);
– valores inteiros.
EXEMPLO PRÁTICO
Abrindo o arquivo index.html em seu navegador de sua preferência, observa-se que as tonalidades das fotos mudaram:
Cada propriedade do arquivo style.css representada na foto 2, foi aplicada na div que correspondia a sua imagem, com seu respectivo filtro. Na foto com blur, ficou um pouco mais embaçada, devido ao efeito aplicado. Com grayscale, a mesma ficou mais escura e, com sepia, a foto ficou mais envelhecida, de acordo com as medidas aplicadas na imagem.
Destarte, a função filter é uma opção muito prática do CSS3 e, ela é muito utilizada, para fins de melhorar as imagens em sua aplicação, podendo variar de acordo com a unidade utilizada no CSS. E, existem vários outros filtros que podem te auxiliar a estilizar sua imagem, sem utilizar nenhuma ferramenta de design gráfico.
