how to make a container with holes? - Ubuntu

Rob
November 10, 2022
277 views
0 votes
2 Answers

I’m making a tutorial on how to use my app for the first time.

So it looks like a popup about how to use a button

during the tutorial, I want to make the background darker and a circle appears that will circle the button and there is a tutorial text

So, I want to make a container that has circular holes

here’s a simple 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>

but I want the hole to be in the button

Answers

Update

Updated the code example to contain the overlay by adding a <main> container with overflow: hidden, so the snippet displays more properly.

Original

Just posting as an alternative solution:

After some experiments, I came up with this new method that actually display a transparent circle instead of one with a white background, hopefully it’s closer to the desired behavior of a hole.

This allows other elements beside the button to be seen through, and it also keeps the button interactive so it can accept hover and click effects properly.

Run this snippet to see the result:

<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>

<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 used to delete your file.</p>
    <!--  <div class="circle"></div> -->
  </div>
  <button style="margin:200px;">The Button</button>
</body>

Please signup or login to give your own answer.

Click here to cancel reply.

how to make a container with holes? – Ubuntu

Answers