섀도우 효과
-
CSS로 보다 아름다운 Shadow 만들기(filter: box-shadow vs drop-shadow)CSS 2021. 9. 21. 23:40
CSS로 섀도우 효과를 많이 사용하실 텐데요. 디자이너가 직접 디자인 된 섀도우를 그대로 구현하는 경우도 있고, 백오피스 등 다양한 사내 툴들을 만들 때는 본인이 직접 예쁜 섀도우를 만들어서 적용해주어야 합니다. 미세하게 보이는 섀도우 하나가 전체 어플리케이션의 품질을 결정하는 것을 알고 계시나요? 그렇기에 보다 일반적이지 않은 최적화된 섀도우로 보여주는 것이 중요합니다. 위의 그림과 같이 만들기 위해서 box-shadow, hsl() 색상에 대한 선행지식이 필요합니다. 그림자는 일반적으로 고도를 표현하고 그림자가 클수록 고도가 높다는 것을 의미합니다. 이는 사람들로 하여금 요소가 입체적으로 떠있다는 느낌을 전해주기도 하지요. 때로는 다른 세계로 통하는 문인 것처럼 촉각적인 느낌과 환상적인 느낌을 사용자..