Best IT Recipes

Dim whole screen except fixed area?

I want to create a tutorial that takes the user exactly where to click. I am trying to cover the entire screen with a <div> , which will obscure all elements except a certain area , which is in a fixed width , height , top and left .

The problem is that I cannot find a way to “undo” the parent background-color (which is also transparent).

In the snippet below, hole is a div that should be without background-color , including its parent.

Can this be done at all? Any ideas?

 #bg{ background-color:gray; opacity:0.6; width:100%; height:100vh; } #hole{ position:fixed; top:100px; left:100px; width:100px; height:100px; } 
 <div id="bg"> <div id="hole"></div> </div>

Here is the image of the layout I'm trying to achieve:

enter image description here

+85
javascript jquery html css
Jul 17 '17 at 12:07 on
source share
6 answers

You can do this with just one div and give it a box-shadow .

EDIT: as @Nick Shvelidze pointed out, you should consider adding pointer-events: none

Added vmax value for box-shadow , as suggested by @Prinzhorn

 div { position: fixed; width: 200px; height: 200px; top: 50px; left: 50px; /* for IE */ box-shadow: 0 0 0 1000px rgba(0,0,0,.3); /* for real browsers */ box-shadow: 0 0 0 100vmax rgba(0,0,0,.3); pointer-events: none; } 
 <div></div>
+120
Jul 17 '17 at 12:15
source share

You can create an SVG that is filled with a track that has the hole you need. But I assume that you need to find a way to handle clicks, as they will all target svg overlay. I thing document.getElementFromPoint can help you. mdn

+19
Jul 17 '17 at 12:12
source share

This can also be done in the same way as with @VilleKoo's answer, but with a frame.

 div { border-style: solid; border-color: rgba(0,0,0,.3); pointer-events: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-width: 40px 300px 50px 60px; } 
 <div></div>
+2
Jul 20 '17 at 7:27
source share

You can achieve the same as in VilleKoo's answer using the CSS outline property. It has excellent browser support (and also works in IE8 +). Outlines have the same syntax as borders, but unlike borders they do not take up space, they are drawn over the contents.

Also for IE9 + you can replace 99999px with calc(100 * (1vh + 1vw - 1vmin)) .

The disadvantage of this approach is that outline does not affect border-radius .

Demo:

 div { position: fixed; width: 200px; height: 200px; top: 50px; left: 50px; /* IE8 */ outline: 99999px solid rgba(0,0,0,.3); /* IE9+ */ outline: calc(100 * (1vw + 1vh - 1vmin)) solid rgba(0,0,0,.3); /* for other browsers */ outline: 100vmax solid rgba(0,0,0,.3); pointer-events: none; } 
 <div></div>
+1
Jul 24. '17 at 4:35
source share

Here is a simple jQuery code using @VilleKoo css

 var Dimmer = (function(){ var el = $(".dimmer"); return { showAt: function(x, y) { el .css({ left: x, top: y, }) .removeClass("hidden"); }, hide: function() { el.addClass("hidden"); } } }()); $(".btn-hide").click(function(){ Dimmer.hide(); }); $(".btn-show").click(function(){ Dimmer.showAt(50, 50); }); 
 .dimmer { position: fixed; width: 200px; height: 200px; top: 50px; left: 50px; box-shadow: 0 0 0 1000px rgba(0,0,0,.3); /* for IE */ box-shadow: 0 0 0 100vmax rgba(0,0,0,.3); /* for real browsers */ pointer-events: none; } .hidden { display: none; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div> <input type="text"> <select name="" id=""></select> <input type="checkbox"> </div> <div> <input type="text"> <select name="" id=""></select> <input type="checkbox"> </div> <div> <input type="text"> <select name="" id=""></select> <input type="checkbox"> </div> <div> <input type="submit" disabled> </div> <input type="button" value="Hide" class="btn-hide"> <input type="button" value="Show" class="btn-show"> <div class="dimmer hidden"></div> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> </body> </html>
0
Jul 20 '17 at 12:03 on
source share
 #bg { background-color: gray; opacity: 0.6; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99998; } #hole { position: fixed; top: 100px; left: 100px; width: 100px; height: 100px; z-index: 99999; }
0
Jul 20 '17 at 18:06
source share


More articles:


All Articles