1월 3일에 작성한 글

css는 참 신기하다

다 아는 것 같다가도 모르는게 계속 나온다

가끔 외국 포트폴리오 사이트 보다보면 배경이 바뀜에 따라서 글자색이 자동으로 변하는 효과를 볼 수 있었는데, 그때는 이렇게 간단하게 css로 구현할 수 있는지 몰랐다.

아까 문득 궁금해져서 개발자모드로 싸이트를 뜯어보다 mix-blend-mode라는 css를 배웠다.

/* keyword values */
mix-blend-mode: normal;
mix-blend-mode: screen;
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: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
mix-blend-mode: multiply;
mix-blend-mode: overlay;
mix-blend-mode: hue;

/* global values */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

마치 포토샵 효과처럼 css로도 이렇게 여러가지 모드의 효과를 줄 수 있는데,

그 중에서 내가 궁금했던 효과는 difference 모드였다.

hover효과로 간단히 구현해보았다.

(hover기 때문에 밑에 예시는 pc에서만 확인가능)

See the Pen mix-blend-mode : difference by minzcho (@minzcho) on CodePen.

마우스를 올리면 배경이 흰색으로 변하면서,

텍스트가 자동으로 반대색 (흰색->검정색)으로 변하는 걸 볼 수 있다.

따로 text에 color값을 일일히 바꾸지 않아도,

mix-blend-mode: difference; 한 줄로 해결가능한 것이다.

매우매우 개꿀이쥬 ? 개꿀 개이득 ?

이런걸 이제야 알다니..

더 열심히 공부해야겠다...