Editando Imagens no CSS: Combinando Técnicas

Nos dois últimos tutoriais da série, discutimos como filtros e modos de mesclagem podem mudar completamente a aparência das imagens. Nesse tutorial, cobriremos o básico da edição de imagens usando ambas propriedades.

O Básico

Qualquer edição de imagem não primitiva requer mais que um único elemento. Isso pode ser obtido com pseudo elementos. Infelizmente, há mais uma complicação. O elemento img vem abaixo dos elementos substituídos. Assim, :before e :after não funcionarão com tags de iamgem. Para resolver isso, precisaremos um envólucro para nossa imagem e a tag figure é a melhor candidata para o caso. Assim, a marcação será:

<figure>
  <img src="image-url">
</figure>

Todos os efeitos de edição criados terão o mesmo CSS base.

figure {
  position: relative;
}

figure:before,
figure:after {
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

Usamos :before e :after para podermos aplicar os modos de mesclagem. Notemos que aplicamos 100% a width e height para poder cobrir figure, e usamos posicionamento absoluto para alinhamento perfeito.

Na maioria dos casos, aplicaremos os filtros nas imagens usando modos de mesclagem e outros efeitos nos pseudo elementos. A imagem abaixo é a original que usaremos.

Imagens em Tons de Cinza de Alto Contraste

Para criar uma imagem de alto contraste, podemos apenas usar um valor alto no contraste. Mas aumentar o brilho deixa o efeito dramático. Se usarmos apenas filtros, é só isso a fazer. Contudo, com modos de mesclagem, podemos adicionar uma sombra interna com mesclagem overlay à imagem para melhor resultado. Eis o CSS para o efeito:

img {
  filter: contrast(1.8) brightness(1.5) grayscale(1);
}

figure:before {
  z-index: 3;
  mix-blend-mode: overlay;
  box-shadow: 0 0 200px black inset;
}

Adicionar z-index mantem os psudo elementos acima da imagem. Usamos o modo de mesclagem overlay pra manter a imagem levemente mais escura após aplicar o box-shadow.

Passe o mouse por cima da imagem abaixo e veja a diferença entre filtros contra um combo de filtros e modos de mesclagem.

Para praticar, podemos tentar valores diferentes em box-shadow, na demo no CodePen.

Dando um Ar Velho a Imagens

Cor em fotos antigas costuma desaparecer e elas possuem um contorno meio vermelho-marrom. Para recriar esse efeito, usaremos mais elementos e filtros: Eis o nosso CSS:

img {
  filter: saturate(0.6);
}

figure {
  filter: contrast(1.1) saturate(1.9) sepia(0.7) grayscale(0.3);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 250px brown inset;
  background: rgba(125, 100, 0, 0.3);
}

figure:after {
  z-index: 3;
  mix-blend-mode: hard-light;
  box-shadow: 0 0 150px pink inset;
  background: rgba(198, 155, 0, 0.3);
}

Dessa vez, aplicamos filtros na imagem e em figure. Basicamente, queremos que a imagem seja menos colorida. Conseguimos isso usando o filtro saturate com valores menor que 1. Os filtros de figure são aplicados após toda a mesclagem. Se não aplicarmos esses filtros, o resultado final terá muito mais tons marrons, o que não queremos.

Devemos notar que também aplicamos um plano de fundo avermelhado e semi-trasparent em ambos os pseudo elementos. Isso dá o ar vermelho amarronzado. A box-shadow é usada para manter o contorno relativamente mais marrom.

Podemos experimentar com as várias propriedades na demo para ver se conseguimos resultados melhores.

Adicionando Uma Matiz Específica

Dessa vez, tentaremos dar uma matiz azul à nossa imagem. Comparado a cores quentes, adicionar um tom de cores frescar, como azul, melhora a imagem.

Eis o CSS que precisamos aplicar:

img {
  filter: brightness(1.1) contrast(1.3);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 100px rgba(100, 150, 200, 1) inset, 0 0 300px rgba(100, 150, 200, 1) inset;
}

figure:after {
  z-index: 3;
  mix-blend-mode: difference;
  background: rgba(0, 0, 255, 0.3);
}

Começamos aumentando o brilho e contraste da imagem. Isso garante que ela não perde cores menos proeminentes e fica enfadonha pela edição.

Geralmente, temos de usar box-shadows com cores mais claras para mudanças perceptíveis. É por isso que adicionamos duas box-shadows azuladas à imagem.  Apenas usando uma box-shadow restringe o tom de azul aos limites da imagem. Para espalhar o azul pela imagem, usamo-na com plano de fundo em :after. Eis o resultado final após os filtros:

Tentemos adicionar matizes verde ou vermelha na demo.

Névoa Amarelada

Você já viu alguma noite levemente nublada com partículas de areias suspensas na atmosfera por conta do vento? Nessas condições climáticas, tudo tem uma matiz amarelada e os objetos parecem um pouco mais maçantes. Para recriar o efeito, precisamos do seguinte CSS:

img {
  filter: saturate(0.2);
}

figure {
  filter: contrast(1.8) brightness(1.1) saturate(1.5);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 100px rgba(0,0,0,0.5) inset;
  background: rgba(125, 100, 0, 0.3);
}

figure:after {
  z-index: 3;
  mix-blend-mode: hard-light;
  box-shadow: 0 0 500px rgba(0,0,0,0.6) inset;
  background: rgba(198, 155, 0, 0.3);
}

A primeira coisa a fazer é reduzir a saturação da imagem. Tanto :before e :after tem planos de fundo amarelo translúcidos para adicionar a matiz desejada. Usando o modo de mesclagem hard-light em :after torna a neblina mais proeminete.

A box-shadow nos pseudo elementos aumenta o foco no ciclista. Por fim, aplicando filtros de alto contrast, brightness e saturation ao elemento figure reforça a neblina.

Na demo, podemos tentar valores diferentes para as várias propriedades para ver como afetam o resultado final.

Pensamentos Finais

Não é difícil editar imagens no CSS. Se tivermos os pontos discutidos no tutorial em mente, seremos capazes de criar alguns filtros surpreendentes por conta própria.

Por prática, podemos experimentar as demos no tutorial ou recriar filtros populares do Instagram. Também podemos verificar as variedades de animações e efeitos disponíveis na Envato Marketplace, no caso de precisarmos de algo pronto.