2. CSS
3.2. Thêm hiệu ứng cho slider bằng CSS3
Sau khi tạo HTML, sẽ thấy ảnh và toàn bộ nội dung của Slider nằm cách lề trái một khoảng, cần dịch chuyển chúng lại sát lề với đoạn code.
Kéo phần tử ra sát lề * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
Ẩn Radio Buttons
Radio Buttons là những nút tròn 1,2,3… để lựa chọn nhưng trong mẫu slider này không cần đến thế nên sẽ ẩn nó đi.
Ẩn Radio Buttons
Để ẩn Radio Buttons dùng đoạn CSS3 này:
Làm đẹp Label
Tiếp theo, khi đã ẩn Radio Buttons, cần làm đẹp cho các Label bằng đoạn CSS3 này: /*FORM*/ input { position: absolute; top: -9999px; left: -9999px; }
label { display: block; float: left; height: 330px; width: 50px; margin-bottom: 10px; overflow: hidden; background: #999; text-align: center;
font: 14px/50px Helvetica, Verdana, sans-serif;
-webkit-transition: width 1s ease, background 0.5s ease; -moz-transition: width 1s ease, background 0.5s ease; -o-transition: width 1s ease, background 0.5s ease; -ms-transition: width 1s ease, background 0.5s ease; transition: width 1s ease, background 0.5s ease; }
Nếu thành công sẽ được như thế này:
Có thể thay #999 bằng màu theo mình muốn. Tiếp đó cần dịch chuyển lại các Label cho bằng hàng:
ul {
list-style: none; }
#rad2 + label { background: #888;
-webkit-transition: width 1s ease, background 0.5s ease; -moz-transition: width 1s ease, background 0.5s ease; -o-transition: width 1s ease, background 0.5s ease; -ms-transition: width 1s ease, background 0.5s ease; transition: width 1s ease, background 0.5s ease; }
label:hover, #rad2 + label:hover { background: #232323;
color: #fff; cursor: pointer; }
Tiếp đó cần tạo hiệu ứng ẩn hiển nội dung của Slider:
Vậy là slider cho website đã xong chỉ với một số đoạn code HTML và CSS. Đây chỉ là một Sider cho website đơn giản. Trong bài này chỉ sử dụng slider cho website bằng HTML và CSS3 nên không được đẹp cho lắm, nếu sử dụng thêm Javascript thì sẽ ấn tượng hơn nhiều.
/*SLIDES*/ .accslide { display: block; height: 330px; width: 0px; padding: 10px 0; float: left; overflow: hidden; color: #333; background: #fff;
font: 12px/1.5 Helvetica, Verdana, sans-serif; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; }
.accslide p, h2, img { width: 420px; padding-left: 10px; }
Vậy là đã hoàn thành xong một slider cho website sử dụng HTML và CSS3 đơn giản, với đầy đủ tính năng như play, pause, navigation với nhiều hiệu ứng khác nhau.
.accslide img { margin-top: 10px; } input[type="radio"]:checked ~ .accslide { width: 450px; }
Trong bài này chỉ sử dụng slider cho website bằng HTML và CSS3 nên không được hoàn chỉnh cho lắm, nếu sử dụng thêm Javascript thì sẽ ấn tượng hơn nhiều.
Kết luận
- Ứng dụng đáp ứng được yêu cầu trong giai đoạn phát triển website. - Ứng dụng kết hợp được với các thẻ HTML5 và CSS3.
Hướng phát triển
Có thể tìm hiểu rộng thêm những ứng dụng và chức năng mà CSS3 và HTML5 đã mang đến cho chúng ta.
Như vậy sau một thời gian làm việc nghiêm túc và sự giúp đỡ tận tình của cô giáo
Nguyễn Thị Hạnh đã hướng dẫn em hoàn thành đề tài. Quá trình tìm hiểu và nghiên
cứu thực hiện đề tài giúp em hiểu biết thêm được nhiều kiến thức cơ bản về bộ môn Công nghệ thông tin.
Do thời gian thực hiện đề tài có giới hạn và kiến thức của em còn hạn hẹp nên không thể tránh khỏi những thiếu sót và chưa giới thiệu, đưa ra được những ưu điểm, nhược điềm còn tiềm ẩn bên trong website. Chính vì vậy em rất mong nhận được sự giúp đỡ, đóng góp ý kiến của cô Nguyễn Thị Hạnh, giáo viên hướng dẫn trực tiếp cũng như các thầy cô trong khoa và các bạn sinh viên để báo cáo của em được hoàn thiện hơn và có cơ hội phát triển hơn.
1. Quách Ngọc Ân (1992), "Nhìn lại hai năm phát triển lúa lai", Di truyền học
ứng dụng, 98 (1), tr. 10-16.
2. Bộ Nông nghiệp & PTNT (1996), Báo cáo tổng kết 5 năm (1992 - 1996) phát
triển lúa lai, Hà Nội.
3. Nguyễn Hữu Đống, Đào Tanh Bằng, Lâm Quang Dụ, Phan Đức Trực (1997),
Đột biến - Cơ sở lý luận và ứng dụng, NXB Nông nghiệp, Hà Nội.
...
... ... ... ... ... ... ... ... ... ... ... ... ... ... Ngày 5 tháng 6 năm 2014