Box-shadow trong CSS giúp tạo hiệu ứng đổ bóng cho các thành phần dạng box trong giao diện website. 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. Vậy cú pháp của thuộc tính box-shadow trong CSS là gì và cách viết code như thế nào? Cùng Kiến Thức Phần Mềm khám phá trong bài viết sau nhé.
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ình 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ình hộp 3D.
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
box-shadow: h-offset v-offset blur spread color inset
Trong cú pháp trên của thuộc tính 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 phương dọc. Nếu đặt số âm thì hướng bóng đổ lùi về phía sau và đặt số dương thì hướng bóng đổ tiến về phía trước
- spread (tùy chọn): xác định kích thước của bóng đổ
- blur (tùy chọn): thiết lập mức độ nhòe của bóng đổ
- color (tùy chọn): thiết lập màu sắc cho bóng đổ
- inset (tùy chọn): cài đặt bóng đổ bên trong phần tử
Cách sử dụng Box-shadow trong CSS và ví dụ
Thiết lập khoảng cách của bóng
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). Trong đó giá trị thứ nhất tương ứng với độ dịch chuyển theo phương ngang, giá trị thứ hai là độ dịch chuyển theo phương dọc.
Ví dụ:
div
{width:500px;
height:300px;
background-color:blue;
box-shadow: 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 đằng sau cú pháp box-shadow. Cụ thể như ví dụ sau đây:
div
{width:500px;
height:300px;
background-color:blue;
box-shadow: 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ờ. Cụ thể:
div
{width:500px;
height:300px;
background-color:blue;
box-shadow: 35px 20px 10px -15px;
}
Ở vị dụ 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ị 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à code mẫu để bạn tham khảo:
div
{width:500px;
height:300px;
background-color:blue;
box-shadow: 35px 20px 10px -15px gray;
}
Khi bổ sung thêm giá trị gray thì bóng được tạo ra sẽ có màu xám.
Box-shadow inset – Bóng đổ bên trong hộp
Ở các 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
{width:500px;
height:300px;
background-color:blue;
box-shadow: 35px 20px 10px -15px green inset;
}
Text-shadow 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. Đó là 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ử dạng văn bản được hiển thị như phông chữ 3D.
Cú pháp text-shadow
Cú pháp của text-shadow như sau:
text-shadow: 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 phương dọc. Nếu đặt số âm thì hướng bóng đổ lùi về phía sau và đặt số dương thì hướng bóng đổ tiến về phía trước
- blur-radius (tùy chọn): quy định độ nhòe của bóng đổ
- color (tùy chọn): quy định màu sắc của bóng đổ
Code mẫu
h1 {
text-shadow: 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 tốn quá nhiều thời gian viết và sửa code, bạn cũng 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.
