갤러리 스킨 (이미지 그림자 효과) 정보
게시판 갤러리 스킨 (이미지 그림자 효과)관련링크
첨부파일
테스트한 버전5.5.8.2.6
호환 가능 버전5.4이상
본문
위 스킨을 기본으로 리스트만 조금 바꾼 스킨입니다.
테스트 할겸 만들었다가 최근게시물이나 다른곳에도 응용하면 좋을것 같아 원하시는분 있으시면
쓰시라고 올립니다.
업로드한 이미지를 배경이미지로 깔고 가상선택자 :before 를 활용하여 배경이미지를 상속받고
blur 처리를 해서 그림자 형태로 깔았습니다.
마우스 오버시 진하게 보이게끔 설정해뒀구요. 마우스 오버를 안했을때도 좀더 진하게 보이길 원하시면
.gallery-list .gallery-list-img:before 의 opacity 속성이 기본이 0.5로 설정돼 있는데 이부분을 변경하시면 됩니다.
참고로 한가지 단점이 있는데 :before를 사용해서 백그라운드를 동일하게 상속받고 그림자 형태로 깔기 위해 z-index:-1 을 주었기 때문에 갤러리를 감싸고 있는 상위레이어에서 배경색이나 이미지가 깔려있으면 그림자가 제대로 나오지 않을겁니다.
이 부분을 해결하려면 따로 :before를 사용하지 않고 따로 레이어를 만들어서 이미지 배경을 동일하게 넣어주고 absolute로 포지션 잡아준뒤에 z-index를 마이너스값을 사용하지 않고 앞의 이미지 z-index 값을 높여주면 해결될겁니다. 테스트용으로 만든걸 올리는거라 이 부분은 따로 올리지 않겠습니다.
추천
17
17
댓글 전체

감사 합니다.
감사합니다.

감사합니다

감사합니다
감사합니다
공개해 주셔서 감사합니다.
감사합니다
좋아요 추천합니다
감사합니다.
감사합니다. 잘 응용해 보겠습니다. ^^

감사합니다~~^^*

감사합니다!

감사합니다

모바일로 화면 축소시 게시물이 한줄에 한개씨 출력되어지는데 2개씩 출력되게 할려면 어떻게해야할가요?

감사합니당!!
감사합니다.