How do you drill a hole in the parent elements until you see the body?

Question

How do you drill a hole in the parent elements until you see the body?

Asked 4 years, 6 months ago

Viewed 34 times

0

Good morning, I would like to leave the screwHole class with the transparent background to see the body color

body{
  background-color: blue;
}    

@font-face {
  font-family: Mandatory;
  src: url(https://andjao.github.io/CapCar/font/mandatory.ttf);
}

.plate {
  background: linear-gradient(135deg, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 33%, rgba(181, 198, 208, 1) 66%, rgba(224, 239, 249, 1) 100%);
  background: rgba(242, 246, 248, 1);
  background: -moz-linear-gradient(-45deg, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 33%, rgba(181, 198, 208, 1) 66%, rgba(224, 239, 249, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 33%, rgba(181, 198, 208, 1) 66%, rgba(224, 239, 249, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 33%, rgba(181, 198, 208, 1) 66%, rgba(224, 239, 249, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(242, 246, 248, 1)), color-stop(33%, rgba(216, 225, 231, 1)), color-stop(66%, rgba(181, 198, 208, 1)), color-stop(100%, rgba(224, 239, 249, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 33%, rgba(181, 198, 208, 1) 66%, rgba(224, 239, 249, 1) 100%);
  border: .3vw solid #333333;
  border-radius: 3vw;
  box-shadow: .3vw .3vw 1vw #656565;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=1);
  font-family: Mandatory;
  font-size: 3.7vw;
  padding: 2vw 0 2vw 0;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  width: 95vw;
  -webkit-box-shadow: .3vw .3vw 1vw #656565;
}

.screwHolesTop {
  align-items: center;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-box;
  justify-content: space-between;
  position: absolute;
  top: 1vw;
  -ms-flex-align: center;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -webkit-box-pack: justify;
}

.screwHole {
  transform: translate(-50%, 0);
  background-color: transparent;
  border-radius: 30%;
  border-style: ridge;
  border-top: 0.2vw solid #656565;
  height: 1.5vw;
  position: absolute;
  width: 5vw;
}

.screwHoleL {
  left: 30vw;
}

.screwHoleR {
  right: -70vw;
}

.screwHolesBottom {
  align-items: center;
  top: 30vw;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-box;
  justify-content: space-between;
  position: absolute;
  -ms-flex-align: center;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -webkit-box-pack: justify;
}

.plate1 {
  border: .2vw solid #656565;
  border-radius: 1vw;
  box-shadow: .2vw .2vw 1vw #656565;
  margin: 0 2vw;
  -webkit-box-shadow: .5vw .5vw 1vw #656565;
}

#stateCounty {
  align-items: center;
  background-clip: text;
  border: .15vw solid #656565;
  border-radius: 1vw;
  box-shadow: .5vw .5vw 1vw #656565;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-box;
  justify-content: space-between;
  margin: 3.5vw 6vw -2vw 6vw;
  text-shadow: -.2vw -.2vw 0 #fff, .2vw .2vw 1vw #656565;
  -moz-background-clip: text;
  -ms-flex-align: center;
  -ms-flex-pack: justify;
  -webkit-background-clip: text;
  -webkit-box-align: center;
  -webkit-box-pack: justify;
  -webkit-box-shadow: .5vw .5vw 1vw #656565;
}

.rivet {
  background-color: #000;
  border: .15vw solid #656565;
  border-radius: 100%;
  height: 2vw;
  margin: 0 1.5vw;
  width: 2vw;
  box-shadow: .3vw .3vw 1vw #656565;
}

.rivetL {
  box-shadow: inset 0 0 0 .5vw rgba(242, 246, 248, 1);
  -webkit-box-shadow: inset 0 0 0 .5vw rgba(242, 246, 248, 1);
}

.rivetR {
  box-shadow: inset 0 0 0 .5vw rgba(181, 198, 208, 1);
  -webkit-box-shadow: inset 0 0 0 .5vw rgba(181, 198, 208, 1);
}

#plate {
  background-clip: text;
  border: none;
  font-family: Mandatory;
  font-size: 18vw;
  height: 22vw;
  max-width: 100%;
  position: relative;
  text-align: center;
  text-shadow: -.3vw -.3vw 0 #fff, .5vw .5vw 1vw #656565;
  text-transform: uppercase;
  -moz-background-clip: text;
  -webkit-background-clip: text;
}

#plate::-moz-placeholder {
  font-size: 8vw;
  line-height: 7vw;
  text-shadow: none;
  transform: translate(0, -50%);
}

#plate::-webkit-input-placeholder {
  font-size: 8vw;
  line-height: 7vw;
  text-shadow: none;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
}

#plate:-ms-input-placeholder {
  font-size: 8vw;
  line-height: 7vw;
  text-shadow: none;
  transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
}

