png 이미지에 그림자 넣는 법(with css)

png 이미지에 그림자를 넣어보자!

• css에는 filter속성이 존재하는데, 이 속성을 사용해 흐림 혹은 대비 효과 등을 줄 수 있다.
• 그런데 이 filter속성을 이용해 png이미지에 그림자도 넣을 수 있다! 한 번 알아보자 🙂

1. filter의 drop-shadow

• filter의 drop-shadow를 사용하여 요소에 그림자를 줄 수 있다.

  filter: drop-shadow(offset-x offset-y blur-radius color)

속성	설명
offset-x	그림자의 수평 거리 (음수는 요소의 왼쪽에 그림자 배치)
offset-y	그림자의 수직 거리 (음수는 요소 위에 그림자 배치)
blur-radius	그림자의 흐림 반경(값이 클수록 반경이 커지고 흐려짐, 음수는 허용X)
color	그림자의 색상

2. png에 그림자를 넣어보자

아래와 같은 사과 이미지를 준비해보았다! 이제 png에 그림자를 넣어보자

• 방법은 간단한다.
• 먼저 html에서 img 태그를 사용해 이미지를 나타낸다.

  <!--html-->
  <img src="https://image.flaticon.com/icons/png/512/5437/5437672.png" />

• 그 다음 css에서 filter: drop-shadow를 적용하면 된다.

  /*css*/
  img {
  width: 300px;
  height: 300px;
  filter: drop-shadow(10px 6px 6px #c3c3c3); /*그림자*/
  }

• 그러면 아래와 같이 이미지에 그림자가 생긴다.
  

  

• 사용한 코드와 결과는 codepen에서 볼 수 있다.

See the Pen png image에 그림자 넣기 by KumJungMin (@kumjungmin) on CodePen.

출처
아래 링크로 가면 더 자세히 알 수 있다!

• css reference, drop-shadow()
• runebook, drop-shadow()