Mídias sociais

Filtros CSS estilo Instagram

Obtenha definições de filtros CSS inspiradas no Instagram para aplicar diretamente em estilos web.

Executar ferramenta

Esta ferramenta gera definições de código CSS inspiradas nos filtros visuais populares do Instagram. Ao indicar o nome de um efeito pretendido, o utilitário apresenta as regras de estilo correspondentes, combinando funções padrão como brilho, contraste, saturação, rotação de matiz, sépia ou escala de cinzentos. Entre as opções suportadas encontram-se perfis conhecidos como clarendon, gingham, lark, reyes, juno, valencia, xpro2, willow e nashville, além da predefinição normal. Caso deixe o campo em branco ou introduza um identificador não reconhecido, o sistema aplica automaticamente a predefinição normal, que mantém o estilo original sem funções adicionais. O resultado fornece o código exato e uma descrição explicativa, permitindo copiar as propriedades diretamente para folhas de estilo em projetos web, sem necessidade de editar ficheiros de imagem em editores externos.

Instruções

  1. Introduza o nome do filtro pretendido no campo de texto ou deixe em branco para a opção normal.
  2. Execute a consulta para gerar a definição de estilo.
  3. Copie a regra de filtro CSS apresentada no painel de resultados para o seu código.

Exemplos

  • Escrever clarendon no campo para obter a combinação de contraste, saturação e brilho desse estilo.
  • Escrever willow para receber a regra CSS com escala de cinzentos e ajustes tonais.
  • Deixar o campo vazio para obter a regra base sem filtros aplicados.

Perguntas frequentes

Quais são os nomes de filtros reconhecidos?

O sistema reconhece normal, clarendon, gingham, lark, reyes, juno, valencia, xpro2, willow e nashville.

O que acontece se introduzir um nome desconhecido?

Se o nome não estiver na lista reconhecida, o sistema recorre automaticamente à opção normal sem aplicar filtros.

A ferramenta altera ficheiros de imagem diretamente?

Não. A ferramenta gera apenas o código de regras CSS para utilizar em desenvolvimento web.

Incorporar esta ferramenta

Adicione esta ferramenta funcional da SmartPlusLab ao seu site com o código abaixo.