04/10/2018, 20:00
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 ...
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;
awidth: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 {
awidth:610px;
margin:0 auto;
}
.gallery a {
display:inline-block;
height:150px;
position:relative;
awidth:200px;
}
.gallery a img {
border:5px solid #fff;
cursor:pointer;
display:block;
height:100%;
left:0px;
position:absolute;
top:0px;
awidth: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:awidth, height, top, bottom, left, right, z-index, border;
-webkit-transition-duration:0.5s;
-moz-transition-property:awidth, height, top, bottom, left, right, z-index, border;
-moz-transition-duration:0.5s;
-o-transition-property:awidth, height, top, bottom, left, right, z-index, border;
-o-transition-duration:0.5s;
transition-property:awidth, 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;
awidth: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:awidth, height, top, bottom, left, right, z-index, border;
-webkit-transition-duration:0.5s;
-moz-transition-property:awidth, height, top, bottom, left, right, z-index, border;
-moz-transition-duration:0.5s;
-o-transition-property:awidth, height, top, bottom, left, right, z-index, border;
-o-transition-duration:0.5s;
transition-property:awidth, 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;
awidth: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>
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: Css
Bài viết được đăng bởi webmaster
-
dâu
-
Guest
-
Doc Ac
-
