[CSS] 배경에 따라 바뀌는 블랜드 효과 만들기

mix-blend-mode 속성으로 드라마틱한 효과 연출하기

https://www.lamadone.studio/

첨부된 영상의 텍스트는 조금 독특합니다. 배경 이미지에 따라 색이 바뀝니다. 어떻게 만들 수 있을까요? 바로 mix-blend-mode 속성을 사용합니다.

영상 예시에 사용된 믹스 블랜드 모드

믹스 블랜드 모드

mix-blend-mode

믹스 블랜드 모드는 많은 웹 디자이너와 UI 디자이너가 좋아하는 속성이면서 또한 쉽게 무시되는 속성입니다. 이유는 믹스 블랜드 모드를 프로토타이핑 도구(스케치, 어도비 XD 등)에서 제대로 구현하기 어렵고, 이 속성이 존재하는지 모르는 디자이너가 많기 때문입니다. "알지 못하면 쓰지도 못한다." 믹스 블랜드 모드에 딱 어울리는 말입니다.

https://www.clockstrikestwelve.com/projects/polaroid

믹스 블랜드 모드는 대상 엘리먼트의 배경에 따라 변화하는 효과를 줄 때 사용합니다. 배경이 변화하는 환경에서 사용해야하므로 믹스 블랜드 모드의 대상이 되는 엘리먼트는 position: absolute; 또는 position: fixed;를 사용해 특정 위치에 떠있는 형태로 주로 사용합니다.

믹스 블랜드 모드는 다양한 효과를 제공합니다. 모든 효과를 머릿속에 외워서 쓰는건 어렵다보니 하나하나 적용해보면서 원하는 스타일을 찾아보시면 금새 각 효과의 느낌을 익히실 수 있습니다. 코드로 구현된 형태는 링크(https://codepen.io/hansanghun/pen/xxOyKpW)를 참고해주세요.

영문 버전 링크:

[CSS] background reactive text style. Mix-blend-mode — NOMCSS