Tạo slideshow ảnh bằng CSS3

25/08/2012

Tạo slideshow ảnh bằng CSS3

Việc sở hữu một slideshow cho web sẽ khiến web của bạn trông đẹp mắt hơn và dễ dàng chuyển tại nội dung đến người xem hơn, tuy nhiên việc sử dụng các slideshow bằng javacritp hay flash sẽ làm cho trang của bạn trở nên nặng nề và load chậm hơn. Giờ đây với sự ra đời của CSS3, chúng ta có thể vẹn cả đôi đường khi mà css3 cung cấp cho bạn đầy đủ thuộc tính để tạo ra một slideshow trình diễn ảnh cực kỳ chuyên nghiệp. Các bạn có thể xem demo slideshow tại đây.
Chúng ta cùng làm từng bước tạo slideshow nào:

Bước 1 : HTML

<div id="container">

<!-- caps, non-existent items -->
<span id="slide1"></span>
<span id="slide2"></span>
<span id="slide3"></span>
<span id="slide4"></span>
<span id="slide5"></span>
<ul>
<!-- left arrow -->
<li>
<a href="#slide5"></a>
<a href="#slide4"></a>
<a href="#slide3"></a>
<a href="#slide2"></a>
<a href="#slide1"></a>
</li>
<!-- slides -->
<li>
<img src="images/0.jpg" alt="" />
<img src="images/1.jpg" alt="" />
<img src="images/2.jpg" alt="" />
<img src="images/3.jpg" alt="" />
<img src="images/4.jpg" alt="" />
<img src="images/5.jpg" alt="" />
</li>
<!-- right arrow -->
<li>
<a href="#slide5"></a>
<a href="#slide4"></a>
<a href="#slide3"></a>
<a href="#slide2"></a>
<a href="#slide1"></a>
</li>
<!-- tracker -->
<li>
<a href="#slide1"></a>
<a href="#slide2"></a>
<a href="#slide3"></a>
<a href="#slide4"></a>
<a href="#slide5"></a>
</li>
</ul>
</div>

Bước 2 : CSS
Tất cả cho việc tạo ra slideshow trình diễn là tại đây

span.cap {
display:none;
}
ul.slider {
margin:0 auto;
height:455px;
list-style:none;
position:relative;
width:706px;
}
ul.slider li {
float:left;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
ul.slider li.slides {
border:1px solid #888;
height:453px;
overflow:hidden;
position:relative;
width:604px;
z-index:10;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
ul.slider li.slides img {
display:block;
left:50%;
opacity:0;
position:absolute;
top:0;
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
-webkit-transform: scale(0.5);
transform: scale(0.5);

-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
ul.slider li.slides img.g1,
ul.slider li.slides img.g2,
ul.slider li.slides img.g3,
ul.slider li.slides img.g4,
ul.slider li.slides img.g5 {
margin-left:-302px
}
ul.slider li.lArrow,
ul.slider li.rArrow {
background-color:#bbb;
border:2px solid #888;
height:451px;
position:relative;
width:48px;
z-index:5;
}
ul.slider li.lArrow {
border-radius:100px 0 0 100px;
border-width:2px 0 2px 2px;
}
ul.slider li.rArrow {
border-radius:0 100px 100px 0;
border-width:2px 2px 2px 0;
}
ul.slider li.lArrow a,
ul.slider li.rArrow a {
display:block;
height:100%;
left:0;
position:absolute;
top:0;
width:50px;
}
ul.slider li.lArrow:hover {
background-color:#eee;
left:2px;
}
ul.slider li.rArrow:hover {
background-color:#eee;
left:-2px;
}
ul.slider li.track {
background-color:rgba(255,255,255,0.3);
clear:left;
height:25px;
margin-left:51px;
margin-top:-25px;
position:relative;
text-align:center;
width:604px;
z-index:20;
}
ul.slider li.track a {
background-color:#fff;
display:inline-block;
height:15px;
margin:5px;
width:10px;
border-radius:5px;
-moz-box-shadow:2px 1px 1px #000000;
-ms-box-shadow:2px 1px 1px #000000;
-webkit-box-shadow:2px 1px 1px #000000);
-o-box-shadow:2px 1px 1px #000000;
box-shadow:2px 1px 1px #000000;
}
ul.slider li.track a:hover {
background-color:#0f0;
}
span#slide1:target ~ ul.slider li.slides .g1,
span#slide2:target ~ ul.slider li.slides .g2,
span#slide3:target ~ ul.slider li.slides .g3,
span#slide4:target ~ ul.slider li.slides .g4,
span#slide5:target ~ ul.slider li.slides .g5 {
opacity:1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
ul.slider li.slides .g0 {
margin-left:-302px;
opacity:1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
span#slide1:target ~ ul.slider li.slides .g0,
span#slide2:target ~ ul.slider li.slides .g0,
span#slide3:target ~ ul.slider li.slides .g0,
span#slide4:target ~ ul.slider li.slides .g0,
span#slide5:target ~ ul.slider li.slides .g0 {
opacity:0;

-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
span#slide1:target ~ ul.slider li.track .tr1,
span#slide2:target ~ ul.slider li.track .tr2,
span#slide3:target ~ ul.slider li.track .tr3,
span#slide4:target ~ ul.slider li.track .tr4,
span#slide5:target ~ ul.slider li.track .tr5 {
background-color:#f00;
}
span#slide1:target ~ ul.slider li.lArrow a,
span#slide1:target ~ ul.slider li.rArrow a {z-index:10}
span#slide1:target ~ ul.slider li.rArrow .a2 {z-index:100}
span#slide1:target ~ ul.slider li.lArrow .a8 {z-index:100}

span#slide2:target ~ ul.slider li.lArrow a,
span#slide2:target ~ ul.slider li.rArrow a {z-index:10}
span#slide2:target ~ ul.slider li.rArrow .a3 {z-index:100}
span#slide2:target ~ ul.slider li.lArrow .a1 {z-index:100}
span#slide3:target ~ ul.slider li.lArrow a,
span#slide3:target ~ ul.slider li.rArrow a {z-index:10}
span#slide3:target ~ ul.slider li.rArrow .a4 {z-index:100}
span#slide3:target ~ ul.slider li.lArrow .a2 {z-index:100}
span#slide4:target ~ ul.slider li.lArrow a,
span#slide4:target ~ ul.slider li.rArrow a {z-index:10}
span#slide4:target ~ ul.slider li.rArrow .a5 {z-index:100}
span#slide4:target ~ ul.slider li.lArrow .a3 {z-index:100}
span#slide5:target ~ ul.slider li.lArrow a,
span#slide5:target ~ ul.slider li.rArrow a {z-index:10}
span#slide5:target ~ ul.slider li.rArrow .a6 {z-index:100}
span#slide5:target ~ ul.slider li.lArrow .a4 {z-index:100}

Các bạn thấy sao, cũng đâu thua kém những slideshow bằng flash hay jquery phải không bạn. 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é !
  • Linh Đàm

    hic, admin làm ơn cho em hỏi chèn css như thế nào ạ ?
    em tạo 1 thẻ div rồi chèn phần ở bước 1 vào html nhưng bước 2 em đặt css trong thẻ style ở phần header thì không thấy diều kì diệu gì xảy ra .Em đang tự học thiết kế nên nếu hỏi 1 câu ngớ ngẩn mong anh bỏ qua 😀