Bạn có thể thay đổi màu nền, kiểu phông chữ, màu phông chữ, bóng hộp, lề và nhiều thuộc tính khác của một phần tử bằng cách sử dụng CSS.  Trong bài viết dưới đây, FUNiX sẽ hướng dẫn bạn một số cách sử dụng hiệu quả của box-shadow (bóng hộp).

1. CSS box-shadow là gì?

Thuộc tính box-shadow được sử dụng để áp dụng bóng cho các phần tử HTML. Đây là một trong những thuộc tính CSS được sử dụng nhiều nhất để tạo kiểu cho các hộp hoặc hình ảnh.

Cú pháp CSS:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

1. độ lệch ngang: Nếu độ lệch ngang là dương, bóng sẽ ở bên phải của hộp. Và nếu độ lệch ngang là âm, thì bóng sẽ ở bên trái của hộp.
2. độ lệch dọc:  Nếu độ lệch dọc là dương, bóng sẽ nằm bên dưới hộp. Và nếu độ lệch dọc là âm, thì bóng sẽ ở trên hộp.
3. bán kính mờ:  Giá trị càng cao thì bóng mờ càng nhiều.
4. bán kính lan rộng: Nó cho biết bóng sẽ lan rộng bao nhiêu. Giá trị dương làm tăng độ lan truyền của bóng, giá trị âm làm giảm độ lan truyền.
5. Màu sắc:  Nó biểu thị màu sắc của bóng. Ngoài ra, nó hỗ trợ bất kỳ định dạng màu nào như rgba, hex hoặc hsla.

Các thông số về độ mờ, độ lan rộng và màu sắc là tùy chọn. Phần thú vị nhất của box-shadow là bạn có thể sử dụng dấu phẩy để phân tách các giá trị box-shadow bất kỳ lúc nào. Điều này có thể được sử dụng để tạo nhiều đường viền và bóng trên các phần tử.

1.1 Thêm bóng hộp Dim vào Trái, Phải và Dưới cùng của Hộp

Bạn có thể thêm bóng mờ vào ba mặt (trái, phải và dưới cùng) của hộp bằng cách sử dụng CSS bóng hộp sau với phần tử HTML mục tiêu của bạn:

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Đầu ra:

1.2 Thêm một hộp bóng mờ cho Tất cả các mặt

Bạn có thể thêm bóng sáng vào tất cả các mặt của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn:

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Đầu ra:

1.3 Thêm một bóng hộp mỏng vào Mặt dưới và Mặt phải

Bạn có thể thêm bóng vào dưới cùng và bên phải của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn:

box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Đầu ra:

1.4 Thêm một hộp bóng tối cho Tất cả các mặt

Bạn có thể thêm bóng tối cho tất cả các mặt của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Đầu ra:

1.5 Thêm Spread Shadow vào Tất cả các Mặt

Bạn có thể thêm bóng trải rộng vào tất cả các mặt của hộp bằng cách sử dụng lệnh sau với phần tử HTML mục tiêu của bạn:

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

Đầu ra:

1.6 Thêm bóng viền mỏng cho tất cả các mặt

Bạn có thể thêm bóng đường viền đơn giản vào tất cả các mặt của hộp bằng cách sử dụng CSS sau với phần tử HTML mục tiêu của bạn:

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Đầu ra:

1.7 Thêm một bóng hộp vào Mặt dưới và Mặt trái

Bạn có thể thêm bóng đổ vào bên dưới và bên trái của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của mình:

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Đầu ra:

1.8 Thêm bóng hộp Dim vào Mặt trên và Mặt trái, Bóng tối vào Mặt dưới và Mặt phải

Bạn có thể thêm bóng sáng vào phía trên và bên trái của hộp cũng như bóng tối vào phía dưới và bên phải của hộp bằng cách sử dụng CSS sau với phần tử HTML mục tiêu của bạn:

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Đầu ra:

1.9 Thêm bóng viền mỏng, có màu cho tất cả các mặt

Bạn có thể thêm bóng đường viền màu đơn giản vào tất cả các mặt của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Đầu ra:

1.10 Thêm nhiều bóng viền nhiều màu vào các mặt dưới cùng và bên trái của hộp

Bạn có thể thêm nhiều bóng đường viền màu vào bên dưới và bên trái của hộp bằng cách sử dụng CSS sau với phần tử HTML mục tiêu của bạn:

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Đầu ra:

1.11 Thêm nhiều bóng viền nhiều màu vào phần dưới cùng

Bạn có thể thêm nhiều bóng đường viền màu vào cuối hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn:

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

Đầu ra:

1.12 Thêm nhiều bóng viền nhiều màu vào phần dưới cùng và bên phải của hộp

Bạn có thể thêm nhiều bóng đường viền màu vào bên dưới và bên phải của hộp bằng cách sử dụng CSS sau với phần tử HTML mục tiêu của bạn:

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

Đầu ra:

1.13 Thêm bóng sáng vào hai bên trái và phải, rải bóng xuống dưới cùng

Bạn có thể thêm bóng sáng vào bên trái và bên phải và trải bóng xuống dưới cùng của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn:

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

