Hiệu ứng đổ bóng CSS
Bóng tối
Với CSS bạn có thể tạo hiệu ứng đổ bóng!
Hiệu ứng đổ bóng CSS
Với CSS, bạn có thể thêm bóng vào văn bản và các thành phần.
Trong các chương này bạn sẽ tìm hiểu về các thuộc tính sau:
-
text-shadow
-
box-shadow
Bóng văn bản CSS
Thuộc tính CSS text-shadow
áp dụng bóng cho văn bản.
Trong cách sử dụng đơn giản nhất, bạn chỉ xác định bóng ngang (2px) và bóng dọc (2px):
Hiệu ứng đổ bóng văn bản!
Tiếp theo, thêm màu cho bóng:
Hiệu ứng đổ bóng văn bản!
Sau đó, thêm hiệu ứng làm mờ cho bóng:
Hiệu ứng đổ bóng văn bản!
Ví dụ sau đây hiển thị văn bản màu trắng có bóng đen:
Hiệu ứng đổ bóng văn bản!
Ví dụ sau đây cho thấy bóng phát sáng neon màu đỏ:
Hiệu ứng đổ bóng văn bản!
Nhiều bóng
Để thêm nhiều bóng vào văn bản, bạn có thể thêm danh sách bóng được phân tách bằng dấu phẩy.
Ví dụ sau đây cho thấy bóng phát sáng neon màu đỏ và xanh lam:
Hiệu ứng đổ bóng văn bản!
Ví dụ sau đây hiển thị văn bản màu trắng với bóng đen, xanh lam và xanh đậm:
Hiệu ứng đổ bóng văn bản!
Ví dụ
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Hãy tự mình thử »Bạn cũng có thể sử dụng thuộc tính text-shadow để tạo đường viền đơn giản xung quanh một số văn bản (không có bóng):
Viền xung quanh văn bản!
Ví dụ
h1
{
color: coral;
text-shadow: -1px 0 black, 0 1px
black, 1px 0 black, 0 -1px black;
}
Hãy tự mình thử »