Filtros CSS3 para Imagens

Saiba como é possível usar os incríveis filtros CSS3 para efeitos como blur, greyscale, brilho, matiz, saturação e mais. Conheça o poder dos novos filtros CSS3!

O avanço das CSS3 está permitindo que sites evoluam constantemente e permitindo não ser mais necessário contar com scripts externos para criar efeitos verdadeiramente surpreendentes. Alguns desses efeitos, certamente, conseguido com filtros CSS3!

Este artigo é baseado no post CSS3 Filters do Aaron Lumsden. 

 

1. Introdução sobre filtros CSS3

1.1. O que são filtros CSS3

Filtros trazem efeitos para o DOM. Imagine ser capaz de aplicar efeitos de Photoshop, como blur, tons de cinza e brilho aos elementos HTML, tais como formulários, imagens e qualquer outra coisa possível de se criar usando HTML/CSS. Agora você pode fazer tudo isso com os filtros de CSS3!

1.2. Quando é possível usar filtros CSS3

No momento, filtros CSS 3 conseguem ser renderizados corretamente apenas no Chrome – e prestes a ficarem disponíveis no Safari 6. É possível se manter atualizado em relação à disponibilidade dos filtros CSS3 no Can I Use.

Sem mais delongas, vamos a alguns dos poderosos filtros de CSS3.

2. Blur

 

 

O efeito de blur – ou, na boa e velha Língua Portuguesa, embaçado – já é consagradamente usado em montagens e ilustrações para sites em todo o mundo, já que qualquer editor de imagens mais ou menos decente já oferece a possibilidade de usar o blur. O bom da história é que, a partir de agora, é possível usar este efeito diretamente com CSS.

É possível especificar o raio do blur, em pixels, para alcançar o efeito desejado.

img {
-webkit-filter: blur(5px);
   -moz-filter: blur(5px);
    -ms-filter: blur(5px);
     -o-filter: blur(5px);
filter: blur(5px);
}

 

3. Greyscale

Antes do advento dos filtros CSS3, os desenvolvedores web usávamos uma variedade de hacks e técnicas para fazer a transição de uma imagem em preto e branco para ela ficar colorida. Mas, independentemente de existirem dezenas de técnicas para isso, agora basta usar um pouco de CSS.

Usando porcentagem, é possível especificar o quão próximo a tons de cinza a imagem deve ser apresentada.

img {
-webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
     -o-filter: grayscale(100%);
filter: grayscale(100%);
}

 

4. Sepia

Para o caso de ser preciso usar um efeito sépia – tonalidades entre o acinzentado e o amarronzado -, agora também é possível usando, puramente, CSS.

Através da indicação de porcentagem, basta indicar a “quantidade de sépia” que será usada na imagem.

img {
-webkit-filter: sepia(100%);
   -moz-filter: sepia(100%);
    -ms-filter: sepia(100%);
     -o-filter: sepia(100%);
filter: sepia(100%);
}

 

5. Brightness

Muitos são os casos em que aplicar um filtro para uma ou mais imagens ficar(em) mais “brilhantes” é necessário; portanto, a partir de agora, é possível fazer isso com o uso dos filtros de CSS3.

Especificando o quão brilhante algum(ns) seletor(s) será, numericamente, é bastante simples.

img {
-webkit-filter: brightness(0.2);
   -moz-filter: brightness(0.2);
    -ms-filter: brightness(0.2);
     -o-filter: brightness(0.2);
filter: brightness(0.2);
}

 

6. Saturation

O valor da saturação é medido em porcentagem e, neste caso, 100% é o estado inalterado, em que é possível diminuir ou aumentar este valor, ou seja, reduzindo para 0%, as cores da imagem são “removidas”.

img {
-webkit-filter: saturate(50%);
   -moz-filter: saturate(50%);
    -ms-filter: saturate(50%);
     -o-filter: saturate(50%);
filter: saturate(50%);
}

 

7. Hue Rotate

Agora, com CSS3, é possível alterar o valor da matiz da(s) imagem(ns).

O valor é especificado em graus e, geralmente, isso soa confuso, inicialmente. Para facilitar, imaginem uma roda de cores; o número de graus determina o ponto dentro desta roda.

img {
-webkit-filter: hue-rotate(20deg);
   -moz-filter: hue-rotate(20deg);
    -ms-filter: hue-rotate(20deg);
     -o-filter: hue-rotate(20deg);
filter: hue-rotate(20deg);
}

 

8. Contrast

Com os filtros de CSS3, também é possível ajustar o contraste de imagens (especificando os valores em porcentagem).

img {
-webkit-filter: contrast(150%);
   -moz-filter: contrast(150%);
    -ms-filter: contrast(150%);
     -o-filter: contrast(150%);
filter: contrast(150%);
}

 

9. Invert

É fácil inverter as cores de imagens com CSS3. Através dos filtros, é possível especificar uma porcentagem de inversão de cores.

img {
-webkit-filter: invert(100%);
   -moz-filter: invert(100%);
    -ms-filter: invert(100%);
     -o-filter: invert(100%);
filter: invert(100%);
}

Créditos: desenvolvimentoparaweb

Tweet

Pin It