text-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:

Text shadow

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:

Text shadow

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;
}
Text shadow

Shadow lan xung quanh

div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0px 5px 5px #999999;
}
Text shadow

Shadow dưới nhạt

div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0px 5px 5px #999999;
}
Text shadow

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