Ao criar efeitos em imagens costumamos recorrer ao Photoshop, porém com os novos recursos trazidos pelo CSS3 agora é possível criar efeitos bastante interessantes. Neste tutorial veremos como criar imagens com efeito retrô usando apenas CSS. Com ajuda de gradientes e filtros CSS, vamos dar uma olhada em como o efeito vintage pode ser criado em fotos diretamente no navegador.
Esta técnica usa uma mistura de gradientes e filtros CSS, combinando várias sobreposições de cores para criar esse efeito típico de fotos antigas. Atualmente filtros CSS só funcionam em navegadores Webkit (Safari, Chrome), mas não vai demorar muito até que esta simples técnica possa ser colocada em prática em todos os navegadores.
Como aplicar efeito retrô em fotos com CSS
<div class="retro"> <img src="img/imagem.jpg" alt="Imagem com efeito retro" /> </div>
Afim de criar um efeito de foto retrô, temos que, em primeiro lugar, ter uma fotografia. Adicione uma imagem a um arquivo HTML como faria normalmente. Alguns dos efeitos CSS dependem de um contêiner, de modo que a imagem terá que estar dentro de uma <div> ou <p>.
.retro {
-webkit-box-shadow: inset 0px 0px 100px rgba(0,0,20,1);
background: -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 30%);
display: table;
}
.retro img {
-webkit-filter: sepia(50%) brightness(80%) contrast(120%);
position: relative;
z-index: -1;
}
Na folha de estilo adicione o código acima para criar instantaneamente um efeito retrô legal em qualquer imagem. De modo que os seguintes filtros CSS atualmente só funcionam em navegadores Webkit, os os demais vendor-prefixes foram omitidos para manter o exemplo limpo e organizado. Não se esqueça de adicionar o padrão e variantes (-moz-, -ms- e -o-) de cada regra CSS, se você desejar que todos os navegadores suportem o seu trabalho no futuro.
Como este efeito retrô funciona?
O código CSS começa com uma regra box-shadow usando os valores de inserção 0px 0px 100px rgba(0,0,20,1);. Isso cria um efeito de brilho interior azul escuro para simular uma vinheta. O problema é que esta sombra aparece abaixo da imagem e se estende por toda a página. Para corrigir esse inconveniente adicionamos position: relative; z-index: -1; à imagem para enviá-la um nível para baixo, enquanto display: table; recolhe a div para ajustar as dimensões da imagem.
Em seguida, o primeiro de dois gradientes de fundo é adicionado a div pai. -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%) cria um gradiente vertical do laranja para o amarelo. Os valores rgba permitem que a opacidade das cores seja reduzida fazendo com que o gradiente atue como uma sobreposição de cores.
O segundo gradiente -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%) é adicionado ao div pai e flui a partir de 50% a 0% de vermelho e tem um ângulo de 20° para simular um efeito agradável de vazamento de luz.
Os efeitos aplicados até o momento funcionam até certo ponto, mas deixam a imagem com aparência muito plana. Felizmente temos agora vários filtros CSS para brincar e alterar a aparência da imagem real: -webkit-filter: sepia(60%) brightness(80%) contrast(120%);. As regras são bastante autoexplicativas, a propriedade brilho cria uma borda completamente preta até e a cor original. O contraste da vida à imagem plana, escurecendo as áreas escuras e iluminação das áreas de luz. Em seguida, o filtro sépia adiciona um tom marrom-amarelado a imagem, mas usando apenas 60% mantem algumas das cores originais. Quando todos os gradientes e filtros são combinados, cria-se um efeito quase idêntico ao que pode ser criado no Photoshop (se tivéssemos Modos de mesclagem, tais como Divisão ou Luz Indireta).
