- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS3
- box-shadow
box-shadow là gì?
box-shadow là thuộc tính được tạo ra nhằm xử lý bóng đổ (shadow) cho thành phần, nếu như trước đây để tạo được shadow, ta cần dùng background-image, và xử lý transparence phức tạp, thì giờ đây việc này sẽ vô cùng đơn giản.
Cấu trúc
tag { box-shadow: h-offset v-offset blur spread color optional; }
box-shadow có tất cả 5 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), tạo shadow phân tán (spread) và màu cho shadow, và 1 giá trị tùy chọn, được dùng thay đổi tính chất shadow theo vị trí bên ngoài hay bên trong thành phần (inset).
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 |
spread | px em | 5px | Điều chỉnh độ phân tán 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 |
optional | inset | inset | Shadow bên trong thành phần |
Cách sử dụng
HTML viết:
<!DOCTYPE HTML> <html> <head></head> <body> <div>Box - shadow</div> </body> </html>
CSS viết - khi chưa sử dụng box-shadow:
div { border: 3px solid #ffcccc; height: 100px; line-height: 100px; margin: 30px; text-align: center; width: 200px; }
Hiển thị trình duyệt:
Bây giờ ta sẽ sử dụng box-shadow để chỉnh shadow cho box như sau:
CSS viết:
div { border: 3px solid #ffcccc; box-shadow: 0px 0px 5px 5px #999999; height: 100px; line-height: 100px; text-align: center; width: 200px; }
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:
Hiển thị trình duyệt: điều chỉnh shadow theo chiều ngang:
div { border: 3px solid #ffcccc; box-shadow: 10px 0px 5px 5px #999999; height: 100px; line-height: 100px; text-align: center; width: 200px; }
Hiển thị trình duyệt: điều chỉnh shadow theo chiều dọc
div { border: 3px solid #ffcccc; box-shadow: 0px 10px 5px 5px #999999; height: 100px; line-height: 100px; text-align: center; width: 200px; }
box-shadow với inset
div { border: 3px solid #ffcccc; box-shadow: box-shadow: 0px -1px 5px 3px #999 inset; height: 100px; line-height: 100px; text-align: center; width: 200px; }
Ví dụ thêm - Một số box-shadow thường dùng
Shadow nhạt
div { border: 3px solid #ffcccc; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); height: 100px; line-height: 100px; text-align: center; width: 200px; }
Shadow đậm
div { border: 3px solid #ffcccc; box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.6); height: 100px; line-height: 100px; text-align: center; width: 200px; }
Shadow bên dưới gần
div { border: 3px solid #ffcccc; box-shadow: 0 4px 2px -3px; height: 100px; line-height: 100px; text-align: center; width: 200px; }
Shadow bên dưới xa
div { border: 3px solid #ffcccc; box-shadow: 0px 10px 6px -6px #999999; height: 100px; line-height: 100px; text-align: center; width: 200px; }
Tới đây chắc các bạn đã biết cách dùng box-shadow như thế nào rồi he, các bạn cũng có thể xem nhiều ví dụ hơn tại phần tham khảo box-shadow hoặc xem công cụ tạo box-shadow nhé.
- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS3
- 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.
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é.