Project

  • commandplusK
  • /
  • CtrlplusK
 
notion image
 

transparent-gradient

투명 그라디언트 NPM 패키지

 

공식독스

링크 [https://transparent-gradient.netlify.app/]

NPM

링크[https://www.npmjs.com/package/transparent-gradient]

 

이런 문제점이 있었어요 😅

notion image

L사 백화점 app 프로젝트를 진행중 디자이너가 blur에 투명을 서서히 주는 그라디언트로 디자인 시안을 주었습니다.

google, stackoverflow등 모든 곳에서 예시들은 고정된 색상에 그라디언트를 주거나, 배경 이미지의 평균 색상 값을 가져와서 작업하는 가짜 투명 그라디언트를 만드는 식이였습니다. 그러나 이번 디자인 식당마다 뒤에 이미지가 배경이 다르며 글씨 뒷면이 투명으로 되어야 하는 작업이었습니다.

오랜 시간 고민을 하였고 저는 이것을 css 마스크 작업으로 처리하였습니다.

 

마스크의 원리

마스크는 요소의 특정 부분을 가리고 다른 부분은 보이게 하는 데 사용됩니다. 여기서는 linear-gradient를 사용하여 마스크가 검정색에서 투명으로 점진적으로 변하는 효과를 주고 있습니다.

  • 검정색: 불투명한 부분으로, 이 부분은 요소가 보입니다.
  • 투명색: 투명한 부분으로, 이 부분은 요소가 보이지 않습니다.

따라서, linear-gradient를 사용하여 요소의 특정 방향으로 점진적으로 투명해지게 설정하면, 해당 부분은 투명하게 되어 요소의 일부가 보이지 않게 됩니다.

 

TOOLS

Webpack, js, ts