CSS 텍스트 반전 효과

CSS로 간단하게 텍스트 색상을 반전하는 방법입니다.
얼마전에 올렸던 “흑백 이미지 만들기”와 같은, mix-blend-mode 속성을 이용한건데요,
값을 “difference”로 설정하면 아래 깔린 요소에 반전된 색상으로 나타낼 수 있어요.

See the Pen CSS Invert Text by 1 Minute Coding(1분코딩) (@1mincoding) on CodePen.

위 코드의 긴(?) CSS들은 모양 잡고, 애니메이션 만들고 그런 것들이고..
이 예제의 핵심은 딱 한 줄,

.text {
	mix-blend-mode: difference;
	/* ... */
}

이 부분이에요.

참고로 파이어폭스에서는 HTML 요소 여러 단계에 걸쳐 색상 혼합이 가능하지만, 크롬에서는 한 단계만 가능합니다. 역시나 IE에선 지원되지 않고요.
색상을 바꾸어가면서 테스트 해보세요~

브라우저 지원 확인[새창]