Cơ chế hoạt động của thuộc tính box-shadow trong CSS
Thuộc tính box-shadow trong CSS là một công cụ mạnh mẽ để tạo hiệu ứng đổ bóng cho các phần tử trên trang web. Hiệu ứng này giúp giả lập nguồn sáng trong không gian hai chiều, tạo ra ảo giác về khoảng cách giữa phần tử và bề mặt phía sau nó.
Để định hình một bóng đổ, CSS sử dụng các tham số cốt lõi bao gồm độ lệch ngang, độ lệch dọc, bán kính mờ, bán kính lan rộng, màu sắc và chế độ đổ bóng (ngoài hoặc trong). Trình tạo Box Shadow cho phép bạn điều chỉnh trực quan tất cả các thuộc tính này thông qua các thanh trượt và tạo ra mã CSS tương ứng trong thời gian thực.
Các thông số điều chỉnh bóng đổ
Mỗi lớp bóng đổ được cấu thành từ các thông số vật lý cụ thể. Việc hiểu rõ cách hoạt động của từng thông số sẽ giúp bạn kiểm soát chính xác hình dáng của bóng đổ:
- Độ lệch ngang: Di chuyển bóng đổ sang bên trái hoặc bên phải của phần tử. Thanh trượt này hoạt động trong phạm vi từ -50px đến 50px. Giá trị dương sẽ dịch chuyển bóng sang phải, trong khi giá trị âm sẽ dịch chuyển bóng sang trái.
- Độ lệch dọc: Di chuyển bóng đổ lên trên hoặc xuống dưới phần tử. Phạm vi điều chỉnh từ -50px đến 50px. Giá trị dương đẩy bóng xuống dưới, còn giá trị âm kéo bóng lên trên.
- Độ mờ (Blur): Xác định mức độ làm mềm các cạnh của bóng đổ. Giá trị nằm trong khoảng từ 0px đến 100px. Ở mức 0px, bóng đổ sẽ có cạnh sắc nét tuyệt đối. Khi tăng giá trị này, ranh giới của bóng sẽ mờ dần và lan tỏa ra xung quanh.
- Độ lan rộng (Spread): Định kích thước của bóng đổ trước khi áp dụng hiệu ứng làm mờ. Thanh trượt này dao động từ -50px đến 50px. Giá trị dương làm bóng phình to ra, trong khi giá trị âm (chẳng hạn như các giá trị âm nhỏ) sẽ kéo bóng co cụm vào trong, giúp tạo ra các hiệu ứng bóng đổ ôm sát và tinh tế.
- Màu bóng và Độ mờ đục (Opacity): Cho phép chọn màu sắc của bóng đổ thông qua bảng màu và điều chỉnh độ trong suốt của nó. Việc giảm độ mờ đục giúp bóng đổ hòa trộn tự nhiên với màu nền phía sau thay vì tạo ra một khối màu đặc.
Sự khác biệt giữa bóng đổ thông thường và bóng trong (Inset)
Theo mặc định, bóng đổ sẽ xuất hiện ở phía ngoài của phần tử, tạo cảm giác phần tử đó đang nổi lên trên bề mặt trang web. Tuy nhiên, khi kích hoạt tùy chọn Bóng trong (Inset), hướng đổ bóng sẽ bị đảo ngược.
Bóng trong (Inset) đẩy toàn bộ hiệu ứng đổ bóng vào phía bên trong các cạnh của phần tử. Hiệu ứng này làm thay đổi hoàn toàn cảm quan thị giác, khiến phần tử trông như bị lõm xuống hoặc ấn sâu vào trong bề mặt. Đây là kỹ thuật phổ biến được sử dụng để thiết kế các ô nhập liệu chìm (sunken input) hoặc trạng thái hoạt động (active) của các nút bấm.
Kỹ thuật xếp chồng nhiều lớp bóng để tạo chiều sâu
Trong thiết kế giao diện hiện đại, một lớp bóng đơn lẻ thường không đủ để tái tạo lại cách ánh sáng tương tác với vật thể trong thực tế. Bóng đổ trong tự nhiên rất phức tạp, gồm nhiều vùng sáng tối với độ mờ khác nhau. Để đạt được độ chân thực cao, các nhà thiết kế và lập trình viên front-end thường xếp chồng nhiều lớp bóng lên nhau.
Trình tạo Box Shadow hỗ trợ tính năng Thêm lớp bóng và Xóa lớp bóng để bạn tự do thử nghiệm. Công cụ được thiết lập sẵn năm lớp bóng, trong đó lớp đầu tiên có các giá trị mặc định là 0 8 24 -4 với màu đen có độ trong suốt 18%, các lớp còn lại ban đầu được ẩn đi.
Khi bạn thêm một lớp mới, công cụ sẽ tạo ra một lớp bóng với các giá trị mặc định. Khi có nhiều lớp bóng cùng tồn tại, mã CSS đầu ra sẽ tự động gộp chúng lại và phân tách bằng dấu phẩy. Bằng cách kết hợp một lớp bóng hẹp, đậm màu ở gần phần tử với một lớp bóng rộng hơn, mờ hơn ở phía xa, bạn sẽ tạo ra những hiệu ứng đổ bóng có chiều sâu và vô cùng mềm mại.
Bảo mật dữ liệu và xử lý cục bộ
Mọi hiệu ứng đổ bóng đều được kết xuất trong trình duyệt của bạn. Không có dữ liệu nào bạn thiết lập được tải lên BroBroGo. Toàn bộ quá trình tính toán thông số, thay đổi thanh trượt và kết xuất mã CSS đều diễn ra trực tiếp trên thiết bị cá nhân của người dùng, đảm bảo tính riêng tư cho các ý tưởng thiết kế của bạn.
Câu hỏi thường gặp
Độ lệch, độ mờ và độ lan rộng thực sự kiểm soát những gì?
Độ lệch (Offset) di chuyển bóng sang trái/phải và lên/xuống, độ mờ (blur) làm mềm các cạnh của bóng, và độ lan rộng (spread) làm tăng hoặc giảm kích thước bóng trước khi làm mờ. Giá trị spread âm sẽ thu nhỏ bóng vào trong, rất hữu ích để tạo bóng ôm sát, tinh tế.
Tùy chọn bóng trong (inset) có tác dụng gì?
Bóng thông thường đổ ra phía ngoài phần tử, giống như ánh sáng phía sau một chiếc thẻ nổi lên. Tùy chọn Inset sẽ đảo ngược bóng vào bên trong, làm cho phần tử trông như bị lõm xuống — rất hữu ích cho các ô nhập liệu chìm hoặc các nút đang được nhấn.
Tại sao nên xếp chồng nhiều lớp đổ bóng?
Một lớp bóng đơn lẻ trông sẽ khá bẹt khi vượt quá một kích thước nhất định. Hiệu ứng đổ bóng chân thực trong thực tế thường kết hợp một lớp bóng hẹp, đậm màu với một lớp bóng mềm, rộng hơn — hãy thêm lớp thứ hai và tinh chỉnh độc lập từng lớp để đạt được hiệu ứng đó.