Đầu ra:

2. Tích hợp CSS với một trang HTML

Bây giờ bạn đã biết cách thêm hiệu ứng bóng hộp thú vị bằng cách sử dụng CSS, bạn có thể dễ dàng tích hợp chúng với các phần tử HTML theo nhiều cách.

CÓ LIÊN QUAN:11 Công Cụ Hữu Ích Để Kiểm Tra, Làm Sạch Và Tối Ưu Hóa Tệp CSS

Bạn có thể nhúng nó vào chính trang HTML hoặc đính kèm nó dưới dạng một tài liệu riêng biệt. Có ba cách để đưa CSS vào tài liệu HTML:

2.1 CSS nội bộ

Bảng kiểu nhúng hoặc Bảng kiểu nội bộ được chèn trong phần <head> của tài liệu HTML bằng cách sử dụng phần tử <style> . Bạn có thể tạo bất kỳ số lượng phần tử <style> nào trong tài liệu HTML, nhưng chúng phải được đặt giữa các thẻ <head> và </head> . Dưới đây là một ví dụ minh họa cách sử dụng Internal CSS với tài liệu HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>CSS box-shadow</title>
 <style type="text/css">
 .heading {
 text-align: center;
 }
 .image-box {
 display: block;
 margin-left: auto;
 margin-right: auto;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 }
 </style>
 </head>
 <body>
 <div>
 <h2 class="heading">Style 4<h2>
 <img class="image-box" src="MUO.jpg">
 </div>
 </body>
</html>

2.2 CSS nội tuyến

CSS nội tuyến được sử dụng để thêm các quy tắc kiểu duy nhất vào một phần tử HTML. Nó có thể được sử dụng với một phần tử HTML thông qua thuộc tính style . Thuộc tính style chứa các thuộc tính CSS ở dạng “property: value” được phân tách bằng dấu chấm phẩy ( ; ).

CÓ LIÊN QUAN: Tìm Hiểu Cách Tạo Trang Web Hai Chiều Với CSS Grid

Tất cả các thuộc tính CSS phải nằm trên một dòng, tức là không được có dấu ngắt dòng giữa các thuộc tính CSS. Dưới đây là một ví dụ minh họa cách sử dụng CSS nội tuyến với tài liệu HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>CSS box-shadow</title>
 </head>
 <body>
 <div>
 <h2 class="heading" style="text-align: center;">Style 4<h2>
 <img src="MUO.jpg" class="image-box" style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; margin-left: auto; margin-right: auto;">
 </div>
 </body>
</html>

2.3 CSS bên ngoài

CSS bên ngoài là cách lý tưởng nhất để áp dụng các kiểu cho tài liệu HTML. Biểu định kiểu bên ngoài chứa tất cả các quy tắc kiểu trong một tài liệu riêng biệt (tệp .css), tài liệu này sau đó được liên kết với tài liệu HTML bằng thẻ <link> . Phương pháp này là phương pháp tốt nhất để xác định và áp dụng kiểu cho tài liệu HTML vì tệp HTML bị ảnh hưởng yêu cầu thay đổi tối thiểu trong đánh dấu. Dưới đây là một ví dụ minh họa cách sử dụng CSS bên ngoài với tài liệu HTML:

Tạo một tệp CSS mới với  phần mở rộng .css . Bây giờ hãy thêm mã CSS sau vào bên trong tệp đó:

.heading {
 text-align: center;
}
.image-box {
 display: block;
 margin-left: auto;
 margin-right: auto;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

Cuối cùng, tạo một tài liệu HTML và thêm mã sau vào bên trong tài liệu đó:

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>CSS box-shadow</title>
 <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 <div>
 <h2 class="heading">Style 4<h2>
 <img class="image-box" src="MUO.jpg">
 </div>
 </body>
</html>

Lưu ý rằng tệp CSS được liên kết với tài liệu HTML thông qua thẻ <link> và thuộc tính href .

Tất cả ba phương pháp trên (CSS nội bộ, CSS nội tuyến và CSS bên ngoài) sẽ hiển thị cùng một đầu ra-

3. Làm cho trang web của bạn trở nên đẹp hơn với CSS

Bằng cách sử dụng CSS, bạn có toàn quyền kiểm soát việc tạo kiểu cho trang web của mình. Bạn có thể tùy chỉnh mọi phần tử HTML bằng cách sử dụng các thuộc tính CSS khác nhau. Các nhà phát triển từ khắp nơi trên thế giới đang đóng góp vào các bản cập nhật CSS và họ đã làm như vậy kể từ khi phát hành vào năm 1996. Vì vậy, người mới bắt đầu có rất nhiều điều để học!

May mắn thay, CSS thân thiện với người mới bắt đầu. Bạn có thể có được một số thực hành tuyệt vời bằng cách bắt đầu với một vài lệnh đơn giản và xem khả năng sáng tạo của bạn sẽ đưa bạn đến đâu.

Vân Nguyễn

Dịch từ: https://www.makeuseof.com/css-box-shadow-tricks-examples/