Planos a partir de R$ 32/mês Inscreva-se Agora

Imagem em Preto e Branco com CSS

Código | 15.328 | 22 de junho de 2016
filter: grayscale(100%);

Com a propriedade filter do CSS, você consegue mudar as cores de uma imagem para preto e branco.

See the Pen ezBPpr by André | Origamid (@origamid) on CodePen.

É bem simples basta utilizar o código:


img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE */
}

Já é bem suportado nos browsers modernos, porém é necessário o uso do prefixo -webkit- para Chrome e outros que utilizam o webkit.

Não se limite a utilizar apenas em fotos, você pode utilizar também na marca de parceiros, clientes e outras imagens.

Assim você evita uma poluição de cores, causada quando adicionamos diversas marcas para mostrarmos com quem já trabalhamos.

PS: Você vai encontrar esse código pela Web com gambiarras utilizando SVG para funcionar no Firefox. Porém não é mais necessário isso.

http://caniuse.com/#feat=css-filters

Mais Dicas

Imagem em Preto e Branco com CSS

HTML – h1 h2 h3 h4 h5 h6

Como animar ao Scroll com jQuery

Placeholder no HTML5

O que é um CMS