작업실
나리야 분류

그누보드5.4 나리야빌더에서 box shadow 효과 적용하기

컨텐츠 정보

본문

현재 제 홈페이지 본문 이미지에 적용된 box shadow 효과를 적용하는 방법에 대해 알려드리겠습니다.


우선 적용 전 이미지입니다.


4be450638fbbbada2c8be12f2669e051_1600777636_0421.png


위와 같이 사진이 흰색 배경이라면, 글과 이미지의 경계가 명확하지 않아 가독성이 떨어집니다.




이제 적용 후 이미지입니다.


4be450638fbbbada2c8be12f2669e051_1600777665_9267.png
 


위와 같이 흰색 배경인 사진도 글과의 경계가 명확해지면서 가독성이 올라갑니다.



이제 적용 방법을 알려드리겠습니다.


/skin/board/NB-Basic/style.css 파일에서


25번째 줄에 있는



#bo_v_con img {
	max-width:100%;
	height:auto;
}


위 내용을



#bo_v_con img {
	max-width:100%;
	height:auto;
	-webkit-box-shadow: 0px 0px 12px 3px rgba(163,163,163,0.93);
	-moz-box-shadow: 0px 0px 12px 3px rgba(163,163,163,0.93);
	box-shadow: 0px 0px 12px 3px rgba(163,163,163,0.93);
}


위와 같이 box-shadow 효과를 추가해줍니다.



그리고 44번째 줄 근처에 있는 



#bo_v_img a.view_image {
	display:block;
}


위 내용을



#bo_v_img a.view_image {
	display:block;
	margin:1.0rem;
}


위와 같이 마진을 추가해줍니다. 


이걸 넣어야 모바일에서도 박스 쉐도우 효과가 깨지지 않습니다.



참 쉽죠? ^^

관련자료

  • 서명
    우성짱의 NAS를 운영하고 있습니다.

    저의 즐거움이 여러분의 즐거움이면 좋겠습니다.

댓글 0
등록된 댓글이 없습니다.
전체 157 / 1 페이지
RSS
알림 0