Skip to content Skip to sidebar Skip to footer
Home / Canvas / Css / Html5 Canvas / Javascript

Create A Transparent Window In A Div Background With Css And Javascript

Post a Comment
I'm trying to implement an effect in a webpage. The webpage must be fully covered with a background with a transparent window (this window will basically highlight some page of the

Solution 1:

Use a giant box-shadow:

body {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg);
  background-size: cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.window {
  width: 150px;
  height: 150px;
  border: 5px solid red;
  box-shadow: 00099999pxrgba(0, 255, 0, .25)
}
<divclass="window"></div>

Solution 2:

Another approach would be via the clip-path CSS property, where the clip path is used to define the visible region of the green "overlay".

Using the Clippy tool, you can modify the "frame" clip-path (from the tools preset library) to suit your needs. Here's an example of how the technique can be used to achieve what you require, and what each coordinate of the clip-path corresponds to:

.overlay {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,255,0,0.5);

  /* Defines the portion of the green overlay to be drawn and clipped */clip-path: polygon(
    0%0%, 
    0%100%, 
    25%100%, /* Bottom left sideline of clipped rectangle */25%25%, /* Top left corner of clipped rectangle */75%25%, /* Top right corner of clipped rectangle */75%75%, /* Bottom right corner of clipped rectangle */25%75%,  /* Bottom left corner of clipped rectangle */25%100%, /* Bottom left baseline of clipped rectangle */100%100%,
    100%0%);
}
<divclass="overlay"></div><imgsrc="https://images.unsplash.com/photo-1505811210036-052144988918?w=1080" />

You could then generalize a solution for a visible rectangular region based on a clip-path with JavaScript like this:

/* Calculates clip paths with rectangular "cutout" for specified element  */constsetClipPath = (element, { left, top, width, height }) => {
 
  element.style.clipPath = `polygon(
    0% 0%, 
    0% 100%, 
    ${left}% 100%,
    ${left}% ${top}%,
    ${left + width}% ${top}%,
    ${left + width}% ${top + height}%,
    ${left}% ${top + height}%,
    ${left}% 100%,
    100% 100%,
    100% 0%)
  `;
}

setClipPath(document.querySelector(".overlay"), {
  top : 10, 
  left : 10, 
  width : 30, 
  height : 30
});
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 255, 0, 0.5);
}
<divclass="overlay"></div><imgsrc="https://images.unsplash.com/photo-1505811210036-052144988918?w=1080" />

Solution 3:

Create a single div that fills the entire screen. The transparent window is the the inside of the div, and the transparent background is the border. Using CSS, use the border-width properties to control the window's position, and use the height and width properties to set the window's size.

#overlay {
  /* full page overlay */position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index: 2;
  
  /* window size */width: 150px;
  height: 20px;
  
  /* window position */border-top: 50px;
  border-left: 50px;
  border-bottom: 10000px;
  border-right: 10000px;
  
  /* window colour */background-color: rgba(0,0,0,0);
  
  /* frame colour */border-style: solid;
  border-color: rgba(50,150,250,0.5);

}

p {
  margin: 50px;
}
<html><body><p>A paragraph of text</p><divid="overlay"></div></body></html>

Solution 4:

Another idea using border

Reponsive

body {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg);
  background-size: cover;
}

.window {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-style:solid;
  border-width:20vh30vw;
  border-color:rgba(0, 255, 0, .25);
}
<divclass="window"></div>

Or with fixed sizes

body {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg);
  background-size: cover;
}

.window {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-style:solid;
  border-width:calc(50vh - 80px) calc(50vw - 100px);
  border-color:rgba(0, 255, 0, .25);
}
<divclass="window"></div>

Post a Comment for "Create A Transparent Window In A Div Background With Css And Javascript"