블로거(blogger) 포스트 이미지 가장자리에 그림자 효과 주기

그림1

블로거에서 포스트에 이미지를 삽입하면, 템플릿에 따라서 그림1처럼 이미지의 가장자리에 그림자로 경계선 효과가 나타나기도 합니다. 동적뷰 같은 경우에는 이 기능이 기본으로 제공되고 있지만, 일반 템플릿에선 해당 기능이 지원되지 않는 경우도 있습니다.

아래의 태그는 이미지 그림자 효과를 삭제한 경우, 또는 그림자효과가 없는 템플릿에서 해당 효과를 추가할 수 있도록 해주는 코드입니다.

 .post-body img {   
 padding: 1px;   
 background: transparent !important;   
 border: 1px solid transparent !important;   
     
 -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);   
 -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);  
 -ms-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);    
 box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);   
 }   

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.

그림자의 두께나 위치 등을 조정하고자 할 경우, 아래의 글들을 참고하시기 바랍니다.


! 관련 글.

CSS box-shadow 이해하기
CSS에서의 색상 설정 - 그림자를 가능한 엷게 설정하려면 rgba 색상을 이용.