masks

css masks

by trentHarlem

HTML

<div class="container">
  <div id="masked">
    <h1 class="suh">
    SomeTHING
    </h1>
  </div>
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
  height: 100vh;
  display: grid;
  justify-items: center;
  align-items: center;
}

#masked {
  background-image: url(https://picsum.photos/id/1002/1200/400);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;

  /*   -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); */
}

.suh {
  font: bold 150px Impact, sans-serif;
}

/* 
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);

clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); */

JavaScript

console.log('hello')