[css] 포토샵 drop shadow를 css로 표현하기 ( feat. xd로 css 코드 보기 )

포토샵 drop shadow를 css로 표현하기 ( feat. xd로 css 코드 보기 ) 퍼블리셔가 시안을 받을 때는 여러가지 툴이 있겠지만, 대부분은 psd로 받는다. 물론, 디자이너가 xd를 쓴다면 더할 나위 없다. XD 위의 사진처럼 개발을 선택하고 링크 만들기를 누르면 웹으로 연동되는 링크가 생성되는데, 거기서 디자이너가 만든 모든 요소들을 css로 확인할 수 있게 된다. 바로 이렇게! 지금은 예시로 간단한 작업물을 가져와서 확인했지만, 네 모서리에 border-radius를 각각 다르게 준 박스라던가 다양한 그림자효과를 이용했다면 css 작업이 훨씬 수월해진다. 특히 그라데이션을 넣은 경우에도 그 수치가 바로 계산되어 나오기 때문에 xd로 시안 받을 때는 공수가 훨씬 줄어든다. 포토샵 포토샵으..

2021.11.25