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?

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?

• javascript
• html
• canvas
• effects
• vignette

Share Improve this question Follow asked Jun 12, 2011 at 17:12 RellaRella 67.1k112112 gold badges374374 silver badges642642 bronze badges 1

• If you're really talking about HTML5-capable browsers, you could probably do this without needing a canvas. You'd just need a rounded-corner box (or two) with some widely-blurred box shadow(s). – Pointy Commented Jun 12, 2011 at 17:16

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Well, this is exactly how Chrome's settings page is doing it: http://jsfiddle/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./#feat=css-gradients