mix-blend-mode
awwards나 웹을 보면 글자가 다른 요소랑 겹칠때 색상이 대비되는 효과를 자주 보았다.
난 대단한 스크립트가 들어가는건가 했는데 css 속성 하나만 주면 끝나는 거였다.
/* 키워드 값 */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
/* 전역 값 */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;폰트나 요소에는 background, color로 적용할 수 있고
svg는 가장 최하단에 있는 태그의 fill에 색상을 적용하고 mix-blend-mode 속성을 줘야 한다.
간단하게 트렌디한 요소의 디자인을 만들 수 있어 좋은 속성인 것 같다.
