Tạo box-shadow bằng thanh trượt: hiểu từng giá trị trước khi sao chép
Công cụ dựng một khai báo box-shadow bằng năm thanh trượt cho độ lệch ngang, độ lệch dọc, độ nhòe, độ lan và độ mờ, kèm bộ chọn màu và công tắc bóng trong. Khối xem trước cập nhật ngay theo từng lần kéo, và dòng CSS bên dưới luôn khớp đúng với thứ bạn đang nhìn thấy.
Tính năng nổi bật
- Thanh trượt độ lệch ngang và độ lệch dọc chạy từ âm 50 tới 50 pixel
- Thanh trượt độ nhòe từ 0 tới 100 pixel, đặt về 0 để có bóng cạnh sắc
- Thanh trượt độ lan từ âm 50 tới 50 pixel, cho phép thu nhỏ bóng so với khối
- Bộ chọn màu kèm thanh độ mờ riêng, giá trị được ghép thành màu rgba trong dòng CSS
- Công tắc chuyển bóng ngoài thành bóng trong bằng từ khóa inset
- Năm bộ giá trị dựng sẵn Subtle, Medium, Large, Soft và Hard để bắt đầu nhanh
- Khối xem trước hình vuông bo góc cập nhật tức thì theo từng thay đổi
- Nút sao chép nguyên dòng khai báo box-shadow đã hoàn chỉnh dấu chấm phẩy
Vì sao chỉnh bóng bằng thanh trượt nhanh hơn gõ tay
Bốn giá trị số của box-shadow không độc lập với nhau. Tăng độ nhòe làm bóng loang rộng và nhạt đi, nên thường phải giảm độ lan để bóng không phình ra ngoài khối; tăng độ lệch dọc làm khối trông cao hơn nhưng nếu độ nhòe không tăng theo thì bóng trông như một tấm bìa dán lệch. Gõ tay từng giá trị rồi tải lại trang để xem, mỗi vòng lặp mất mươi giây và bạn dễ quên mình đã thử tổ hợp nào. Kéo thanh trượt cho phản hồi tức thì, nên bạn cảm nhận được ngay mối quan hệ giữa các giá trị và dừng đúng lúc thấy vừa mắt. Điểm quan trọng thứ hai là dòng CSS hiển thị bên dưới luôn phản ánh chính xác trạng thái hiện tại, kể cả phần màu đã được đổi từ mã màu sáu chữ số sang dạng rgba có kênh trong suốt, nên bạn không phải tự tính lại giá trị đó.
Lợi ích khi sử dụng
- Thấy ngay hệ quả của từng giá trị nên hiểu được cách bốn con số phối hợp với nhau
- Dòng CSS luôn khớp với khối xem trước, không có chuyện sao chép ra rồi hiển thị khác
- Năm bộ dựng sẵn tiết kiệm bước mò mẫm ban đầu cho các trường hợp dùng phổ biến
- Phần chuyển mã màu sang dạng rgba được làm tự động nên bạn không phải tính kênh trong suốt
- Chạy hoàn toàn trong trình duyệt, không cần tài khoản và không lưu gì lại
Cách tạo một box-shadow vừa ý
- 1Bấm một trong năm nút dựng sẵn để có điểm khởi đầu, chẳng hạn Subtle cho thẻ nội dung hoặc Large cho hộp thoại nổi.
- 2Đặt độ lệch ngang về 0 và chỉ chỉnh độ lệch dọc, vì bóng theo quy ước là do nguồn sáng từ trên chiếu xuống.
- 3Tăng độ nhòe cho tới khi mép bóng không còn thấy đường viền rõ, thường độ nhòe nên lớn hơn độ lệch dọc.
- 4Kéo độ lan xuống giá trị âm nếu bóng đang loe ra hai bên khối, đây là mẹo làm bóng trông tự nhiên hơn.
- 5Chỉnh màu và độ mờ, rồi bấm nút sao chép để lấy nguyên dòng khai báo dán vào tệp định kiểu.
Cú pháp box-shadow và ý nghĩa từng giá trị
Một lớp bóng viết theo thứ tự độ lệch ngang, độ lệch dọc, độ nhòe, độ lan rồi tới màu. Hai giá trị đầu bắt buộc, ba giá trị sau có thể bỏ. Độ lệch ngang dương đẩy bóng sang phải, âm đẩy sang trái; độ lệch dọc dương đẩy bóng xuống dưới, âm đẩy lên trên. Độ nhòe quyết định vùng chuyển tiếp: giá trị 0 cho mép bóng sắc như một khối đặc, giá trị càng lớn thì bóng càng loang và càng nhạt vì cùng lượng màu bị trải trên diện tích rộng hơn. Độ lan phóng to hoặc thu nhỏ hình bóng trước khi làm nhòe, nên độ lan âm 10 pixel cho ra bóng nhỏ hơn khối mười pixel mỗi phía. Từ khóa inset nếu có phải đứng ở đầu hoặc cuối khai báo. Hai điểm hay bị quên: bóng luôn bám theo bo góc của khối nên không cần chỉnh riêng, và bóng không chiếm chỗ trong bố cục nên nó phủ lên phần tử bên cạnh mà không đẩy chúng ra như border làm.
Năm bộ dựng sẵn và điều chúng dạy về độ lan âm
Bộ Subtle đặt độ lệch dọc 1 pixel, độ nhòe 3 pixel, độ lan 0 và độ mờ 12 phần trăm, tạo một đường viền mềm gần như chỉ đủ tách thẻ khỏi nền trắng. Bộ Medium dùng độ lệch dọc 4, độ nhòe 6 và độ lan âm 1. Bộ Large dùng độ lệch dọc 10, độ nhòe 15 và độ lan âm 3. Bộ Soft đi xa nhất với độ lệch dọc 25, độ nhòe 50 và độ lan âm 12. Điểm chung dễ nhận ra là bóng càng lớn thì độ lan âm càng sâu. Lý do rất thực tế: khi độ nhòe tăng, vùng nhòe lan đều ra mọi phía kể cả phía trên, khiến khối trông như đang phát sáng thay vì đổ bóng. Kéo độ lan xuống âm sẽ co hình bóng lại trước khi làm nhòe, nên phần loang phía trên bị triệt tiêu còn phần dưới vẫn còn. Bộ Hard thì ngược hẳn: độ lệch cả hai chiều 5 pixel, độ nhòe 0 và độ mờ 100 phần trăm, cho ra khối màu đặc kiểu thiết kế phẳng có viền cứng.
Khi nào dùng bóng trong và vì sao nó khác hẳn bóng ngoài
Bật công tắc inset là đổi hoàn toàn ngữ nghĩa: bóng không còn đổ ra ngoài mà đổ vào phía trong đường biên, làm khối trông như bị lõm xuống thay vì nổi lên. Đây là hiệu ứng dùng cho ô nhập liệu, thanh trượt, thanh tiến trình và trạng thái nút đang bị nhấn giữ. Với bóng trong, dấu của độ lệch đảo ý nghĩa trực giác: độ lệch dọc dương đẩy vùng tối xuống mép trên bên trong, tạo cảm giác ánh sáng vẫn từ trên chiếu xuống nhưng bề mặt đã lún xuống. Độ lan dương làm vùng tối dày thêm về phía tâm khối. Một mẹo hay dùng là đặt cả bốn giá trị số bằng 0 trừ độ lan, khi đó bóng trong biến thành một đường viền bên trong đều đặn, có ích khi bạn cần viền mà không muốn thay đổi kích thước hộp như border gây ra. Nhớ rằng bóng trong nằm trên nền của khối nhưng nằm dưới nội dung, nên chữ và ảnh bên trong vẫn hiển thị bình thường.
Bóng nhiều lớp: thứ công cụ này chưa làm được và cách tự ghép
Đây là giới hạn cần nói thẳng: mỗi lần chạy, công cụ chỉ sinh ra đúng một lớp bóng. Trong khi đó phần lớn hệ thống thiết kế hiện nay dùng hai hoặc ba lớp chồng lên nhau, vì bóng thật ngoài đời không đồng nhất. Cách làm phổ biến là một lớp rất gần và sắc để tạo đường tiếp xúc với bề mặt, cộng thêm một lớp xa và nhòe để tạo khối tổng thể. Thuộc tính box-shadow nhận nhiều lớp ngăn nhau bởi dấu phẩy, và lớp viết trước sẽ nằm trên lớp viết sau. Bạn hoàn toàn có thể dùng công cụ này hai lần rồi ghép tay: tạo lớp gần với độ lệch dọc 1 và độ nhòe 2, sao chép ra; tạo tiếp lớp xa với độ lệch dọc 8 và độ nhòe 16, sao chép ra; sau đó dán hai chuỗi vào cùng một khai báo, bỏ chữ box-shadow thừa và nối bằng dấu phẩy. Kết quả trông có chiều sâu hơn hẳn một lớp đơn ở cùng mức độ đậm.
Màu bóng, hiệu năng và những chỗ dễ hỏng
Bóng màu đen thuần với độ mờ cao làm giao diện trông xám và bẩn, nhất là trên nền có màu. Cách xử lý là lấy màu nền hoặc màu chủ đạo rồi giảm sáng mạnh và tăng bão hòa nhẹ để làm màu bóng, khi đó bóng hòa vào tổng thể thay vì cắt ngang nó. Trên giao diện tối, bóng gần như vô hình vì tối chồng lên tối; thay vì cố tăng độ mờ, nên chuyển sang phân tầng bằng cách làm bề mặt sáng dần theo độ nổi. Về hiệu năng, độ nhòe lớn trên diện tích lớn khiến trình duyệt phải vẽ lại nhiều điểm ảnh; điều này không đáng lo với vài thẻ tĩnh nhưng gây giật khi bạn tạo hoạt ảnh trực tiếp trên box-shadow. Cách né là đặt sẵn bóng ở một lớp giả rồi chỉ chuyển động độ mờ của lớp đó, vì độ mờ được xử lý rẻ hơn nhiều. Cuối cùng, khối xem trước ở đây là hình vuông bo góc đặt trên nền cố định, nên hãy thử lại bóng ngay trong giao diện thật trước khi chốt giá trị.
Câu hỏi thường gặp (FAQ)
Bốn con số trong box-shadow lần lượt là gì?
Theo đúng thứ tự là độ lệch ngang, độ lệch dọc, độ nhòe và độ lan, rồi mới tới màu. Hai giá trị đầu bắt buộc phải có, ba phần sau có thể bỏ qua. Viết sai thứ tự thì trình duyệt hiểu sai hoàn toàn, ví dụ đặt nhầm độ lan vào vị trí độ nhòe sẽ cho ra bóng cạnh sắc thay vì bóng mềm.
Độ nhòe và độ lan khác nhau chỗ nào?
Độ lan thay đổi kích thước hình bóng trước, còn độ nhòe làm mềm mép của hình bóng đó. Độ lan 10 pixel cho ra bóng to hơn khối mười pixel mỗi phía nhưng mép vẫn sắc nếu độ nhòe bằng 0. Độ nhòe 10 pixel giữ nguyên kích thước nhưng biến mép thành dải chuyển tiếp mờ dần.
Vì sao các bộ dựng sẵn hay để độ lan âm?
Vì khi độ nhòe lớn, vùng loang lan đều ra mọi phía kể cả phía trên khối, làm nó trông như đang phát sáng chứ không phải đổ bóng. Đặt độ lan âm sẽ co hình bóng lại trước khi làm nhòe, nên phần loang lên trên bị triệt tiêu còn phần bóng phía dưới vẫn giữ được. Đây là mẹo cơ bản để bóng trông thật.
Bóng có làm phần tử chiếm thêm chỗ trong bố cục không?
Không. Box-shadow được vẽ ra ngoài hộp nhưng không tham gia vào tính toán bố cục, nên nó không đẩy các phần tử xung quanh và không làm xuất hiện thanh cuộn. Điểm này khác hẳn border vốn cộng vào kích thước hộp. Hệ quả cần lưu ý là bóng có thể bị cắt nếu phần tử cha đặt overflow hidden.
Vì sao bóng của tôi bị cắt mất một phần?
Gần như chắc chắn là một phần tử cha đang đặt overflow ở giá trị hidden hoặc auto, nên mọi thứ vẽ ra ngoài vùng nội dung đều bị cắt. Cách xử lý là chuyển overflow về visible cho phần tử cha, hoặc chừa khoảng đệm đủ rộng quanh phần tử con để bóng nằm gọn bên trong vùng hiển thị.
Bóng có tự bo theo góc của khối không?
Có. Box-shadow luôn bám theo hình dạng hộp viền, bao gồm cả giá trị border-radius, nên bạn không phải khai báo thêm gì. Nếu thấy bóng vuông trong khi khối bo tròn thì hãy kiểm tra xem hiệu ứng bo góc có thực sự đặt trên chính phần tử mang bóng hay đang đặt trên một phần tử con khác.
Làm sao tạo bóng nhiều lớp giống các hệ thống thiết kế lớn?
Thuộc tính này nhận nhiều lớp ngăn nhau bằng dấu phẩy, lớp viết trước nằm trên. Bạn dùng công cụ hai lần, một lần cho lớp gần và sắc, một lần cho lớp xa và nhòe, rồi ghép hai chuỗi vào cùng một khai báo bằng dấu phẩy. Công cụ hiện chỉ sinh một lớp mỗi lần nên bước ghép phải làm tay.
Khi nào nên bật chế độ bóng trong?
Khi bạn muốn bề mặt trông lõm xuống thay vì nổi lên: ô nhập liệu, rãnh của thanh trượt, thanh tiến trình, hoặc trạng thái nút đang bị nhấn giữ. Một cách dùng khác khá tiện là đặt mọi giá trị bằng 0 trừ độ lan, khi đó bóng trong biến thành đường viền bên trong mà không làm thay đổi kích thước hộp.
Vì sao bóng gần như không thấy gì trên giao diện tối?
Vì bóng là màu tối chồng lên nền vốn đã tối nên độ tương phản rất thấp. Tăng độ mờ chỉ làm mảng đen loang ra chứ không tạo được cảm giác nổi. Trên giao diện tối, cách phân tầng hiệu quả hơn là làm bề mặt sáng dần theo độ nổi, kết hợp một đường viền rất nhạt ở mép trên của khối.
Nên chọn màu bóng thế nào cho đẹp?
Tránh đen thuần với độ mờ cao vì nó làm giao diện trông xám và bẩn. Cách tốt hơn là lấy màu nền hoặc màu chủ đạo của thương hiệu, giảm độ sáng xuống rất thấp và giữ chút bão hòa, rồi dùng làm màu bóng. Bóng khi đó hòa vào bảng màu chung thay vì cắt ngang nó bằng một mảng trung tính.
Tạo hoạt ảnh cho box-shadow có ảnh hưởng hiệu năng không?
Có. Mỗi khung hình, trình duyệt phải vẽ lại vùng nhòe, và chi phí tăng theo diện tích cùng độ nhòe nên chuyển động dễ bị giật trên máy yếu. Cách thay thế là đặt sẵn bóng trên một lớp giả phủ lên phần tử rồi chỉ chuyển động độ mờ của lớp đó, vì thay đổi độ mờ được xử lý rẻ hơn nhiều.
Box-shadow khác gì bộ lọc drop-shadow?
Box-shadow luôn đổ bóng theo hình chữ nhật của hộp viền kể cả khi nội dung bên trong trong suốt. Bộ lọc drop-shadow thì bám theo hình dạng thật của điểm ảnh không trong suốt, nên đó mới là thứ bạn cần khi muốn đổ bóng cho ảnh nền trong suốt hoặc cho hình vector có dạng bất kỳ.
Từ khóa liên quan
- box shadow generator
- tạo box shadow online
- css box shadow là gì
- cú pháp box shadow css
- box shadow nhiều lớp
- inset box shadow
- bóng đổ css
- spread radius box shadow
- blur radius css shadow
- box shadow bị cắt overflow
- box shadow theo border radius
- shadow cho card css
- shadow trên dark mode
- drop shadow và box shadow khác nhau
- hiệu năng animation box shadow
- màu bóng đổ đẹp
- tạo bóng css miễn phí
- css shadow generator free
- elevation trong thiết kế giao diện
- copy css box shadow nhanh
