Hộp thẻ-shadow css

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

Box-shadow là một thuộc tính có tác dụng tạo hiệu ứng đổ bóng cho hình hộp

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ử

Ví dụ về một số cách viết code box-shadow

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;

}

Tạo độ mờ cho đổ bóng khi sử dụng thuộc tính box-shadow

Đ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

Text-shadow trong CSS thuộc tính tạo đổ bóng cho văn bản

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