Instagram com CSS! – Utilizando Filtros de CSS3 em imagens

0

Já não é apenas um rumor, a febre de selfies, imagens com filtros, o próprio Instagram já é realidade a algum tempo entre o mundo web.

E com isso o CSS3 possui um pequeno, porém poderoso suporte à filtros de imagens que você pode trabalhar em cima de imagens. Escrever filtros para imagens não é exatamente complicado.

Veja um simples exemplo:

/* simple filter */
.myElement {
    -webkit-filter: blur(2px);
}
 
/* advanced filter */
.myElement {
    -webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}

Esse tipo de filtragem apenas cria uma máscara na visualização original da imagem e não salva ou exporta a imagem com o filtro, mas é ótimo para galerias de fotos ou em qualquer outro lugar que você queira adicionar um pouco de “estilo”em uma imagem!

Você pode conferir o demo e o post completo de um autor bacana que exemplifica quase todos os filtros.

Um abraço!

Compartilhe.

Sobre o autor

Criador do blog Código Simples e com mais 9 anos de experiência em TI, com títulos de MVP Microsoft na área de Visual Studio Development, Neo4j Top 50 Certificate, Scrum Master e MongoDB Evangelist. Atuando em funções analista, desenvolvedor, arquiteto, líder técnico e gestor de equipes. Mais informações em : http://jhonathansoares.com