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">

 
<span id="slide1"></span>
<span id="slide2"></span>
<span id="slide3"></span>
<span id="slide4"></span>
<span id="slide5"></span>
<ul>
 
<li>
<a href="#slide5"></a>
<a href="#slide4"></a>
<a href="#slide3"></a>
<a href="#slide2"></a>
<a href="#slide1"></a>
</li>
 
<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>
 
<li>
<a href="#slide5"></a>
<a href="#slide4"></a>
<a href="#slide3"></a>
<a href="#slide2"></a>
<a href="#slide1"></a>
</li>
 
<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;
awidth: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;
awidth: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;
awidth:48px;
z-index:5;
}
ul.slider li.lArrow {
border-radius:100px 0 0 100px;
border-awidth:2px 0 2px 2px;
}
ul.slider li.rArrow {
border-radius:0 100px 100px 0;
border-awidth:2px 2px 2px 0;
}
ul.slider li.lArrow a,
ul.slider li.rArrow a {
display:block;
height:100%;
left:0;
position:absolute;
top:0;
awidth: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;
awidth:604px;
z-index:20;
}
ul.slider li.track a {
background-color:#fff;
display:inline-block;
height:15px;
margin:5px;
awidth: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: Css

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