Các lớp lặp lại CSS3 [Mẹo CSS3]
Có nhiều tính năng CSS3 thay đổi cách chúng ta trang trí một trang web, một trong số đó là CSS3 Gradents. Trước CSS3, chúng tôi chắc chắn cần hình ảnh để tạo hiệu ứng chuyển màu; bây giờ chúng tôi có thể cung cấp các hiệu ứng tương tự (và tốt hơn) bằng cách chỉ sử dụng CSS
Trong các bài viết trước của chúng tôi, chúng tôi đã thảo luận về hai loại độ dốc có thể đạt được bằng CSS3:
- Bán kính và
- Độ dốc tuyến tính.
Lần này chúng ta sẽ xem xét anh chị em của họ: lặp lại độ dốc.
Lặp lại cơ bản
Lặp đi lặp lại học sinh về cơ bản là một phần mở rộng. Cú pháp tương tự như cách chúng ta xác định độ dốc xuyên tâm và tuyến tính, chỉ có điều như tên gọi của nó, nó cũng sẽ lặp lại các màu theo một hướng cụ thể. Để lặp lại độ dốc tuyến tính, chúng ta có thể sử dụng chức năng này: lặp lại tuyến tính-gradient, trong khi để lặp lại độ dốc xuyên tâm hoặc hình elip, chúng tôi sử dụng chức năng này: lặp lại-radial-gradient.
/ * Tuyến tính * / .gradient nền: repeating-linear-gradient (0deg, # f9f9f9, #cccccc 20px); / * Radial * / .gradient nền: lặp lại-radial-gradient (50% 50%, hình tròn, # f9f9f9, #cccccc 20px);
Không có nhiều sự khác biệt cho phần còn lại của mã, ngoại trừ sự lặp lại màu sắc. Dưới đây là một minh họa đơn giản để mô tả cách hoạt động của sự lặp lại màu này.
Mặc dù hình ảnh trên chỉ minh họa cho việc lặp lại độ dốc tuyến tính, ý tưởng cơ bản cũng áp dụng cho độ dốc xuyên tâm trong đó màu sắc sẽ lặp lại vô hạn, trong trường hợp này, theo bất kỳ hướng nào. Theo liên kết dưới đây để xem bản demo.
- Xem bản demo
Trong phần tiếp theo, chúng tôi sẽ chỉ cho bạn cách chúng ta có thể sử dụng các Lớp lặp lại CSS3 trong các ví dụ thực tế.
Ví dụ: Tạo mẫu
Việc thực hiện phổ biến nhất của Lặp đi lặp lại học sinh là để tạo ra các mẫu nền. Trong ví dụ này, chúng ta sẽ tạo các mẫu sọc dọc đơn giản.
.gradient nền: repeating-linear-gradient (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);
Lưu ý cách chúng ta xác định hai màu khác nhau - # f9f9f9 và #cccccc - ở cùng một chỗ, 20px. Ví dụ này sẽ làm sắc nét sự khác biệt giữa hai màu này và loại bỏ độ mờ.
Để định hướng chúng ta chỉ cần thay đổi góc - 90deg sẽ điều khiển nó theo chiều ngang trong khi 45đ sẽ hướng nó theo đường chéo và như vậy.
- Xem bản demo
Ví dụ: Tạo Paperline
Trong ví dụ thứ hai này, chúng tôi sẽ tạo ra một dòng giấy mà bạn có thể thường thấy trong một cuốn sổ tay. Để tạo hiệu ứng này, chúng ta chỉ cần một div, không có hình ảnh, chỉ có CSS.
.độ dốc chiều rộng: tự động; chiều cao: 500px; lề: 0 50px; nền: -webkit-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); nền: -moz-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); nền: -o-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); nền: lặp lại tuyến tính-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); kích thước nền: 100% 21px;
Lưu ý rằng chúng tôi cũng đã thêm CSS3 kích thước nền thuộc tính để chỉ định kích thước của hình ảnh nền cho 100%, 20px. Mặc dù các Lớp CSS3 hiển thị 'màu', nhưng thực tế nó được phân loại là hình ảnh, không màu.
Tiếp theo, chúng tôi sẽ sử dụng :trước yếu tố giả để thêm một sọc ở bên trái của tờ giấy.
.độ dốc: trước nội dung: ""; hiển thị: khối nội tuyến; chiều cao: 500px; chiều rộng: 4px; viền trái: 4px đôi # FCA1A1; vị trí: tương đối; trái: 30px;
Và chúng ta đã hoàn thành, nó thực sự đơn giản phải không? Bây giờ chúng ta có thể thấy tất cả chúng hoạt động từ các liên kết dưới đây.
- Xem bản demo
- Tải xuống nguồn
Tài nguyên khác
- Học sinh CSS3 Webkit
- Sinh viên CSS3 tại Microsoft Developer Network
