Front End/CSS

[CSS] 포토샵 드롭섀도(Drop shadows) CSS로 변환 하기

TTOWA 2022. 12. 26. 19:09

1.포토샵 드롭섀도 CSS 전환 해주는 사이트로 접속합니다.

 

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

2.포토샵에서 해당 레이어 스타일을 확인 합니다. 

  • 드롭섀도 정보를 확인 합니다.
  • 컬러(R,B,G), 불투명도(Opacity), 거리(Angle), 거리(Distance), 스프레드(Spread),크기(Size)

 

반응형

3.전환 사이트에 확인한 드롭섀도 값을 입력 합니다.

  • 값을 입력 후 Convert to CSS3를 클릭 해줍니다.

4.전환 한 입력 값을 복사 후 사용합니다.

box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);

 

이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.

반응형