TWICE


TWICE
CHAEYOUNG


위 예시처럼 텍스트 배경에 그래디언트를 넣거나 이미지를 넣을 때 사용합니다.

#element {
-webkit-background-clip: text;
color: transparent;
}

보이는 것처럼, 꽤 간단하게 사용할 수 있습니다.

-webkit-background-clip이지만, Firefox에서도 작동합니다.

텍스트를 선택하면 배경이 변경되니, 위 예시처럼 user-select: none과 함께 사용하시는 걸 추천합니다.

또한, 위 예시처럼 복잡한 이미지를 배경으로 넣으면 굉장히 산만한 효과를 연출할 수 있기 때문에, 단순한 패턴이 반복되는 이미지를 사용하시는 게 제일 무난하지 싶습니다.

profile

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)

  1. 이런게 가능하군요!! 대박이네요~

    https://imgur.com/GUWjORV.mp4

    문구와 사진 선택을 잘해서 응용하면

    포스팅 본문에 사용해도 괜찮을거 같네요 🙂

    https://imgur.com/8muOUPc.mp4

    1. 적당한 이미지를 고르고, 한 페이지에 하나 정도만 넣으면 꽤 괜찮은 효과를 볼 수 있어요 ㅎㅎ 많아지면 정신 사납더라고요...ㅋㅋㅋ

      배경에 움짤을 써야 해서 로딩이 좀 느리단 게 흠입니다 ㅠㅠ

      https://contents.vryjam.com/Irlyz5r2KEXFYui.mp4