Gerador de código CSS grátis para filtros no estilo do Instagram

Quão legal seria adicionar filtros de imagem ao seu site? Anos atrás, isso exigiria JavaScript, mas hoje em dia você pode criar filtros de imagem personalizados com bons e antigos HTML e CSS.

E com o webapp cssFilters você não precisa escrever nada do código CSS!

Esta ferramenta gratuita ajuda você a criar filtros de imagem personalizados usando filtros CSS3. Você pode encontrar muitos guias que abordam a propriedade do filtro CSS em detalhes. Mas com o cssFilters você não precisa se preocupar como tudo funciona, você simplesmente personaliza suas configurações e copia o código.

No topo da tela, você notará uma longa barra cheia de filtros personalizados do Instagram. Esses filtros incluem todas as opções populares como Hudson, Toaster, Inkwell, Lofi e muitos outros.

Basta clicar no filtro desejado e clicar no “Código CSS” aba no canto superior direito. De lá, você obterá o código HTML e CSS. Basta copiar / colar em seu site e você está pronto para ir.

Mas você também pode personalizar esses filtros com os controles deslizantes de configurações. Debaixo de “gerador” tab você pode alterar configurações como saturação e contraste, juntamente com o desfoque, tons de cinza, sépia e até mesmo o estilo de sobreposição, como um gradiente linear ou gradiente radial.

Cada vez que você move um controle deslizante, ele atualiza automaticamente o código para que você não precise salvar nada..

E você pode até trocar a imagem padrão fazendo o upload de uma a partir do seu computador ou escolhendo uma da Unsplash..

Esta webapp foi feita por Indrashish Ghosh e executa muitas das classes padrão encontradas na biblioteca CSSgram.

Mas as configurações personalizadas vão muito além das predefinições básicas, e a geração de código livre torna isso uma ferramenta útil para codificadores e não codificadores. Já temos muitos geradores CSS3 para propriedades como gradientes de fundo e sombras de texto. E agora temos o cssFilters como o principal gerador de filtros de imagem CSS3.