블로그
티스토리 이미지에 그림자 효과내기
Mile's
2014. 1. 22. 14:02
티스토리는 설치형 블로그로써 다양한 스킨의 제작과
사용자 입맛에 맞게 HTML/CSS를 수정 할 수 있는 장점이 있습니다.
그 중 간단한 CSS수정으로 이미지에 다음과 같이 그림자 효과를 넣는 방법에 대해 알려드리겠습니다.
관리자 페이지의 HTML/CSS 편집 탭으로 들어가게 되면 style.css가 존재하는데
다음과 같이 imageblock클래스에 box-shadow를 추가해주시면 됩니다.
상세 설명을 드리면
5px - 가로길이 양수인경우 오른쪽, -숫자인경우 왼쪽으로
5px - 세로 양수인경우 밑으로, -숫자인경우 위로
10px - 그림자 길이인데 숫자가 낮으면 그림자의 흐림효과가 적으면서 길이가 짧고
높을수록 많이 흐려지고 거리도 멀어집니다. -숫자 값은 인식되지 않습니다.
rgba - 순서대로 r, g, b, 불투명도 입니다. 지금은 rgb값을 사용안하므로 0으로 지정하고
0.3의 불투명도 입니다. 값이 높을수록 그림자가 진해지며 -값은 적용되지 않습니다.
값을 수정하면서 마음에 드는 그림자 효과를 만들어보세요. ^^