text-shadow là gì?
text-shadow là gì? Tương tự như box-shadow, text-shadow cũng là thuộc tính mới trong CSS3, được sử dụng để tạo bóng đổ (shadow) cho text. Cấu trúc tag { text-shadow: h-offset v-offset blur color; } text-shadow có tất cả 4 giá trị chính, lần lượt điều khiển shadow ...
text-shadow là gì?
Tương tự như box-shadow, text-shadow cũng là thuộc tính mới trong CSS3, được sử dụng để tạo bóng đổ (shadow) cho text.
Cấu trúc
tag {
text-shadow: h-offset v-offset blur color;
}
text-shadow có tất cả 4 giá trị chính, lần lượt điều khiển shadow dịch chuyển theo chiều ngang (h-offset), theo chiều dọc (v-offset), tạo độ mờ (blur), và màu cho shadow.
| Giá trị | Đơn vị | VD | Mô tả |
|---|---|---|---|
| h-offset | px em |
5px | Điều chỉnh khoảng cách shadow theo chiều ngang |
| v-offset | px em |
5px | Điều chỉnh khoảng cách shadow theo chiều dọc |
| blur | px em |
5px | Điều chỉnh độ mờ của shadow |
| color | Mã màu Tên màu Giá trị rgba |
#ff0000; red rgba(183, 183, 183, 0.5); |
Các giá trị màu có thể có của shadow |
Cách sử dụng
HTML viết:
<!DOCTYPE HTML> <html> <head></head> <body> <div>Text shadow</div> </body> </html>
CSS viết - khi chưa sử dụng text-shadow:
div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
}
Hiển thị trình duyệt:
Bây giờ ta sẽ sử dụng text-shadow để chỉnh shadow cho text như sau:
CSS viết:
div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}
Hiển thị trình duyệt:
Với cách viết như trên, ta thấy shadow đã được tạo một cách dễ dàng với 1 dòng lệnh, ta có thể điều chỉnh h-offset và v-offset để xem thay đổi:
Ví dụ thêm - Một số text-shadow thường dùng
Shadow dưới gần
div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}
Shadow lan xung quanh
div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}
Shadow dưới nhạt
div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}
Các bạn có thể xem nhiều ví dụ hơn tại tham khảo text-shadow hoặc xem công cụ tạo text-shadow nhé.
box-shadow
opacity
