Trình tạo box-shadow CSS

Cú pháp box-shadow

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];

• x-offset: giá trị dương = sang phải, giá trị âm = sang trái.
• y-offset: giá trị dương = xuống dưới, giá trị âm = lên trên.
• blur: 0 = cạnh sắc nét, giá trị càng cao càng mềm mại. Kích thước hiển thị lan ra ngoài phần tử khoảng 1,5 lần giá trị độ mờ.
• spread: kích thước tăng thêm vượt ra ngoài phần tử. Giá trị dương làm bóng đổ to ra; giá trị âm làm nó nhỏ lại (hữu ích cho các quầng sáng tinh tế).
• colour: hỗ trợ mọi màu CSS. rgba(0, 0, 0, 0.15) là giá trị cơ bản dùng nhiều nhất.
• inset: từ khóa lật bóng đổ vào bên trong phần tử.

Bóng đổ nhiều lớp trông chân thực

Trình tạo này xuất ra một quy tắc bóng đổ tại một thời điểm; để tạo bóng nhiều lớp, hãy tạo từng lớp riêng rồi nối các quy tắc bằng dấu phẩy.

Một bóng đổ đơn với 0 0 40px trông mờ ảo. Hai bóng đổ, một bóng nhỏ và sắc nét ở gần phần tử, cùng một bóng lớn hơn và mềm hơn ở xa hơn, mô phỏng cách ánh sáng thật tán xạ.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

Dòng đầu tạo bóng tiếp xúc sát phần tử; dòng thứ hai tạo bóng môi trường mềm hơn. Chỉ một mẫu này thôi đã bao phủ 80% giao diện kiểu thẻ.

Hệ thống độ cao (elevation)

Material Design dùng 6 cấp độ cao (elevation), mỗi cấp có một bộ bóng đổ riêng. Tóm tắt lại:

Hãy chọn một bộ cho mỗi vai trò độ cao và dùng nhất quán.

Bóng đổ có màu trông tự nhiên hơn

Bóng đổ đen tuyền trông giả tạo, vì bóng đổ thật được nhuốm màu bởi bề mặt bên dưới. Hãy thử:

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);

Một màu xanh xám lạnh thay cho đen tuyền. Trên các nền màu ấm, hãy dùng tông màu ấm hơn.

Hiệu năng

box-shadow được vẽ lại mỗi khi trình duyệt repaint. Bóng đổ lớn và nặng trên nhiều phần tử có thể làm chậm thao tác cuộn. Cách giảm thiểu:

• Dùng transform: translateZ(0) trên phần tử để buộc tạo một lớp tổng hợp.
• Chỉ thay thế bóng đổ phức tạp bằng filter: drop-shadow() khi bạn cần bóng đổ bám theo clip-path (nhìn chung cách này chậm hơn).
• Hạn chế bóng đổ trên các phần tử thường xuyên được vẽ lại.

inset cho các trạng thái được nhấn

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

Bóng đổ inset mô phỏng vẻ lõm xuống, nút trông như bị ấn vào bề mặt. Kết hợp với một transform: translateY(1px) nhỏ hướng xuống để có cảm giác nhấn rõ rệt.