Filtros com CSS: crie efeitos bonitos em imagens (ou apenas brinque de Instagram)

See the Pen CSS3 Filters by Giancarlo Silva (@giancarlozero) on CodePen.

Desde que vi esse novo recurso da linguagem CSS pela primeira vez fiquei com vontade de usar em meus projetos, para adicionar efeitos bacanas em imagens e outros elementos do meu código web. Mas nos primórdios do desenvolvimento, os CSS Filters só podiam ser feitos com o auxílio de SVG (o que ainda acho um bocado complicado de lidar sem o auxílio de ferramentas) e apenas o Google Chrome os suportava.

Recentemente descobri que, apesar de ainda ser um recurso experimental, as especificações dos CSS Filters avançaram bastante e agora quase todos os navegadores do mercado podem renderizar elementos HTML com filtros de cor gerados por CSS puro, sem JavaScript nem nenhuma gambiarra bizonha. Assim sendo, já me sinto confortável para utilizar esse novo recurso em meus projetos.

Claramente percebe-se que os CSS Filters são o tipo de efeito que exige muito cuidado do ponto de vista estético: é muito fácil se sentir tentado a usar um montão de filtros em um projeto só e acabar ficando com um resultado bem feioso… Então apreciem com moderação. 😉

Mais informações e instruções de como usar os CSS Filters nesta página do MDN e neste artigo do Tableless.

Carrinho de compras