Bóng đổ là hiệu ứng làm đổ hoặc thêm bóng phía sau các thành phần HTML đã chọn khi hiển thị trên trang web. Hiệu ứng này có thể đạt được bằng cách sử dụng “ bóng đổ () ” phương thức làm giá trị cho CSS “ lọc ” tài sản hoặc sử dụng “ bóng hộp ' tài sản. Bằng cách sử dụng thuộc tính “box-shadow”, nâng cao hình ảnh, trải nghiệm người dùng, điểm nhấn và tiêu điểm có thể được rút ra cho một phần tử HTML được nhắm mục tiêu cụ thể.
Hướng dẫn này trình bày quy trình tạo hiệu ứng bóng đổ bằng thuộc tính box-shadow:
-
- Tạo bóng đổ đậm bằng thuộc tính box-shadow
- Tạo bóng đổ mờ bằng thuộc tính box-shadow
- Mở rộng khu vực đổ bóng
Làm cách nào để tạo bóng đổ trong CSS3 bằng thuộc tính box-shadow?
Các ' bóng hộp ” thuộc tính cho phép nhà phát triển thiết lập hệ thống phân cấp trực quan bằng cách chỉ ra vị trí tương đối của các phần tử trên trang. Bằng cách sử dụng nó, người tạo trang web có thể tạo ảo giác về các đối tượng đổ bóng trên bề mặt, mang lại cho các phần tử cảm giác tương tác hơn.
cú pháp
Thuộc tính “box-shadow” có cú pháp là:
bóng hộp: [ bù ngang ] [ Bù đắp theo chiều dọc ] [ bán kính mờ ] [ bán kính trải rộng ] [ màu sắc ] ;
Giải thích các thuật ngữ được sử dụng trong cú pháp trên:
-
- Ban đầu, “ bù ngang ” truy xuất/lưu trữ vị trí trục X và “ tiêu cực ” giá trị đặt bóng ở bên trái và ngược lại.
- Các ' Bù đắp theo chiều dọc ” giá trị lưu trữ vị trí trục Y, giá trị “ tích cực ” giá trị đặt bóng theo hướng đi xuống và ngược lại trong trường hợp “ tiêu cực ' giá trị.
- Tiếp theo, phần “ bán kính mờ ” giá trị như từ tên thiết lập độ mờ của bóng.
- Các ' bán kính trải rộng ” giá trị chỉ định bao nhiêu bán kính mà bóng sẽ mở rộng.
- Các ' màu sắc ” đặt màu bóng, nó có thể nằm trong “ HSL ' hoặc ' RGB ” định dạng là tốt.
Bây giờ, chúng ta hãy xem qua một vài ví dụ để hiểu rõ hơn:
Ví dụ 1: Áp dụng Solid Drop Shadow Sử dụng thuộc tính box-shadow
Để đặt bóng đổ đặc, chỉ có hướng và màu bóng được chèn làm giá trị cho “ bóng hộp ' tài sản:
< phong cách >.boxShadowVí dụ {
chiều rộng: 210px;
đường viền: lụa ngô đặc 2px;
chiều cao: 210px;
màu nền: #f0f0f0;
bóng hộp: 10px 10px rừng xanh;
}
phong cách >
Trong đoạn mã trên:
-
- Đầu tiên, phần tử HTML được chọn có một lớp “ cái hộpBóngVí dụ ”. Và giá trị của “ 210px ” được cung cấp cho “ chiều cao ' Và ' chiều rộng ' của cải. Ngoài ra, hãy sử dụng “ ranh giới ' Và ' màu nền ” thuộc tính để trực quan hóa tốt hơn.
- Tiếp theo, đặt giá trị của “ rừng xanh 10px 10px ” đến “ bóng hộp ” Thuộc tính CSS. Các ' 10px ” là độ lệch ngang và dọc xác định vị trí cần áp dụng bóng đổ. Và ' rừng xanh ” là màu của bóng.
Sau khi biên dịch, trang web xuất hiện như thế này:
Đầu ra xác nhận rằng một bóng đổ kiểu rắn đã được đặt bằng cách sử dụng thuộc tính box-shadow.
Ví dụ 2: Áp dụng Blurry Drop Shadow Sử dụng thuộc tính box-shadow
Để làm mờ bóng đã được áp dụng, thêm một giá trị số được chèn vào trước màu cho “ bóng hộp ' tài sản. Truy cập mã được cập nhật bên dưới:
< phong cách >.boxShadowVí dụ {
chiều rộng: 210px;
đường viền: lụa ngô đặc 2px;
chiều cao: 210px;
màu nền: khói trắng;
bóng hộp: 10px 10px 15px rừng xanh;
}
phong cách >
Theo đoạn mã trên, bóng bây giờ là “ 15px ' bị mờ. Sau khi kết thúc giai đoạn biên dịch, trang web trông như thế này:
Hình trên cho thấy bóng đổ hiện đã bị mờ.
Ví dụ 3: Mở rộng vùng bóng đổ
Giá trị chênh lệch được cung cấp cho “ bóng hộp ” tài sản để mở rộng khu vực của bóng tối. Giá trị của chênh lệch phải ở định dạng số. Giống như trong đoạn mã dưới đây, vùng bóng tối được mở rộng thành “ 20px ”:
< phong cách >.boxShadowVí dụ {
chiều rộng: 210px;
đường viền: lụa ngô đặc 2px;
chiều cao: 210px;
màu nền: khói trắng;
bóng hộp: 10px 10px 15px 20px rừng xanh;
}
phong cách >
Sau khi thực hiện, bóng đổ hiện ra như thế này:
Như bạn có thể thấy, vùng bóng tối hiện được tăng thêm 20px.
Phần kết luận
Các ' bóng hộp ” tài sản được sử dụng để tạo ra một “ đổ bóng ” trên các phần tử HTML đã chọn. Các ' đổ bóng ” thuộc tính chấp nhận năm giá trị, “ bù ngang ”, “ Bù đắp theo chiều dọc ”, “ bán kính mờ ”, “ bán kính trải rộng ' Và ' màu sắc ”. Các giá trị “độ lệch ngang” và “độ lệch dọc” đặt kích thước cho bóng từ nơi bóng đổ sẽ xuất hiện. Giá trị 'bán kính mờ' làm cho bóng mờ và giá trị 'bán kính trải rộng' mở rộng vùng của bóng.