CSS Shadow Effects
Với CSS bạn có thể thêm các thuộc tính đổ bóng vào văn bản(text) và các thành phần(elements) trong trang web của bạn. Trong bài này chúng ta sẽ học về các thuộc tính:
- text-shadow
- box-shadow
Đầu tiên chúng ta sẽ tìm hiểu về các thuộc tính trong text-shadow.
Lưu ý: để thực hiện như các vị dụ minh họa dưới đây bạn cần tạo một file chứa đoạn mã HTML để hiển thị văn bản hoặc thẻ <h> để dễ nhìn thấy sự khác biệt và dễ hiểu hơn.
<!DOCTYPE html><html><head><style>h1 { text-shadow: 2px 2px; }</style></head><body> <h1>Text-shadow effect!</h1></body></html>
CSS Text Shadow
Trong trường hợp chúng ta chỉ muốn thẻ h1 đổ bóng ngang 2px và dọc 2px, ví dụ:
h1 { text-shadow: 2px 2px;}
Sau khi thêm thuộc tính vào thì thẻ h1 của chúng ta sẽ hiển thị như hình minh họa:
Tiếp theo, chúng ta có thể thêm màu vào bóng của thẻ h1 các bạn có thể thêm bất cứ màu nào có trong CSS. Ở ví dụ này chúng ta sẽ thêm màu đỏ:
h1 { text-shadow: 2px 2px red;}
Sau khi thêm thuộc tính "red" thẻ h1 của chúng ta sẽ như hình minh họa dưới đây:
Và chúng ta cũng có thể thêm độ làm mờ(blur) vào bóng của thẻ h1 với độ làm mờ là 5px như ví dụ sau:
h1 { text-shadow: 2px 2px 5px red;}
Thẻ h1 của chúng ta sẽ hiển thị như hình minh họa dưới đây:
Trường hợp chúng ta muốn có chữ màu sáng và đổ bóng màu tối, ví dụ sau đây chúng ta sẽ sửa thẻ h1 của chúng ta thành chữ trắng đổ bóng đen:
h1 { color: white; text-shadow: 2px 2px 4px #000000;}
Thẻ h1 của chúng ta sẽ hiển thị như hình:
Multiple Shadows
Nếu bạn muốn một text có thể đổ nhiều bóng với 2 màu khác nhau, bạn có thể thêm các thuộc tính đổ bóng khác nhau và tách nhau bằng dấu ",". Ví dụ:
h1{ text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;}
Sau khi thêm các thuộc tính trên thẻ h1 của chúng ta sẽ hiển thị như hình:
Với CSS bạn cũng có thể vẽ viền(border) xung quanh text(không có bóng đổ). Ví dụ:
h1 { color: coral; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
Ở ví dụ trên chúng ta đã đổi màu chữ của thẻ h1 thành màu coral và vẽ border xung quanh text, kết quả sẽ hiển thị như hình:
