Home/ Questions/Q 6030471
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T05:02:30+00:00

So what I need is simple: user presses something, user sees Vignette effect on

  • 0

So what I need is simple: user presses something, user sees Vignette effect on new div on top of all page (with page size) alike chrome set up page

Is it possible with some html5 canvas art? And how to do such thing?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, this is exactly how Chrome’s settings page is doing it: http://jsfiddle.net/JRGHM/

    .overlay {
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-transition: 0.25s opacity;
  background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5),
                                      rgba(127, 127, 127, 0.5) 35%,
                                      rgba(0, 0, 0, 0.7));
  bottom: 0;
  display: -webkit-box;
  left: 0;
  padding: 20px;
  padding-bottom: 130px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

    As you can see, the important part is the gradient.

    You can make that code work in all browsers that support CSS3 gradients by adding the appropriate gradient syntax: http://caniuse.com/#feat=css-gradients

    • 0