Thuộc tính text-shadow trong CSS
Bùi Tấn Lực - 870
- 02/10/2025
Chức năng của Thuộc tính text-shadow trong CSS
Thuộc tính text-shadow trong CSS dùng để đổ bóng màu sắc cho văn bản, bóng màu sắc có thể làm mờ hoặc có thể kết hợp nhiều màu.
Cú pháp của Thuộc tính text-shadow trong CSS
text-shadow: giatri1 giatri1 mausac;
giatri1: Khoảng cách từ bên trái qua (Ví dụ: 2px, 1px,....)
giatri2: Khoảng cách từ trên xuống (Ví dụ 3px, 2px,....)
mausac: Màu sắc (Ví dụ: red, #ff0000,.....)
text-shadow: giatri1 giatri1 giatri3 mausac;
giatri1: Khoảng cách từ bên trái qua (Ví dụ: 2px, 1px,....)
giatri2: Khoảng cách từ trên xuống (Ví dụ 3px, 2px,....)
giatri3: Độ rộng làm mờ (Ví dụ 3px, 2px,....)
mausac: Màu sắc (Ví dụ: red, #ff0000,.....)
Code Thuộc tính text-shadow trong CSS
text-shadow: 2px 2px #ff0000; Từ trái qua 2px, từ trên xuống 3px
text-shadow: 2px 3px 8px #FF0000; Từ trái qua 2px, từ trên xuống 3px, làm mờ 8px
Kết hợp nhiều màu
text-shadow: 1px 1px 1px #fff, 2px 2px 2px #ccc, 3px 3px 3px #aaa;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-shadow trong CSS</title>
<style>
p{font-size:21px;font-weight:bold}
</style>
</head>
<body>
<h1>Code Thuộc tính text-shadow trong CSS</h1>
<span>Dùng để đổ bóng màu sắc cho văn bản trong HTML, bóng màu sắc có thể làm mờ hoặc có thể kết hợp nhiều màu:</span>
<p style="text-shadow: 2px 3px #ff0000;">text-shadow: 2px 2px #ff0000; Từ trái qua 2px, từ trên xuống 3px</p>
<p style="text-shadow: 2px 3px 8px #FF0000;">text-shadow: 2px 3px 8px #FF0000; Từ trái qua 2px, từ trên xuống 3px, làm mờ 8px</p>
<h2>Kết hợp nhiều màu</h2>
<p style="text-shadow: 1px 1px 1px #fff, 2px 2px 2px #ccc, 3px 3px 3px #aaa;">text-shadow: 1px 1px 1px #fff, 2px 2px 2px #ccc, 3px 3px 3px #aaa;</p>
</body>
</html>
Cách sử dụng text-shadow trong CSS hiệu quả
text-shadow phát huy hiệu quả khi được điều chỉnh phù hợp với kích thước chữ, màu nền và mục đích thiết kế. Thay vì tạo bóng quá đậm, nên ưu tiên độ lệch vừa phải và màu có độ tương phản hợp lý để văn bản vẫn rõ ràng.
Tạo hiệu ứng đổ bóng đơn giản cho văn bản
Với tiêu đề hoặc đoạn chữ cần tạo điểm nhấn, có thể bắt đầu bằng một lớp bóng nhẹ. Khoảng cách theo chiều ngang và chiều dọc càng lớn thì bóng càng tách khỏi chữ, trong khi giá trị blur quyết định độ mềm của hiệu ứng.
.title {
text-shadow: 2px 2px 4px #999;
}
Cách thiết lập này phù hợp với các tiêu đề trên nền sáng vì tạo cảm giác chữ có chiều sâu mà không làm ảnh hưởng nhiều đến khả năng đọc.
Điều chỉnh độ mờ và khoảng cách của bóng
Ba giá trị quan trọng cần cân đối là độ lệch ngang, độ lệch dọc và độ mờ. Bóng càng lệch xa hoặc càng đậm sẽ càng nổi bật, nhưng nếu lạm dụng có thể khiến văn bản trở nên nặng nề và khó đọc.
.title {
text-shadow: 1px 2px 3px #777;
}
Khi thiết kế giao diện, nên thử nghiệm trực tiếp trên nền thực tế thay vì chỉ chọn thông số theo cảm tính. Với nội dung dài, hiệu ứng nhẹ thường mang lại trải nghiệm dễ chịu hơn.
Kết hợp nhiều lớp bóng với text-shadow
CSS cho phép khai báo nhiều lớp bóng trong cùng một thuộc tính text-shadow. Mỗi lớp được ngăn cách bằng dấu phẩy, giúp tạo hiệu ứng nổi bật hơn mà không cần thêm phần tử HTML.
.title {
text-shadow:
1px 1px 2px #666,
0 0 6px #fff;
}
Cách kết hợp này có thể dùng để tạo cảm giác phát sáng, viền mềm hoặc chiều sâu cho tiêu đề. Tuy nhiên, các lớp bóng nên có màu sắc và độ mờ hài hòa để chữ không bị rối.
Những lưu ý khi sử dụng text-shadow
Nên xem text-shadow là hiệu ứng bổ trợ thay vì dùng để thay thế độ tương phản của văn bản. Màu chữ vẫn cần đủ rõ so với nền, đặc biệt với nội dung chính và các thành phần có tính tương tác.
Đối với giao diện tối giản, một lớp bóng nhỏ thường đã đủ tạo chiều sâu. Khi sử dụng nhiều lớp hoặc blur lớn, nên kiểm tra trên nhiều kích thước màn hình để bảo đảm hiệu ứng không làm giảm khả năng đọc.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-shadow trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
