Como aplicar filtros do Instagram em imagens da Web

Muitos adoram usar o Instagram e os filtros que acompanham o aplicativo, para deixar suas fotos mais interessantes e bonitas. Até agora, o uso desses filtros é restrito para uso dentro do aplicativo. E se você quiser usar filtros do Instagram em imagens da Web, fora do aplicativo, como fotos que você deseja colocar em seu blog ou site pessoal?

Bem, você pode usar CSSGram, uma pequena biblioteca que permite que você Edite suas fotos com filtros semelhantes ao que você pode encontrar no aplicativo Instagram. Ao contrário do Photoshop, onde as edições são manuais ou feitas através de ações do Photoshop, com CSSGram, todo o processo é feito via CSS.

Como funciona

Para gerar o efeito, o CSSGram utiliza Filtros CSS e Modo de mistura CSS, basicamente misturando os efeitos ao ponto em que imita o filtro do Instagram desejado. Os efeitos são aplicados ao contêiner de imagens, por meio de pseudo-elementos. Vamos ver como isso é feito com este exemplo "1977":

Aqui está o pseudo-elemento adicionado.

 ._1977 posição: relativa;  ._1977: após content: "; display: block; height: 100%; largura: 100%; top: 0; esquerda: 0; posição: absoluta; 

E este é o filtro CSS e o Blend adicionado:

 ._1977 -webkit-filter: contraste (1.1) brilho (1.1) saturação (1.3); filtro: contraste (1.1) brilho (1.1) saturado (1.3);  ._1977: após background: rgba (243, 106, 188, 0,3); mix-blend-mode: tela;  

Como usar

Não podemos adicionar a classe de filtro diretamente ao elemento image, ela deve ser adicionada ao container ou à classe pai, por exemplo, com

 @import 'vendor / cssgram'; 

 .minha classe … @extend% _1977;