- 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ư
8,Text shadow
9 cũng là thuộc tính mới trong CSS3, được sử dụng để tạo bóng đổ [shadow] cho text.Text shadow
Cấu trúc
tag {
text-shadow: h-offset v-offset blur color;
}9 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 [Text shadow
div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
}1], theo chiều dọc [div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
}2], tạo độ mờ [div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
}3], và màu cho shadow.
| h-offset | px em em | 5px | Điều chỉnh khoảng cách shadow theo chiều ngang |
| v-offset | px em em | 5px | Điều chỉnh khoảng cách shadow theo chiều ngang |
| v-offset | px em em | 5px | Điều chỉnh khoảng cách shadow theo chiều ngang |
| v-offset | Điều chỉnh khoảng cách shadow theo chiều dọc Tên màu Giá trị rgba | blur red rgba[183, 183, 183, 0.5]; | Điều chỉnh độ mờ của shadow |
color
Mã màu Tên màu Giá trị rgba
Text shadow
#ff0000; red rgba[183, 183, 183, 0.5];
div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
}Các giá trị màu có thể có của shadow
Cách sử dụng
HTML viết:
div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}Các giá trị màu có thể có của shadow
Cách sử dụng
HTML viết:
CSS viết - khi chưa sử dụng
9:
div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}Hiển thị trình duyệt:
div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}Bây giờ ta sẽ sử dụng
9 để chỉnh shadow cho text như sau:
div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}CSS viết:
- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS3
- box-shadow
box-shadow là gì?
8 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ùngText shadow
div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}0, 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 [
div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
}1], theo chiều dọc [div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
}2], tạo độ mờ [div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
}3], tạo shadow phân tán [div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}4] 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 [div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}5].| h-offset | px em em | 5px | Điều chỉnh khoảng cách shadow theo chiều ngang |
| v-offset | px em em | 5px | Điều chỉnh khoảng cách shadow theo chiều ngang |
| v-offset | px em em | 5px | Điều chỉnh khoảng cách shadow theo chiều ngang |
| v-offset | px em em | 5px | Điều chỉnh khoảng cách shadow theo chiều ngang |
| v-offset | Điều chỉnh khoảng cách shadow theo chiều dọc Tên màu Giá trị rgba | blur red rgba[183, 183, 183, 0.5]; | Điều chỉnh độ mờ của shadow |
| spread | Điều chỉnh độ phân tán của shadow | Đ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];
Box - shadow
Các giá trị màu có thể có của shadow
div {
border: 3px solid #ffcccc;
height: 100px;
line-height: 100px;
margin: 30px;
text-align: center;
width: 200px;
}optional
inset
Shadow bên trong thành phần
0Text shadow
optional
inset
Hiển thị trình duyệt: điều chỉnh shadow theo chiều ngang:
1Text shadow
Hiển thị trình duyệt: điều chỉnh shadow theo chiều dọc
2Text shadow
8 với div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}5
3Text shadow
Ví dụ thêm - Một số
Text shadow
8 thường dùng
Shadow nhạt
4Text shadow
Shadow đậm
5Text shadow
Shadow bên dưới gần
6Text shadow
Shadow bên dưới xa
7Text shadow
Tới đây chắc các bạn đã biết cách dùng
8 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é.Text shadow