css 텍스트 컬러 반전 효과

 

 

 

 

✅ 참고

텍스트와 배경 색상에 겹치는 부분이 반전되는 효과가 있어 찾아보았다.

웹 페이지에 적용하면 세련된 느낌을 주기도 하더라구여

 

 

 

📌 css 

mix-blend-mode: difference;

간단하게 css로 보여질 수 있었다.

css 속성중 mix-blend-mode 를 이용한 효과

포토샵에서 레이어를 이용해 요소들을 효과를 주는 거는 역할과 비슷하게 생각하면 된다.

 

 

 

 

 

 

📌 참고

이외 다른 여러 속성스타일도 있으니 참고

 

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

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

 

 

 

 

 

📌 브라우저 지원

역시 익스를 제외한 모든 브라우저에서는 사용이 가능하다.

(익스야 지금은 없기도 하지만)

 

 

 

 

🔥 최종

https://jsfiddle.net/owynu4tg/

Edit fiddle - JSFiddle - Code Playground

mix-blend-mode: difference 을 이용한 데모 버전을 만들어 보았음

 

 

 

 

---

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

https://web.dev/learn/css/blend-modes/