Website and vignette effect
Some day ago, a contact asked me to give him a hand in solving a subtle problem with his website.
He wanted to simulate the classic vignette effect (well known by the users of Instagram or Photoshop) on the body of his website.
Here's the simple solution we found for his problem. A simple <div> under every other layer, that simulates this nice effect.
In your HTML code:
<body>
<div class="vignette"></div>
<!-- the rest of your code starts here -->
</body>In your CSS code:
.vignette {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
}That's it. In this way you will obtain a nice vignette effect for your website, without using background images.
This method has pro and cons, of course.
PRO
- no background PNG image is required;
- faster in loading the website;
- dynamically adapts to the website visible area
CONS
- the vignette is limited to the visible area;
- only modern browsers supporting
box-shadowproperty can show this effect; - the website content will scroll over the vignette effect (look at the variant below as workaround to this problem);
Variant: to extend the vignette to the whole website
If we want to obtain the same effect, but extended over the visible limits of our website, we don't need the <div> element seen before, and the element to modify will be the <html> tag. So, instead to add a .vignette class to the CSS, we simply have to add these few properties:
html {
min-height: 100%;
box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
}In this way, the vignette effect will follow the website's borders, instead of the visible area's borders.
PRO
- the website content doesn't scroll over the effect;
- the effect extends to the entire website's height;
CONS
- the effect doesn't extend to the website's width when is scrolled (does anybody have an idea to solve this?)
Written by Marco Trulla
Related protips
Have a fresh tip? Share with Coderwall community!
