CSS Position Absolute failed when using vh and vw unit

user_13052107 0
Viewed 2462

i am using the following code to mask a background video in a svg text with some other text around. My problem is that the white texts do not keep their position on resizing, although I work with vh and vw units. And the white heading and the white description do not have the same distance to the MASK.

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
.font-serif font-family: Georgia, Cambria, "Times New Roman", Times, serif;
.font-mono font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  height: 100vh;
  width: 100%;
  background: #000;
}

.headline-wrapper {
  position: absolute;
  top: 2vh;
  left: 1.4%;
}

.headline {
  margin: 0;
  font-size: 8vw;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
}

.description-wrapper {
  position: absolute;
  top: 70vh;
  left: 1.4%;
}

.description {
  margin: 0;
  font-size: 4vw;
  font-weight: 400;
  color: #fff;
}

.video-wrapper {
  position: relative;
  overflow: hidden;
  clip-path: url(#mask);
}

.video {
  width: 100%;
  height: 100vh;
  object-fit: cover; 
}

.mask-text {
  text-anchor: start;
  font-size: 16vw;
  font-weight: bold;
}
<section>
  <div class="container">
    <div class="headline-wrapper">
      <h3 class="headline">Headline</h3>
    </div>
    <div class="description-wrapper">
      <p class="description">Description</p>
    </div>
    <div class="video-wrapper">
      <video class="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" muted loop autoplay="true"></video>
      <svg><clipPath id="mask"><text class="mask-text" x="2%" y="55vh">MASK</text></clipPath></svg>
    </div>
  </div>
</section>

my goal is to keep the white texts in its position, always at the same distance from the MASK text, so that it is responsive. How can this be achieved? Is there an only-css solution for this?

responsive css html
1 Answers

I would place the elements around the center then offset them using translate. I will also consider mask instead of clip-path to easily make it at the center.

You may need to adjust the viewBox of the SVG when changing the font-family

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  height: 100vh;
  background: #000;
  color: #fff;
}

.headline-wrapper {
  position: absolute;
  top: 50%;
  transform:translateY(-180%);
  left: 1.4%;
}

.headline {
  margin: 0;
  font-size: 8vw;
  font-weight: 600;
  text-transform: uppercase;
}

.description-wrapper {
  position: absolute;
  top: 50%;
  transform:translateY(120%);
  left: 1.4%;
}

.description {
  margin: 0;
  font-size: 4vw;
  font-weight: 400;
}

.video-wrapper {
  height: 100%;
   -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 70 12"><text font-family="monospace">MASK</text></svg>') center/contain no-repeat;
           mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 70 12"><text font-family="monospace">MASK</text></svg>') center/contain no-repeat;

}

.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.mask-text {
  text-anchor: start;
  font-size: 16vw;
  font-weight: bold;
}
<section>
  <div class="container">
    <div class="headline-wrapper">
      <h3 class="headline">Headline</h3>
    </div>
    <div class="description-wrapper">
      <p class="description">Description</p>
    </div>
    <div class="video-wrapper">
      <video class="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" muted loop autoplay="true"></video>
    </div>
  </div>
</section>

user_86203330
Related