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
Is it possible with some html5 canvas art? And how to do such thing?
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.