Hiệu ứng W3.CSS
Bình thường
độ mờ w3
w3-thang độ xám-max
w3-sepia-max
Các lớp hiệu ứng W3.CSS
W3.CSS cung cấp các lớp hiệu ứng sau:
Lớp học | Định nghĩa |
---|---|
độ mờ w3 | Thêm độ mờ/độ trong suốt cho một phần tử (độ mờ: 0,6) |
w3-độ mờ-min | Thêm độ mờ/độ trong suốt cho một phần tử (độ mờ: 0,75) |
w3-độ mờ-max | Thêm độ mờ/độ trong suốt cho một phần tử (độ mờ: 0,25) |
w3-thang độ xám | Thêm hiệu ứng thang độ xám vào một phần tử (thang độ xám: 75%) |
w3-thang độ xám-min | Thêm hiệu ứng thang độ xám vào một phần tử (thang độ xám: 50%) |
w3-thang độ xám-max | Thêm hiệu ứng thang độ xám vào một phần tử (thang độ xám: 100%) |
w3-nâu đỏ | Thêm hiệu ứng màu nâu đỏ vào một phần tử (màu nâu đỏ: 75%) |
w3-sepia-min | Thêm hiệu ứng màu nâu đỏ vào một phần tử (màu nâu đỏ: 50%) |
w3-sepia-max | Thêm hiệu ứng màu nâu đỏ vào một phần tử (màu nâu đỏ: 100%) |
w3-hover-độ mờ | Thêm độ trong suốt cho một phần tử khi di chuột (độ mờ: 0,6) |
w3-hover-thang độ xám | Thêm hiệu ứng thang độ xám vào một phần tử khi di chuột (thang độ xám: 100%) |
w3-hover-sepia | Thêm hiệu ứng màu nâu đỏ vào một phần tử khi di chuột |
Độ mờ
Các lớp w3-opacity thêm độ trong suốt cho một phần tử:
Bình thường
w3-độ mờ-min
độ mờ w3
w3-độ mờ-max
Ví dụ
<img src="image.jpg" class="w3-opacity-min">
<img src="image.jpg" class="w3-opacity">
<img src="image.jpg" class="w3-opacity-max">
Hãy tự mình thử » Thang độ xám
Các lớp w3-grayscale thêm hiệu ứng thang độ xám vào một phần tử:
Bình thường
w3-thang độ xám-min
w3-thang độ xám
w3-thang độ xám-max
Ví dụ
<img src="image.jpg" class="w3-grayscale-min">
<img src="image.jpg" class="w3-grayscale">
<img src="image.jpg" class="w3-grayscale-max">
Hãy tự mình thử »Lưu ý: Các lớp w3-grayscale không được hỗ trợ trong IE 11 và các phiên bản cũ hơn.
màu nâu đỏ
Các lớp w3-sepia thêm hiệu ứng nâu đỏ vào một phần tử:
Bình thường
w3-sepia-min
w3-nâu đỏ
w3-sepia-max
Ví dụ
<img src="image.jpg" class="w3-sepia-min">
<img src="image.jpg" class="w3-sepia">
<img src="image.jpg" class="w3-sepia-max">
Hãy tự mình thử »Lưu ý: Các lớp w3-sepia không được hỗ trợ trong IE 11 và các phiên bản cũ hơn.
Hiệu ứng di chuột
Bạn cũng có thể thêm các hiệu ứng đặc biệt khi di chuột/di chuột qua.
w3-hover-độ mờ
w3-hover-thang độ xám
w3-hover-sepia
Ví dụ
<img src="image.jpg" class="w3-hover-opacity">
<img src="image.jpg" class="w3-hover-grayscale">
<img src="image.jpg" class="w3-hover-sepia">
Hãy tự mình thử »Màu mờ khi di chuột
Bạn cũng có thể kết hợp bất kỳ lớp w3-hover-color nào với w3-hover-opacity để tạo màu nền "sáng hơn" một chút khi di chuột:
w3-hover-đỏ
w3-hover-red với w3-hover-opacity
Ví dụ
<div class="w3-border w3-hover-opacity w3-hover-red">
<p>w3-hover-red with w3-hover-opacity</p>
</div>
Hãy tự mình thử »