1

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?

Rella
  • 65,003
  • 109
  • 363
  • 636
  • 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 Jun 12 '11 at 17:16

1 Answers1

6

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

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Yes, it can. That's what I did, but once I saw how it was doing it and that it was called `.overlay`, I figured it would be clearer to take it from the source. – thirtydot Jun 12 '11 at 17:23
  • Sure, I just wanted to note that in case anyone is wondering how to find that out. – Felix Kling Jun 12 '11 at 17:27
  • 1
    @Kabumbus: Looks good! Here's a version with the `98%`s fixed: http://jsfiddle.net/XHAbV/2/ – thirtydot Jun 12 '11 at 18:32