Chủ đề màu W3.CSS
Chủ đề màu sắc
Với W3.CSS, bạn có thể dễ dàng tùy chỉnh ứng dụng của mình bằng các chủ đề màu sắc.
Phim 2014
Đông cứng
Phản hồi về hình ảnh động thật lố bịch
Lỗi ở các vì sao của chúng ta
Chạm vào, hấp dẫn và thực sự được thực hiện tốt
Avengers
Một thành công lớn cho Marvel và Disney
Phim 2014
Đông cứng
Phản hồi về hình ảnh động thật lố bịch
Lỗi ở các vì sao của chúng ta
Chạm vào, hấp dẫn và thực sự được thực hiện tốt
Avengers
Một thành công lớn cho Marvel và Disney
Tất cả những gì bạn phải làm là thêm liên kết đến chủ đề được xác định trước (hoặc chủ đề tự tạo):
Ví dụ
<link rel="stylesheet"
href="https://www.example.com.vn/w3css/4/w3.css">
<link rel="stylesheet"
href=" https://www.example.com.vn/lib/w3-theme-indigo.css ">Chủ đề được xác định trước
Đây là những chủ đề được xác định trước trong W3.CSS:
| w3-theme-đỏ | Thử nó |
| w3-theme-hồng | Thử nó |
| w3-theme-tím | Thử nó |
| w3-theme-tím đậm | Thử nó |
| w3-theme-màu chàm | Thử nó |
| w3-theme-blue | Thử nó |
| w3-theme-xanh nhạt | Thử nó |
| w3-theme-cyan | Thử nó |
| w3-theme-teal | Thử nó |
| w3-theme-xanh | Thử nó |
| w3-theme-màu xanh nhạt | Thử nó |
| w3-theme-vôi | Thử nó |
| w3-theme-khaki | Thử nó |
| w3-theme-màu vàng | Thử nó |
| w3-theme-hổ phách | Thử nó |
| w3-theme-cam | Thử nó |
| w3-theme-sâu-cam | Thử nó |
| w3-theme-xanh-xám | Thử nó |
| w3-theme-nâu | Thử nó |
| w3-theme-màu xám | Thử nó |
| w3-theme-dark-xám | Thử nó |
| w3-theme-đen | Thử nó |
| w3-theme-w3schools | Thử nó |
Thêm độ dốc
Một độc giả đã gửi cho chúng tôi đề xuất này: Bạn có thể cân nhắc việc thêm màu chuyển màu cho từng chủ đề.
Tôi đã sử dụng màu l2 và l1 từ chủ đề màu xanh lam để tạo dải màu này:
Ví dụ
.w3-theme-gradient {
color: #000 !important;
background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-moz-linear-gradient(top,#64B5F6
25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-ms-linear-gradient(top,#64B5F6
25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
Chủ đề màu có thể tải xuống
Dưới đây là một số chủ đề màu sắc có thể tải xuống lấy cảm hứng từ Material Design của Google:
| Bảng định kiểu | Sự miêu tả |
|---|---|
| w3-theme-amber.css | Chủ đề màu hổ phách |
| w3-theme-black.css | Chủ đề màu sắc Đen |
| w3-theme-blue.css | Chủ đề màu xanh |
| w3-theme-blue-grey.css | Chủ đề màu sắc Xanh xám |
| w3-theme-Brown.css | Chủ đề màu sắc Nâu |
| w3-theme-cyan.css | Chủ đề màu sắc Cyan |
| w3-theme-dark-grey.css | Chủ đề màu sắc Xám đậm |
| w3-theme-deep-orange.css | Chủ đề màu sắc Cam đậm |
| w3-theme-deep-purple.css | Chủ đề màu sắc Tím đậm |
| w3-theme-green.css | Chủ đề màu xanh lá cây |
| w3-theme-grey.css | Chủ đề màu sắc Xám |
| w3-theme-indigo.css | Chủ đề màu chàm |
| w3-theme-khaki.css | Chủ đề màu sắc Kaki |
| w3-theme-light-blue.css | Chủ đề màu sắc Xanh nhạt |
| w3-theme-light-green.css | Màu sắc Chủ đề Xanh nhạt |
| w3-theme-lime.css | Chủ đề màu vôi |
| w3-theme-orange.css | Màu chủ đề màu cam |
| w3-theme-pink.css | Chủ đề màu sắc Hồng |
| w3-theme-purple.css | Chủ đề màu tím |
| w3-theme-red.css | Chủ đề màu sắc Đỏ |
| w3-theme-teal.css | Chủ đề màu xanh mòng két |
| w3-theme-màu vàng.css | Chủ đề màu sắc Vàng |
