🥇 Efeito de site e vinheta

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;
}

Teste você mesmo

É 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;
}

Teste você mesmo

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?)

Variante: para estender a vinheta a todo o site

Related Posts