Hướng dẫn tạo Photo Gallery cực pro bằng CSS3

25/08/2012

Hướng dẫn tạo Photo Gallery cực pro bằng CSS3

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. Các bạn có thể xem demo bài viết tại đây.

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>

<!--&#91;if lt IE 9&#93;>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->

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. Chúc các bạn thành công !

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • dâu

    Cái đoạn CSS để vô phần nào vậy bạn??? Dưới phần ah???? Bạn hướng dẫn rõ giúp mình nhé!

    • Guest

      Bạn có thể để ở cùng với file html hoặc là một file bên ngoài tùy bạn, hoặc không bạn có thể tham khảo code của trang demo đó bạn

    • Bạn có thể xem demo là hiểu rõ thôi bạn, nhấn Ctrl + U để xem source code