Image에 그림자 줘서 입체감 만들기

그림자없는 이미지를 받았다.

예를 들어 까까오 로고 이미지

그림자추가

이렇게 까까오 이미지를 받았는데 너무 밋밋해서 바탕과 구분되지 않는다.
그림자를 넣어보자.
그림자는 css의 box-shadow 를 주자

box-shadow: 5px 5px grey;

이미지가 아닌 element에 그림자 주기

이미지는 사실 정직한 사각형이었다.
그렇기 때문에 이미지에 그림자를 주면 위의 이미지처럼 숨겨졌던 이미지의 본모습이 그림자로 인해 드러나게 된다.

이미지에 border-radious를 줘서 둥글게 깎아버리고 싶지만 그것은 불가능한 일..

둥글어보였던 이미지와 똑같은크기의 태그를 만들어서 그림자를 주자
<div class="shadow"></div>
이렇게 눈에 보이지 않는 div를 만들고 position: absolute 를 사용해 까까오이미지 위에 딱 맞게 겹친다.

작업할 때는 div에 background-color 를 주어 까까오이미지랑 정확히 포개지는지 편하게 확인하는 걸 추천한다.

border-radious로 모서리를 둥글게 하는 것도 잊지 말기!

그림자에 모서리 추가

0 5px 5px grey;
border-radius: 9px;

그림자 안쪽으로 넣어서 입체감 주기

0 -5px 5px #dbc004 inset;
border-radius: 9px;