Close Menu
Código Simples .NETCódigo Simples .NET
    Facebook X (Twitter) Instagram
    Trending
    • NewSQL em 2025: O Estado Atual, Tendências e o Futuro dos Bancos de Dados Relacionais Escaláveis
    • 12 Regras Essenciais para Reduzir a Latência de Aplicações
    • Cache Hit Ratio: Como uma Simples Métrica Pode Revolucionar sua Arquitetura
    • Como a Uber calcula o tempo estimado de chegada
    • 30 APIs Gratuitas para desenvolvedores
    • Por que escalar escrita é tão mais difícil do que escalar leitura?
    • MongoDB Analyzer para .NET: Visualize e otimize suas consultas de forma simples
    • Cardinalidade: O Conceito que Transforma o Desempenho de Bancos de Dados SQL e NoSQL
    Facebook X (Twitter) Instagram
    Código Simples .NETCódigo Simples .NET
    Código Simples .NETCódigo Simples .NET
    Home»Dicas»Instagram com CSS! – Utilizando Filtros de CSS3 em imagens

    Instagram com CSS! – Utilizando Filtros de CSS3 em imagens

    Jhonathan SoaresBy Jhonathan Soares30 de janeiro de 20151 Min Read Dicas
    Share
    Facebook Twitter LinkedIn WhatsApp Copy Link

    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!

    Share. Facebook Twitter LinkedIn Telegram WhatsApp Copy Link
    Jhonathan Soares
    • Website
    • Facebook
    • X (Twitter)
    • LinkedIn

    Criador do blog Código Simples e com mais 15 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.

    Posts Relacionados

    Happy Hour com Dados #16 – Java vs C#

    C# Dicas 22 de setembro de 20201 Min Read

    Happy Hour com Dados #15 – Aplicação de IA no Processamento de Imagem

    Dicas Tecnologia 22 de setembro de 20201 Min Read

    Happy Hour com Dados #14 – Modelagem de Dados

    Dicas NoSql Sql 22 de setembro de 20201 Min Read
    Newsletter

    Digite seu endereço de e-mail para receber notificações de novas publicações por e-mail.

    Junte-se a 25mil outros assinantes
    Posts recentes
    • NewSQL em 2025: O Estado Atual, Tendências e o Futuro dos Bancos de Dados Relacionais Escaláveis
    • 12 Regras Essenciais para Reduzir a Latência de Aplicações
    • Cache Hit Ratio: Como uma Simples Métrica Pode Revolucionar sua Arquitetura
    • Como a Uber calcula o tempo estimado de chegada
    • 30 APIs Gratuitas para desenvolvedores
    Categorias
    • Arquitetura (14)
      • Testes (2)
    • Asp.net (120)
      • C# (89)
      • Mvc (13)
    • Banco de dados (90)
      • NoSql (58)
      • Sql (38)
    • Boas práticas (29)
      • Gestão & Produtividade (1)
      • Metodologias Ágeis (6)
    • Cursos (52)
    • Dicas (105)
    • Front-End (92)
    • IA (1)
    • Linux (6)
    • NodeJS (4)
    • Post do Leitor (9)
    • Python (5)
    • Seo (12)
    • Tecnologia (30)
      • ITIL (1)
      • Padrões de Projeto (4)
    • Testes (2)

    VEJA TAMBÉM

    Cursos
    12 de fevereiro de 20166 Mins Read

    1000 livros gratuitos sobre programação!

    Olha que dica bacana! A pagina só com livros sobre programação é mantida no GitHub…

    30 APIs Gratuitas para desenvolvedores

    Facebook X (Twitter) Instagram LinkedIn

    Type above and press Enter to search. Press Esc to cancel.

    Vá para versão mobile