[짧은 CSS 팁] 유리에 반사되는 효과
-webkit-box-reflect 속성을 이용한 반사 효과 적용하기
에어데스크에 있는 디테일 하나를 소개하고자 합니다.
메뉴 아이콘을 자세히 보시면 아이콘 아래에 유리가 있는 것처럼 반사 효과를 보실 수 있습니다. 큰 화면에서 보면 아래와 같습니다.
위와 같은 효과를 내는 방법은 무척 간단합니다.(코드팬에서 보기)
일반적인 CSS 코드에 -webkit-box-reflect를 적용해주면 됩니다. 해당 속성은 순서대로 3개의 값을 받습니다.
1. 반사가 생길 방향(above, below, left, right)
2. 오프셋(크기값: px, pt, vw, vh, em, rem ...)
3. 마스크(오버레이 이펙트: linear-gradient, ...)
자세한 내용은 아래 스팩 문서를 통해서 확인하시면 됩니다.
실제 디자인에서 적용하는 방법은 멀어지는 방향으로 transparent 값이 증가하면서 흐려지는게 보편적입니다. 또한 above, left, right 보다는 below를 많이 사용합니다. 아무래도 반사를 일으키는 광원이 컴포넌트보다 위에 있는게 보편적인 인식이기 때문에 그렇습니다. 이를 거꾸로 above로 하게 되면 화면 하단에서 빛이 올라오는 모습이 될텐데 생각보다 어색한 것을 확인할 수 있습니다.
해당 속성의 치명적인 단점은 바로 호환성입니다. -webkit-이라는 부분에서 눈치채신 분들도 많으시겠지만, 해당 속성은 파이어폭스에서 전혀 작동하지 않습니다.
그 밖에 CSS를 통한 반사 효과에 대해 자세한 정보를 원하시면 위의 링크를 참고하시면 됩니다.
영문 버전: https://www.nomcss.com/css/css-glass-reflecting-effect
