CSS로 이미지에 그림자 넣기

*알림: 티스토리 사용자를 위해 글을 약간 수정했습니다.



포토샵 등의 이미지 툴이 아니라 CSS만을 이용해 이미지에 그림자를 넣는 방법입니다. 기본적으로 예전 홈페이지에 썼던 글과 같은 내용입니다만.

뭐  일단 다음 두 그림을 비교해봅시다. 버섯보다 빛나는 티파니양입니다 *-_-*

위 두 그림에 사용된 이미지 파일은 물론 동일한 파일입니다.


자, 원리는 알 필요 없고-_- 사용방법은... 먼저 다음 그림자 이미지 파일을 다운받아 적당한 곳에 업로드해둡시다. 파일명은 편의상 trans-shadow.png로 저장해주세요. 티스토리 사용자라면 관리>스킨>직접올리기에서 업로드합니다.

그리고 스타일시트에 다음 코드를 삽입합니다. 티스토리의 경우는 관리>스킨>HTML/CSS 편집에서 style.css의 아무곳에나-_- 붙여넣으면 됩니다. 코드의 출처는 끝에 쓰겠습니다.

.img-shadow {
float:right;
background: url(위에서 다운받은 그림자 파일의 주소) no-repeat bottom right; /* Most major browsers other than IE supports transparent shadow. Newer release of IE should be able to support that. */
}

.img-shadow img {
display: block; /* IE won't do well without this */
position: relative; /* Make the shadow's position relative to its image */
padding: 5px; /* This creates a border around the image */
background-color: #fff; /* Background color of the border created by the padding */
border: 1px solid #cecece; /* A 1 pixel greyish border is applied to the white border created by the padding */
margin: -6px 6px 6px -6px; /* Offset the image by certain pixels to reveal the shadow, as the shadows are 6 pixels wide, offset it by that amount to get a perfect shadow */
}

티스토리의 경우 위에서 다운받은 그림자 파일의 주소에 ./images/trans-shadow.png를 써주면 끝입니다. 그리고 그림자를 넣고 싶은 이미지를 삽입할 때에는 다음과 같이 쓰면 됩니다.

<span class="img-shadow"><img src="이미지 파일의 주소" /></span>

이때 이미지는 무조건 오른쪽으로 날아가버리림에 유의하세요(float:right 때문). 그리고 IE에서는 예상치 못한 문제로 제대로 안 나올 가능성이 있습니다.

티스토리 사용자라면 글쓰기 화면에서 이미지 버튼을 눌러 이미지를 업로드하고, html 모드로 들어가서 이미지 삽입 코드, 다시 말해 [##_1C|어쩌고...]앞뒤를 span 태그로 감싸면 됩니다. 이때 반드시 왼쪽(L)이나 오른쪽(R) 정렬이 아닌 가운데 정렬(C)로 올려야 합니다. 그리고 자막(캡션)을 넣을 경우 액자와 그림자가 제대로 나오지 않습니다. 자막을 넣지 않는 것을 추천합니다. 또한, 스킨에 따라 제대로 표시되지 않을 수도 있습니다. 제 스킨의 경우는 .entry 구역(div)에 외곽선(border)이 있을 경우 IE에서 제대로 표시되지 않는 문제가 있길래 .entry 구역의 외곽선을 지웠습니다. 참고하세요.



이상 사용한 코드의 출처는 다음 문서입니다.
http://www.alexallied.com/tutorials/learn-how-to-apply-shadow-automatically-to-an-image-using-css

이 방법 말고 좀더 정교하고 좀더 복잡한 방법도 있긴 합니다. 다음 문서.
http://theshapeofdays.com/2005/11/29/my-contribution-to-the-css-shadow-kerfuffle.html