How Can I Make Everything Outside Of A Div Darker?

I've got a cart drawer that opens from the right on click. I'd like for everything outside of it to become darker when it is opened such that only the div (cart drawer) is focused.

Solution 1:

Basicly, a hudge shadow might do :(click any numbered divs to darken what's around it)

Edit from your comment, i would propose: .cart-container{box-shadow:0 0 0 2000px rgba(0,0,0,0.5);} demo below for effect it can have.

div:focus {
  position:relative;/* bring on top;*/box-shadow:0001600pxrgba(0,0,0,0.65);/* dark around it */
}

/* demo purpose*/body {
  display: flex;
  flex-wrap: wrap;
  counter-reset: divs -1;
  margin:0;
}
div {
  counter-increment: divs;
  height: 120px;
  width: 120px;
  background: turquoise;
}
div:nth-child(odd) {
  background: tomato;
}
div:not(:first-of-type):before {
  content: counter(divs);
  display: block;
  font-size: 2em;
  margin: 1em;
  color: white;
}

<div>tabindex for demo catches click, but not me. <b>switch light back on</b></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div>

a mask in fixed position can also be used to catch any click outside it:

div.toShowTop {
  position: relative;
  z-index: 1;
  /* bring on top;*/box-shadow: 0001600pxrgba(0, 0, 0, 0.65);
  /* dark around it */
}
div.toShowTop ~.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 50px;/* to see effect */background: rgba(0, 0, 0, 0.5);
}
bodydiv.toShowTop {
  background: yellow;
  order: 1;
}
div:nth-child(8)~div {
  order: 2
}
/* demo purpose*/body {
  display: flex;
  flex-wrap: wrap;
  counter-reset: divs -1;
  margin: 0;
}
div {
  counter-increment: divs;
  height: 120px;
  width: 120px;
  background: turquoise;
  cursor: pointer;
}
div:nth-child(odd) {
  background: tomato;
}
div:not(:first-of-type):before {
  content: counter(divs);
  display: block;
  font-size: 2em;
  margin: 1em;
  color: white;
}

<divtabindex="0"class="toShowTop">div to show</div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><bclass="mask"></b><!-- can be generated via js -->

You may also use a pseudo from another element to avoid extra markup:

div.toShowTop {
  position:relative;
  z-index:1;/* bring on top;*/
}
div.toShowTop  + div:after {
  content:'';
  position:fixed;
  top:0;
  bottom:0;
  right:0;
  left:50px;
  background:rgba(0,0,0,0.75);
  cursor:auto;
}
bodydiv.toShowTop {
  background:yellow;
  order:1;}
div:nth-child(8)~div {order:2}
/* demo purpose*/body {
  display: flex;
  flex-wrap: wrap;
  counter-reset: divs -1;
  margin:0;
}
div {
  counter-increment: divs;
  height: 120px;
  width: 120px;
  background: turquoise;
  cursor:pointer;
  
}
div:nth-child(odd) {
  background: tomato;
}
div:not(:first-of-type):before {
  content: counter(divs);
  display: block;
  font-size: 2em;
  margin: 1em;
  color: white;
}

<divtabindex="0"class="toShowTop"> div to show </div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div><divtabindex="0"></div>

Solution 2:

You can do it with a pseudo element...

div {
  background: #fff;
}

div:after {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  background: rgba(0,0,0,0.8);
  content: '';
  z-index: -1;
}

<div>div</div>

But a better solution might be to create a separate element that serves as the background/mask. This will give you more control over the layout.

section {
  background: white;
}

.mask {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 1;
}

.show {
  position: relative;
  z-index: 2;
}

<section>section</section><sectionclass="show">show this</section><section>section</section><divclass="mask"></div>