Filtros CSS3
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!
Introdução sobre filtros CSS3
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!
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.
Blur
Filtro CSS: 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.
1 2 3 4 5 6 7 | img { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } |
Greyscale
Filtro CSS3: 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.
1 2 3 4 5 6 7 | img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); } |
Sepia
Filtro CSS3: 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.
1 2 3 4 5 6 7 | img { -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -ms-filter: sepia(100%); -o-filter: sepia(100%); filter: sepia(100%); } |
Brightness
Filtro CSS3: 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.
1 2 3 4 5 6 7 | 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); } |
Saturation
Filtro CSS3: 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”.
1 2 3 4 5 6 7 | img { -webkit-filter: saturate(50%); -moz-filter: saturate(50%); -ms-filter: saturate(50%); -o-filter: saturate(50%); filter: saturate(50%); } |
Hue Rotate
Filtro CSS3: hue
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.
1 2 3 4 5 6 7 | 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); } |
Contrast
Filtro CSS3: contrast
Com os filtros de CSS3, também é possível ajustar o contraste de imagens (especificando os valores em porcentagem).
1 2 3 4 5 6 7 | img { -webkit-filter: contrast(150%); -moz-filter: contrast(150%); -ms-filter: contrast(150%); -o-filter: contrast(150%); filter: contrast(150%); } |
Invert
Filtro CSS3: invert
É fácil inverter as cores de imagens com CSS3. Através dos filtros, é possível especificar uma porcentagem de inversão de cores.
1 2 3 4 5 6 7 | img { -webkit-filter: invert(100%); -moz-filter: invert(100%); -ms-filter: invert(100%); -o-filter: invert(100%); filter: invert(100%); } |