CODEWITHSUNDEEP
javascriptcsscanvashtml5-canvas
sr9yar
sr9yar

Reputation: 5310

Create a transparent window in a div background with css and javascript

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 page to draw user's attention). The size of the window is unknown beforehand and the effect must be implemented in the frontend. So I'm free to use html, css and js.

visualisation

I don't know a way this effect can be achieved with css only. And I cannot use something like a png image background, because the size and the dimensions of the transparent window will change dynamically. I'm thinking of generating canvas for and use it as a background image for the div element.

Is this possible to generate a canvas as per my example image and use it as a background? Can you, please, provide an example? Thanks.

Upvotes: 2

Views: 5675

Answers (4)

Temani Afif
Temani Afif

Reputation: 272723

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:20vh 30vw;
  border-color:rgba(0, 255, 0, .25);
}
<div class="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);
}
<div class="window"></div>

Upvotes: 2

Irfan434
Irfan434

Reputation: 1681

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>
    <div id="overlay"></div>
  </body>
</html>

Upvotes: 1

Dacre Denny
Dacre Denny

Reputation: 30360

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%);
}
<div class="overlay"></div>
<img src="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  */
const setClipPath = (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);
}
<div class="overlay"></div>
<img src="https://images.unsplash.com/photo-1505811210036-052144988918?w=1080" />

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 114990

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: 0 0 0 99999px rgba(0, 255, 0, .25)
}
<div class="window"></div>

Upvotes: 9

Related Questions