css 신박 효과 모음

mix-blend-mode

디파이에서 마우스가 잔상을 남기며 따라다니다가, 버튼에 마우스오버 시 배경 색이 파랑/빨강의 고대비로 반전되는 효과를 발견했다. (진짜 재밌는 인터랙션이 많다. 대단하다고 생각함..)

빨간색 포인터에 mix-blend-mode: difference를 사용하여 포인터가 지나가는 배경에 반전색을 준 것이다.

쉽게 생각해서, 포토샵에서의 blend mode를 CSS에서 입힌 것이다.
가끔 디자인 상에서 overlay를 사용한 효과가 있으면 난감했는데, CSS로도 표현 가능한지는 처음 알았다.