Step-by-step guide to creating a perforated container:

Question

Step-by-step guide to creating a perforated container:

I'm putting together a step-by-step guide on how to navigate through my app for the first time.

Imagine a pop-up that explains how to use a specific button

During the tutorial, I envision a darkened background with a highlighted circle around the button along with instructional text

To achieve this effect, I plan to create a container with circular cutouts

Here's a basic example:

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .dark{
      height: 100%;
      width: 100%;
      position: fixed;
      background-color: rgba(0, 0, 0, 0.377);
    }
    .circle{
      height: 150px;
      width: 150px;
      border-radius: 50%;
      background-color: white;
    }
  </style>
</head>
<body>
  <div class="dark">
    <p style="color:white;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-size: 23px;">This button is used to delete your file.</p>
    <div class="circle"></div>
  </div>
  <button style="margin:200px;">The Button</button>
</body>

However, my goal is to have the cutout align precisely with the button

javascript html css

Answer 1

Answer №1

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .dark{
      height: 100%;
      width: 100%;
      position: fixed;
      background-color: rgba(0, 0, 0, 0.377);
    }
    .circle{
      height: 150px;
      width: 150px;
      border-radius: 50%;
      background-color: white;
    }
    button {
      position:relative; /* ::before position absolute relative to this. */
      isolation: isolate; /* contain z-index; */
      overflow: visible; /* cater for circle pseudo element */
      color: white;
      background-color: purple; /* this not seen because ::after used for background colour */
    }
    button::before {
      content: " ";
      position: absolute;
      z-index: -2;
      inset: -4.5em -2.5em;
      /*  .circle code */
      width: 200%;
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: white;
    }
     button::after {
     content: " ";
     position: absolute;
     z-index: -1;
     inset: 0;
     background-color: purple;
}
  </style>
</head>
<body>
  <div class="dark">
    <p style="color:white;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-size: 23px;">This button is designed for file deletion.</p>
    <!--  <div class="circle"></div> -->
  </div>
  <button style="margin:200px;">Delete File</button>
</body>

Answer 2

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .dark{
      height: 100%;
      width: 100%;
      position: fixed;
      background-color: rgba(0, 0, 0, 0.377);
    }
    .circle{
      height: 150px;
      width: 150px;
      border-radius: 50%;
      background-color: white;
    }
    button {
      position:relative; /* ::before position absolute relative to this. */
      isolation: isolate; /* contain z-index; */
      overflow: visible; /* cater for circle pseudo element */
      color: white;
      background-color: purple; /* this not seen because ::after used for background colour */
    }
    button::before {
      content: " ";
      position: absolute;
      z-index: -2;
      inset: -4.5em -2.5em;
      /*  .circle code */
      width: 200%;
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: white;
    }
     button::after {
     content: " ";
     position: absolute;
     z-index: -1;
     inset: 0;
     background-color: purple;
}
  </style>
</head>
<body>
  <div class="dark">
    <p style="color:white;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-size: 23px;">This button is designed for file deletion.</p>
    <!--  <div class="circle"></div> -->
  </div>
  <button style="margin:200px;">Delete File</button>
</body>

Answer 3

Answer №2

Update

Added an overlay to the code example by including a <main> container with overflow: hidden, improving the display of the snippet.

Original

Presenting an alternative approach:

After some testing, I have devised a new technique that showcases a transparent circle rather than one with a white background, aiming for a hole-like effect.

This method enables other elements beside the button to be visible through it, while maintaining the button's interactivity for hover and click interactions to function correctly.

Execute this snippet below to observe the outcome:

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      main {
       display: flex;
       width: 100%;
       min-height: 100vh;
       justify-content: center;
       align-items: flex-start;
       overflow: hidden;
      }

      section {
        min-height: 300px;
        min-width: 500px;
        background: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 16px;
        font-family: sans-serif;
        background: pink;
      }

      div {
        display: flex;
        background: pink;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 8px;
      }

      button {
        padding: 5px;
      }

      .highlight {
        position: relative;
        isolation: isolate;
      }

      .btn-wrap.highlight::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10000px;
        height: 10000px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(0, 0, 0, 0) 1%,
          rgba(0, 0, 0, 0.377) 1.01%
        );
        z-index: -1;
      }
    </style>
  </head>
  <body>
  <main>
    <section>
      <h3>This button is used to delete your file</h3>
      <div class="btn-wrap highlight">
        <button>The Button</button>
      </div>
    </section>
    </main>
  </body>

Answer 4

Update

Added an overlay to the code example by including a <main> container with overflow: hidden, improving the display of the snippet.

Original

Presenting an alternative approach:

After some testing, I have devised a new technique that showcases a transparent circle rather than one with a white background, aiming for a hole-like effect.

This method enables other elements beside the button to be visible through it, while maintaining the button's interactivity for hover and click interactions to function correctly.

Execute this snippet below to observe the outcome:

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      main {
       display: flex;
       width: 100%;
       min-height: 100vh;
       justify-content: center;
       align-items: flex-start;
       overflow: hidden;
      }

      section {
        min-height: 300px;
        min-width: 500px;
        background: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 16px;
        font-family: sans-serif;
        background: pink;
      }

      div {
        display: flex;
        background: pink;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 8px;
      }

      button {
        padding: 5px;
      }

      .highlight {
        position: relative;
        isolation: isolate;
      }

      .btn-wrap.highlight::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10000px;
        height: 10000px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(0, 0, 0, 0) 1%,
          rgba(0, 0, 0, 0.377) 1.01%
        );
        z-index: -1;
      }
    </style>
  </head>
  <body>
  <main>
    <section>
      <h3>This button is used to delete your file</h3>
      <div class="btn-wrap highlight">
        <button>The Button</button>
      </div>
    </section>
    </main>
  </body>

Step-by-step guide to creating a perforated container:

Answer №1

Answer №2

Similar questions

Enhancing Security with Subresource Integrity in Angular-Cli

Tips for adding a comma in a text field on an HTML webpage

Ways to efficiently implement configuration settings in a functional approach

When is the appropriate time to provide arguments to the constructor of a TypeScript service?

Oops! The regular expression flag "ajax" in Javascript is not valid and is causing

Guide on how to display registration form data on the current page as well as on a separate page

Making sure the axios API call is completed before rendering the child component with props

Leveraging the adjacent sibling CSS combinator (+) alongside HgClass and varying values

Transforming a file with a node module that lacks a .js class into a browseable format

A guide on using Selenium to interact with a doughnut pie chart element

Generate a fresh array using a current array comprising of objects

Creating stylistic layouts for text using CSS

What are the steps for utilizing a button instead of an input field that is not within a form?

Make a line break occur automatically after every 7 divs are displayed

AngularJS / JQuery - input field with no corresponding label

Add a specific CSS class to a div element depending on the status of a checkbox

Issue with hidden event callback not functioning properly in Bootstrap 3 popover

Adding and removing attributes with Jquery upon clicking a button

Issue with Electron application encountered during relocation of build directory

vue v-if="canEdit" @click.prevent