Box-shadow trong CSS giúp tạo hiệu ứng đổ bóng cho các hộp định dạng thành phần trong trang web giao diện. Khi sử dụng box-shadow, các phần tử sẽ hiện lên một cách sinh động và bắt mắt. Cú pháp của thuộc tính box-shadow trong CSS là gì và cách viết mã như thế nào?
Box-shadow trong CSS là gì?
Box-shadow CSS là một thuộc tính có tác dụng tạo hiệu ứng đổ bóng. Thuộc tính này dành riêng cho các phần tử HTML có dạng hộp, giúp tạo bóng cho các đường viền của phần tử và mang lại cảm giác như hộp 3D hình.
Khi sử dụng tính năng box-shadow, bạn cần lưu ý một số điểm như sau
- Bóng được tạo ra bởi box-shadow được mặc định là một hình hộp có kích thước bằng với hộp được tạo bóng đổ
- Bóng có màu sắc mặc định là đen, với mã #000000
Cú pháp box-shadow CSS
bóng hộp. h-offset v-offset blur trải màu inset
Trong cú pháp trên thuộc tính của box-shadow, có các tham số quan trọng mà bạn cần lưu ý
- h-offset [bắt buộc]. Định vị bóng đổ theo phương ngang. Nếu đặt số âm thì bóng đổ hướng lên trên và đặt số dương thì bóng đổ hướng xuống dưới
- v-offset [bắt buộc]. Định vị bóng đổ theo chiều dọc. Nếu đặt âm lượng thì hướng bóng đổ lùi về phía sau còn đặt dương số thì hướng bóng đổ về trước
- lây lan [tùy chọn]. default size of đổ bóng
- làm mờ [tùy chọn]. set setting pas de de la de bóng đổ
- màu sắc [tuỳ chọn]. setting color for đổ bóng
- hình nhỏ [tùy chọn]. cài đặt đổ bóng bên trong phần tử
Xem thêm. Hiển thị Flex trong CSS là gì?
Cách sử dụng Box-shadow trong CSS và ví dụ
Set up the way of Shadow
Khi áp dụng cú pháp box-shadow. …px …px thì có thể hiểu đây là khoảng cách dịch chuyển của bóng so với phần tử gốc [có thể là giá trị âm thanh]. Trong đó giá trị thứ nhất tương ứng với tốc độ dịch chuyển theo phương ngang, giá trị thứ hai là tốc độ dịch chuyển theo phương dọc
Ví dụ
div
{chiều rộng. 500px;
Chiều cao. 300px;
màu nền. màu xanh da trời;
bóng hộp. 35px 20px;
}
Tạo độ mờ cho bóng
Để tạo hiệu ứng box-shadow trong CSS đẹp thì bạn nên làm cho bóng có độ mờ để trông giống thật hơn. Cách tạo độ mờ rất đơn giản, bạn chỉ việc bổ sung thêm giá trị nữa phía sau cú pháp box-shadow. Cụ thể như ví dụ sau đây
div
{chiều rộng. 500px;
Chiều cao. 300px;
màu nền. màu xanh da trời;
bóng hộp. 35px 20px 10px;
}
Điều chỉnh kích thước của bóng
Như đã nói ở trên, bóng được tạo ra sẽ có cùng độ lớn với phần tử. Tuy nhiên, bạn cũng có thể dễ dàng điều chỉnh kích thước của bóng bằng cách bổ sung thêm tham số mới ở sau độ mờ. Tools
div
{chiều rộng. 500px;
Chiều cao. 300px;
màu nền. màu xanh da trời;
bóng hộp. 35px 20px 10px -15px;
}
Ở vị trí trên, ta đã bổ sung thêm giá trị -5px để thay đổi kích thước của bóng. Với giá trị này, bóng sẽ có độ lớn được giảm đi ở cả hai chiều dọc và ngang so với kích thước ban đầu
Đổi màu cho bóng
Giá trị sử dụng để quy định màu sắc cho bóng đổ sẽ nằm ở vị trí cuối cùng của cú pháp box-shadow. Dưới đây là mã mẫu để bạn tham khảo
div
{chiều rộng. 500px;
Chiều cao. 300px;
màu nền. màu xanh da trời;
bóng hộp. 35px 20px 10px -15px màu xám;
}
Khi bổ sung thêm giá trị màu xám thì bóng được tạo ra sẽ có màu xám
Box-shadow inset – Bóng đổ bên trong hộp
At the ví dụ trên, ta đang thao tác với bóng đổ ở bên ngoài của phần tử. Tuy nhiên, bạn cũng có thể tạo bóng ngay bên trong hộp bằng tham số inset. Ví dụ như sau
div
{chiều rộng. 500px;
Chiều cao. 300px;
màu nền. màu xanh da trời;
bóng hộp. Hình nhỏ màu xanh lục 35px 20px 10px -15px;
}
Xem thêm. Code Convention là gì?
Bóng chữ trong CSS
Text-shadow là gì?
Ngoài thuộc tính box-shadow đẹp thì hiệu ứng đổ bóng trong CSS còn áp dụng được với văn bản. Thuộc tính text-shadow. Cũng giống như box-shadow, thuộc tính text-shadow sẽ giúp các phần tử định dạng văn bản được hiển thị dưới dạng phông chữ 3D
Cú pháp text-shadow
Cú pháp của text-shadow as after
bóng văn bản. h-shadow v-shadow blur-radius color
Trong cú pháp trên có 4 giá trị đáng chú ý là
- h-shadow [bắt buộc]. Định vị bóng đổ theo phương ngang. Nếu đặt số âm thì bóng đổ hướng lên trên và đặt số dương thì bóng đổ hướng xuống dưới
- v-shadow [bắt buộc]. Định vị bóng đổ theo chiều dọc. Nếu đặt âm lượng thì hướng bóng đổ lùi về phía sau còn đặt dương số thì hướng bóng đổ về trước
- bán kính mờ [tùy chọn]. định mức độ trễ của đổ bóng
- màu sắc [tuỳ chọn]. định màu sắc của đổ bóng
mẫu mã
h1 {
bóng văn bản. 4px 4px;
}
Mong rằng qua bài viết trên đây, bạn đã nắm được một số kiến thức cơ bản về Box-shadow trong CSS. Nếu không muốn mất quá nhiều thời gian viết và mã sửa đổi, bạn có thể sử dụng công cụ Box-shadow generator để thiết kế hiệu ứng đổ bóng nhanh chóng, hiệu quả hơn