CSS3 를 이용한 사진 갤러리 만들기

티스토리 뷰

프로그래밍/CSS 3.0

CSS3 를 이용한 사진 갤러리 만들기

쇠주는참이슬 2012. 3. 20. 15:40

귀차니즘으로 인한 설명은 주석으로 대체

<!DOCTYPE HTML>

<html>

<head>

<title>Gallery</title>

<style>

/* 썸네일 이미지를 올려놓을 갤러리 스타일 */

#gallery {

border: 10px solid #1D0C16; /* 굵은 테두리 */

height: 300px; /* 높이 */

width: 450px; /* 너비 */

margin-left: auto; /* 여백 자동 */

margin-right: auto;

overflow: visible; /* 오버플로일 경우 visible로 */

background: #272229; /* 배경색 */

-webkit-box-shadow: #272229 10px 10px 20px; /* 박스 그림자 */

-moz-box-shadow: #272229 10px 10px 20px;

filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);

box-shadow: #272229 10px 10px 20px;

}

/* 썸네일 목록 전체 스타일 */

#gallery ul{

margin-left:-30px; /* 갤러리 가운데에 콘텐츠가 올 수 있도록 */

}

/* 썸네일 각 항목에 대한 스타일 */

#gallery ul li {

list-style:none; /* 불릿 없앰 */

display:inline-table; /* 테이블 스타일로 배치*/

padding:10px; /* 안여백은 각각 10px로 */

}

/* 평소 큰 이미지 .pic 에 대한 스타일 */

#gallery ul li .pic{

-webkit-transition: all 0.6s ease-in-out; /* 웹킷 브라우저에서 트랜지션 효과가 나타나도록 */

opacity:0; /* 페이드아웃 효과 */

visibility:hidden; /* 처음에는 보이지 않게 */

position:absolute; /* 고정 위치 */

margin-top:10px; /* 상단 여백 */

margin-left:-20px; /* 왼쪽으로 20픽셀 이동해서 */

border:1px solid black; /* 검은색 테두리 그림 */

-webkit-box-shadow:#272229 2px 2px 10px; /* 박스 그림자 */

-moz-box-shadow:#272229 2px 2px 10px; /* 박스 그림자 */

filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5); /* 박스 그림자 */

box-shadow:#272229 2px 2px 10px; /* 박스 그림자 */

}

#gallery ul li .small:hover{

cursor:pointer;

}

/* 썸네일 이미지 위로 마우스 오버했을 때 큰 이미지의 스타일 * */

#gallery ul li:hover .pic {

width:320px; /* 너비 */

height:240px; /* 높이 */

opacity:1; /* 불투명하게 */

visibility:visible; /* 화면에 보임 */

float:right; /* 오른쪽으로 플로팅 */

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

'프로그래밍 > CSS 3.0' 카테고리의 다른 글

CSS가 정말 잘 소개되어있는 사이트 CSS - TRICKS (0)	2012.04.25
CSS2에서 DIV 라운드(라운딩) 처리하기 (0)	2012.04.02
포지션(POSITION) 알아보기 (0)	2012.03.20
http://css3generator.com/ (0)	2012.03.20
트랜지션 (Transition) (0)	2012.03.20

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

개인이 끄적끄적 거리는 블로그

티스토리 뷰

CSS3 를 이용한 사진 갤러리 만들기

'프로그래밍 > CSS 3.0' 카테고리의 다른 글

티스토리툴바