<div class="plate">
  <div class="screwHolesTop">
    <div class="screwHole screwHoleL"></div>
    <div class="screwHole screwHoleR"></div>
  </div>
  <div class="plate1">
    <div id="stateCounty">
      <div class="rivet rivetL"></div>
      <div id="stateCountyRes">BRASIL</div>
      <div class="rivet rivetR"></div>
    </div>
    <input type="text" id="plate" placeholder="Digite a placa aqui" value="ABC-1234">
  </div>
  <div class="screwHolesBottom">
    <div class="screwHole screwHoleL"></div>
    <div class="screwHole screwHoleR"></div>
  </div>
</div>

2

Put black, and say it’s the color of the screw, not the background ;)

– hugocsl

2020/05/13 at 14:52
kkkkkkkkkkkkk

– Anderson Marchi

2020/05/13 at 14:53
A simple, short answer: no way. Unless you use the same body background color in the element in question.

– Sam

2020/05/13 at 23:12

2 answers

3

This solution is not completely perfect, but for me it is acceptable... so I will post as an answer... I put the same background for the body and for the screwHole, put some background configs as in the image below

Follow the model, click on "Run" that each time you click will load a different img for you check, if you do not load any image loads the color.

  
  :root {
    --bgc: red;
    --bgi: url(https://unsplash.it/1000/1000);
  }

  body,
  .screwHole {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top left;
    background-attachment: fixed;
    background-color: var(--bgc);
    background-image: var(--bgi);
  }    
  
  @font-face {
    font-family: Mandatory;
    src: url(https://andjao.github.io/CapCar/font/mandatory.ttf);
  }
  
  .plate {
    background: linear-gradient(135deg, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 33%, rgba(181, 198, 208, 1) 66%, rgba(224, 239, 249, 1) 100%);
    background: rgba(242, 246, 248, 1);
    background: -moz-linear-gradient(-45deg, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 33%, rgba(181, 198, 208, 1) 66%, rgba(224, 239, 249, 1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 33%, rgba(181, 198, 208, 1) 66%, rgba(224, 239, 249, 1) 100%);
    background: -o-linear-gradient(-45deg, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 33%, rgba(181, 198, 208, 1) 66%, rgba(224, 239, 249, 1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(242, 246, 248, 1)), color-stop(33%, rgba(216, 225, 231, 1)), color-stop(66%, rgba(181, 198, 208, 1)), color-stop(100%, rgba(224, 239, 249, 1)));
    background: -webkit-linear-gradient(-45deg, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 33%, rgba(181, 198, 208, 1) 66%, rgba(224, 239, 249, 1) 100%);
    border: .3vw solid #333333;
    border-radius: 3vw;
    box-shadow: .3vw .3vw 1vw #656565;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=1);
    font-family: Mandatory;
    font-size: 3.7vw;
    padding: 2vw 0 2vw 0;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 95vw;
    -webkit-box-shadow: .3vw .3vw 1vw #656565;
  }
  
  .screwHolesTop {
    align-items: center;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-box;
    justify-content: space-between;
    position: absolute;
    top: 1vw;
    -ms-flex-align: center;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
  }
  
  .screwHole {
    transform: translate(-50%, 0);
    /* background-color: transparent; */
    border-radius: 30%;
    border-style: ridge;
    border-top: 0.2vw solid #656565;
    height: 1.5vw;
    position: absolute;
    width: 5vw;
  }
  
  .screwHoleL {
    left: 30vw;
  }
  
  .screwHoleR {
    right: -70vw;
  }
  
  .screwHolesBottom {
    align-items: center;
    top: 30vw;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-box;
    justify-content: space-between;
    position: absolute;
    -ms-flex-align: center;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
  }
  
  .plate1 {
    border: .2vw solid #656565;
    border-radius: 1vw;
    box-shadow: .2vw .2vw 1vw #656565;
    margin: 0 2vw;
    -webkit-box-shadow: .5vw .5vw 1vw #656565;
  }
  
  #stateCounty {
    align-items: center;
    background-clip: text;
    border: .15vw solid #656565;
    border-radius: 1vw;
    box-shadow: .5vw .5vw 1vw #656565;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-box;
    justify-content: space-between;
    margin: 3.5vw 6vw -2vw 6vw;
    text-shadow: -.2vw -.2vw 0 #fff, .2vw .2vw 1vw #656565;
    -moz-background-clip: text;
    -ms-flex-align: center;
    -ms-flex-pack: justify;
    -webkit-background-clip: text;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
    -webkit-box-shadow: .5vw .5vw 1vw #656565;
  }
  
  .rivet {
    background-color: #000;
    border: .15vw solid #656565;
    border-radius: 100%;
    height: 2vw;
    margin: 0 1.5vw;
    width: 2vw;
    box-shadow: .3vw .3vw 1vw #656565;
  }
  
  .rivetL {
    box-shadow: inset 0 0 0 .5vw rgba(242, 246, 248, 1);
    -webkit-box-shadow: inset 0 0 0 .5vw rgba(242, 246, 248, 1);
  }
  
  .rivetR {
    box-shadow: inset 0 0 0 .5vw rgba(181, 198, 208, 1);
    -webkit-box-shadow: inset 0 0 0 .5vw rgba(181, 198, 208, 1);
  }
  
  #plate {
    background-clip: text;
    border: none;
    font-family: Mandatory;
    font-size: 18vw;
    height: 22vw;
    max-width: 100%;
    position: relative;
    text-align: center;
    text-shadow: -.3vw -.3vw 0 #fff, .5vw .5vw 1vw #656565;
    text-transform: uppercase;
    -moz-background-clip: text;
    -webkit-background-clip: text;
  }
  
  #plate::-moz-placeholder {
    font-size: 8vw;
    line-height: 7vw;
    text-shadow: none;
    transform: translate(0, -50%);
  }
  
  #plate::-webkit-input-placeholder {
    font-size: 8vw;
    line-height: 7vw;
    text-shadow: none;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
  }
  
  #plate:-ms-input-placeholder {
    font-size: 8vw;
    line-height: 7vw;
    text-shadow: none;
    transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
  
  <div class="plate">
    <div class="screwHolesTop">
      <div class="screwHole screwHoleL"></div>
      <div class="screwHole screwHoleR"></div>
    </div>
    <div class="plate1">
      <div id="stateCounty">
        <div class="rivet rivetL"></div>
        <div id="stateCountyRes">BRASIL</div>
        <div class="rivet rivetR"></div>
      </div>
      <input type="text" id="plate" placeholder="Digite a placa aqui" value="ABC-1234">
    </div>
    <div class="screwHolesBottom">
      <div class="screwHole screwHoleL"></div>
      <div class="screwHole screwHoleR"></div>
    </div>
  </div>
  
<script>

</script>
  
</body>
</html>

1

It was a good one, for now I will use idea while I see no better alternative, vlww mann!!!

– Anderson Marchi

2020/05/13 at 15:43
@Andersonmarchi tmj! , If you discover something better put there for us :D

– hugocsl

2020/05/13 at 18:18

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by gXh • 20 points · Answer 1 · 2020-05-13T14:08:58+00:00

You can achieve this by setting the same background color for body and class screwHole, thus:

body,
.screwHole {
    background-color: blue;
}

There won’t be a hole in it, but visually, it’ll be the same thing.