개인적으로 빠른 퍼블리싱도 어느정도 템빨이라고 생각합니다.
디자인을 포토샵으로 받아, box-shadow를 넣을라치면, 일일이 계산하기 힘듭니다. (물론 피그나마 제플린 같은 툴을 쓴다면 굳이 이 사이트를 찾을필요가 없겠지만, 포토샵기준으로 작업을 해야하는 분을 위해,, )
그런 복잡한 계산을 해결해줄 아주 좋은 사이트를 소개합니다.
* box-shadow/text-shadow 정확하게 넣기
http://psd-to-css-shadows.com/
Convert Photoshop Drop Shadows to CSS3 Box and Text Shadows
CSS3 Code box-shadow: offset-x offset-y blur-radius spread-radius rgba(0, 0, 0, opacity) inset; text-shadow: offset-x offset-y blur-radius rgba(0,0,0 opacity); box-shadow: offset-xpx offset-ypx blur-radiuspx spread-radiuspx rgba(0, 0, 0, opacity) inset; te
psd-to-css-shadows.com
- 포토샵내의 shadow 수치만 넣어주면 자동으로 css 값으로 변환시켜주는 아주 효자 입니다.
여러 변환 사이트가 있지만, 이 사이트가 가장 효자라고 생각합니다.
* gradient 정확하게 넣기
CSS Gradient — Generator, Maker, and Background
As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
cssgradient.io
- gradient 도 첫값, 끝값만 알고있으면 아주 훌륭하게 변환시켜주는 사이트입니다.
'Publishing > 퍼블리싱 꿀팁' 카테고리의 다른 글
| [기타] 이미지 추출하기 (0) | 2022.12.15 |
|---|---|
| [기타 꿀팁] 파비콘 만들기 (0) | 2022.07.13 |
| [css] 반응형 시에도 이미지 비율 유지하기 (feat. object-fit:cover) (0) | 2022.07.07 |
| [기타 꿀팁] 퍼블리싱시 랜덤 이미지 빠르게 가져오기 (0) | 2022.07.06 |
| [기타 꿀팁]각종 기기 해상도 및 뷰포트 사이즈 알수있는 사이트 (0) | 2022.07.04 |
