나리야 분류
그누보드5.4 나리야빌더에서 box shadow 효과 적용하기
컨텐츠 정보
- 21,625 조회
- 0 추천
- 목록
본문
현재 제 홈페이지 본문 이미지에 적용된 box shadow 효과를 적용하는 방법에 대해 알려드리겠습니다.
우선 적용 전 이미지입니다.
위와 같이 사진이 흰색 배경이라면, 글과 이미지의 경계가 명확하지 않아 가독성이 떨어집니다.
이제 적용 후 이미지입니다.
위와 같이 흰색 배경인 사진도 글과의 경계가 명확해지면서 가독성이 올라갑니다.
이제 적용 방법을 알려드리겠습니다.
/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;
}
위와 같이 마진을 추가해줍니다.
이걸 넣어야 모바일에서도 박스 쉐도우 효과가 깨지지 않습니다.
참 쉽죠? ^^
-
등록일 2020.10.10그누보드 SMTP 외부메일 설정하는 방법댓글 26
-
등록일 2020.10.03그누보드5에 실시간 채팅 구축하기댓글 13
-
등록일 2020.09.26
-
등록일 2020.09.24도커로 메일서버 구축하기댓글 4
관련자료
-
서명우성짱의 NAS를 운영하고 있습니다.
저의 즐거움이 여러분의 즐거움이면 좋겠습니다.
댓글 0
등록된 댓글이 없습니다.
