[CSS] 배경 색상마다 글자색을 다르게 해주는 mix-blend-mode

위와 같이 배경에 따라 글자의 색이 자동적으로 변하는 신기한 CSS 코드 'mix-blend-mode'가 있다.

 

HTML

  <div class="section">

    <div class="up"></div>

    <div class="down"></div>

    <div class="letter"><p>안녕하세요~</p></div>

  </div>

 

CSS

.section{

  width: 100vw;

  height: 100vh;

  position: relative;

}

.up{

  width: 100%;

  height: 50%;

  background-color: black;

}

.down{

  width: 100%;

  height: 50%;

  background-color: white;

}

.letter{

  font-size: 80px;

  text-align: center;

  mix-blend-mode:difference;

  color: white;

  rotate: 90deg;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 100;

  animation: margin 5s infinite;

  font-weight: bold;

}

@keyframes margin {

  0%{

    margin-top: 0;

  }

  50%{

    margin-top: 300px;

  }

  100%{

    margin-top: 0;

  }

}

 

기본적으로 배경색을 검정색과 흰색으로 반반 맞춰주고 글자를 띄워 위아래로 애니메이션을 준 다음 mix-blend-mode를 사용하여 배경에 따라 글자 색이 흰색이 되었다가 검정색이 되게 하였다.

 

포토샵을 사용할 줄 아시는 분이라면 블랜드모드라는 존재를 알 것이다. 그 포토샵의 블랜드 모드와 똑같다. mix-blend-mode에는 여러가지가 있는데 이건 아래 링크에서 참고바란다.

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

mix-blend-mode - CSS: Cascading Style Sheets | MDN

 

mix-blend-mode를 사용하면 재밌고 신비한 웹사이트를 만드는데 유용하게 쓰일 수도 있을 것 같다. 흰색, 검정색밖에 써보지 않았지만 다양한 색상들을 써보면서 어떤 모드에서 배경색과 글자색을 썼을 때 이런 조합이 나올 수 있구나를 실험해보면 재미있는 공부가 될 것 같다.