Tạo Photo Gallery cực pro bằng CSS3

css tips, gallery, photo gallery, thiet ke web, thu thuat css, tự học css

Bạn cần quản lý hình ảnh trong website của bạn ? Bạn bối rối khi chưa rành về Flash hay javacript ? Đừng quá lo lắng về điều đó, vì hôm nay mình sẽ giúp các bạn tạo ứng dụng Photo Gallery cho web của bạn chỉ với CSS.

Bước 1 : HTML
Đây là code html đầy đủ cho kết quả gallery của chúng ta

<div id="container">

<div>

<a tabindex="1"><img src="images/1.jpg"></a>

<a tabindex="1"><img src="images/2.jpg"></a>

<a tabindex="1"><img src="images/3.jpg"></a>

<a tabindex="1"><img src="images/4.jpg"></a>

<a tabindex="1"><img src="images/5.jpg"></a>

<a tabindex="1"><img src="images/6.jpg"></a>

<a tabindex="1"><img src="images/7.jpg"></a>

<a tabindex="1"><img src="images/8.jpg"></a>

<a tabindex="1"><img src="images/9.jpg"></a>

<a tabindex="1"><img src="images/10.jpg"></a>

<a tabindex="1"><img src="images/11.jpg"></a>

<a tabindex="1"><img src="images/12.jpg"></a>

<span></span>

</div>

</div>

Bước 2 : CSS

Và đây là tất cả mà ứng dụng photo Gallery chúng ta cần

.container {

background:#ddd;

margin:20px auto;

padding:20px;

position:relative;

width:700px;



border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;



box-shadow:1px 1px 5px #111;

-moz-box-shadow:1px 1px 5px #111;

-webkit-box-shadow:1px 1px 5px #111;

}



/* css3 photo gallery styles */

.gallery {

width:610px;

margin:0 auto;

}

.gallery a {

display:inline-block;

height:150px;

position:relative;

width:200px;

}

.gallery a img {

border:5px solid #fff;

cursor:pointer;

display:block;

height:100%;

left:0px;

position:absolute;

top:0px;

width:100%;

z-index:1;



-moz-user-select: none;

-khtml-user-select: none;

user-select: none;



-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

box-sizing:border-box;



-webkit-transition-property:width, height, top, bottom, left, right, z-index, border;

-webkit-transition-duration:0.5s;

-moz-transition-property:width, height, top, bottom, left, right, z-index, border;

-moz-transition-duration:0.5s;

-o-transition-property:width, height, top, bottom, left, right, z-index, border;

-o-transition-duration:0.5s;

transition-property:width, height, top, bottom, left, right, z-index, border;

transition-duration:0.5s;

}

.gallery a:focus img {

border:15px solid #fff;

cursor:default;

height:250%;

position:absolute;

width:250%;

z-index:25;



box-shadow:1px 1px 5px #888;

-moz-box-shadow:1px 1px 5px #888;

-webkit-box-shadow:1px 1px 5px #888;

-webkit-transition-property:width, height, top, bottom, left, right, z-index, border;

-webkit-transition-duration:0.5s;

-moz-transition-property:width, height, top, bottom, left, right, z-index, border;

-moz-transition-duration:0.5s;

-o-transition-property:width, height, top, bottom, left, right, z-index, border;

-o-transition-duration:0.5s;

transition-property:width, height, top, bottom, left, right, z-index, border;

transition-duration:0.5s;

}



/* custom focus rules */

.gallery a:focus:nth-child(3n+1) img {

left:150px;

}

.gallery a:focus:nth-child(3n+2) img {

left:-50px;

}

.gallery a:focus:nth-child(3n+3) img {

left:-250px;

}

.gallery a:focus:nth-child(-n+3) img {

top:140px;

}

.gallery a:focus:nth-child(n+7) img {

top:-150px;

}

.gallery a:focus:nth-child(n+10) img {

top:-295px;

}



/* extra close layer */

.gallery .close {

background:transparent;

cursor:pointer;

display:none;

height:352px;

left:170px;

position:absolute;

top:160px;

width:500px;

z-index:30;

}

.gallery a:focus ~ .close {

display:block;

}

Để có thể chạy ứng dụng này trên IE9 các bạn thêm đoạn code sau ngay phía dưới thẻ <head>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

Hy vọng các bạn sẽ có thêm nhiều lựa chọn cho việc tạo các ứng dụng Photo Gallery. 

 

 HỖ TRỢ TRỰC TUYẾN