Algum dia atrás, um contato me pediu para ajudá-lo a resolver um problema sutil com seu site.
Ele queria simular o clássico efeito de vinheta (bem conhecido dos usuários do Instagram ou Photoshop) no corpo de seu site.
Aqui está a solução simples que encontramos para seu problema. Um simples <div>sob todas as outras camadas, que simula este belo efeito.
Em seu código HTML:
<body>
<div class="vignette"></div>
<!-- the rest of your code starts here -->
</body>Em seu código CSS:
.vignette {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
}É isso aí. Desta forma, obterá um bom efeito de vinheta para o seu site, sem usar imagens de fundo.
Esse método tem prós e contras, é claro.
PRÓ
- nenhuma imagem PNG de fundo é necessária;
- mais rápido no carregamento do site;
- adapta-se dinamicamente à área visível do site
CONTRAS
- a vinheta é limitada à área visível;
- somente navegadores modernos que suportam propriedade podem mostrar este efeito;
box-shadow - o conteúdo do site irá rolar sobre o efeito de vinheta (veja a variante abaixo como uma solução alternativa para este problema);
Variante: para estender a vinheta a todo o site
Se quisermos obter o mesmo efeito, mas estendido além dos limites visíveis de nosso site, não precisamos do <div>elemento visto antes, e o elemento a modificar será a <html>tag. Então, em vez de adicionar uma classe ao CSS, simplesmente temos que adicionar estas poucas propriedades:.vignette
html {
min-height: 100%;
box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
}Desta forma, o efeito de vinheta seguirá as bordas do site, ao invés das bordas da área visível.
PRÓ
- o conteúdo do site não rola sobre o efeito;
- o efeito se estende a toda a altura do site;
CONTRAS
- o efeito não se estende à largura do site quando é rolado (alguém tem uma ideia para resolver isso?)