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

 

 

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

 

 

 

 

퍼블리셔가 시안을 받을 때는 여러가지 툴이 있겠지만,

대부분은 psd로 받는다.

물론, 디자이너가 xd를 쓴다면 더할 나위 없다.

 

XD

 

 

위의 사진처럼 개발을 선택하고 링크 만들기를 누르면 웹으로 연동되는 링크가 생성되는데,

거기서 디자이너가 만든 모든 요소들을 css로 확인할 수 있게 된다.

 

바로 이렇게!

지금은 예시로 간단한 작업물을 가져와서 확인했지만,

네 모서리에 border-radius를 각각 다르게 준 박스라던가

다양한 그림자효과를 이용했다면 css 작업이 훨씬 수월해진다.

특히 그라데이션을 넣은 경우에도 그 수치가 바로 계산되어 나오기 때문에

xd로 시안 받을 때는 공수가 훨씬 줄어든다.

 

 

 

포토샵

 

포토샵으로 시안을 받을 때는 조금 더 세심히 살펴봐야한다.

특히 나는 그림자를 줄 때 더 난감해 하는 편이다.

box-shadow 속성은 오프셋(원 요소에서의 거리), blur, spread 를 통해 설정하는데,

나는 내가 직접 짜기보다는 box shadow generator를 이용하곤 했다.

box-shadow generator라고 검색하면 다양한 사이트들에서 쉽게 설정할 수 있다.

 

 

 

내가 자주 이용한 사이트

https://html-css-js.com/css/generator/box-shadow/

Box Shadow CSS Generator

여기는 박스쉐도우를 다양하게 만들어보고 코드도 볼 수 있다.

 

 

http://css3generator.com/

CSS3Generator by @RandyJensen

여기는 박스 쉐도우 뿐만 아니라 다른 css 속성들도 쉽게 확인 할 수 있다.

 

 

 

 

 

그런데,

이번에 더 좋은 사이트를 발견했다.

바로 이 포스팅을 작성한 계기!

 

 

http://psd-to-css-shadows.com/

Convert Photoshop Drop Shadows to CSS3 Box and Text Shadows

 

포토샵에서 drop shadow 수치를 확인하여 입력하면 css코드로 만들어 준다!!!

실제로 적용해보니 완벽하게 똑같진 않아도 어느정도 비슷하게 구현이 된다.

 

위의 두 사이트들은 내가 원하는 대로 직접 디자인을 할 수 있어 좋지만,

지정된 디자인을 그대로 따라야하는 경우에는 여기가 훨씬 유용하다.