Tạo hiệu ứng kính mờ bằng CSS: chỉnh từng thông số và tránh những lỗi làm hiệu ứng biến mất
Công cụ dựng đoạn CSS cho hiệu ứng kính mờ với năm thông số chỉnh được là màu nền lớp kính, độ mờ hậu cảnh, độ trong suốt, mức tăng độ bão hòa và độ đậm của viền. Khung xem trước đặt trên một nền chuyển sắc để bạn thấy đúng cảm giác thật, và mã CSS cập nhật ngay sau mỗi lần kéo thanh trượt.
Tính năng nổi bật
- Thanh trượt độ mờ hậu cảnh từ 0 tới 30 pixel, bước nhảy 1 pixel
- Thanh trượt độ trong suốt của lớp kính từ 0 tới 1
- Thanh trượt tăng độ bão hòa từ 100 tới 300 phần trăm để màu phía sau không bị bạc
- Thanh trượt độ đậm viền từ 0 tới 0,5 để tạo đường sáng viền quanh khối
- Bảng chọn màu cho lớp kính, dùng chung cho cả nền lẫn viền
- Khung xem trước đặt trên nền chuyển sắc tím xanh nên nhìn ra ngay hiệu ứng thật
- Mã CSS sinh sẵn kèm biến thể có tiền tố cho trình duyệt nhân WebKit
- Nút sao chép toàn bộ đoạn CSS chỉ với một lần bấm
Vì sao hiệu ứng kính mờ khó gõ tay cho đúng
Nhìn đoạn CSS thì thấy đơn giản, nhưng cái khó nằm ở chỗ bốn thông số phụ thuộc lẫn nhau và không thông số nào tự nó tạo ra hiệu ứng đẹp. Tăng độ mờ mà không giảm độ trong suốt thì lớp kính trông như một mảng sương đục. Giảm độ trong suốt mà không tăng độ bão hòa thì màu phía sau bị lớp trắng phủ lên và cả khối trông bạc phếch như bị phủ bụi. Bỏ viền đi thì khối kính không có ranh giới và trôi lẫn vào nền. Để dò ra bộ số hợp lý bằng cách gõ tay, bạn phải sửa rồi tải lại trang hàng chục lần, mỗi lần chỉ đổi được một con số. Công cụ này gộp bốn thanh trượt cạnh một khung xem trước sống, nên bạn kéo và thấy kết quả ngay, tìm ra bộ số vừa ý trong vài phút. Bộ số khởi tạo cũng đáng chú ý: độ mờ 10 pixel, độ trong suốt 0,25, độ bão hòa 180 phần trăm và viền 0,18, đây là công thức đã lan rộng trong cộng đồng thiết kế và hợp với phần lớn nền ảnh.
Lợi ích khi sử dụng
- Dò được bộ thông số vừa ý trong vài phút thay vì sửa và tải lại trang hàng chục lần
- Khung xem trước đặt trên nền chuyển sắc nên phản ánh đúng cảm giác thật của hiệu ứng
- Mã sinh ra đã kèm biến thể có tiền tố nên chạy được cả trên Safari phiên bản cũ
- Thấy ngay mối liên hệ giữa độ mờ, độ trong suốt và độ bão hòa
- Không cần cài phần mềm hay dựng dự án thử nghiệm chỉ để chỉnh một khối kính
Cách tạo hiệu ứng kính mờ
- 1Chọn màu cho lớp kính, thường là trắng khi nền phía sau tối và đen khi nền phía sau sáng.
- 2Kéo thanh độ mờ tới mức chi tiết phía sau chỉ còn nhận ra hình khối chứ không đọc được nữa, thường trong khoảng 8 tới 16 pixel.
- 3Chỉnh độ trong suốt: dưới 0,15 thì lớp kính gần như tàng hình, trên 0,4 thì mất luôn cảm giác nhìn xuyên.
- 4Tăng độ bão hòa lên khoảng 150 tới 200 phần trăm để bù lại phần màu bị lớp kính làm nhạt.
- 5Bấm sao chép mã CSS rồi dán vào lớp khối của bạn, nhớ rằng khối đó phải nằm đè lên một nền có hình hoặc có chuyển sắc thì hiệu ứng mới hiện.
Bốn thông số làm gì và ảnh hưởng lẫn nhau ra sao
Lớp kính thực chất là ba thứ chồng lên nhau. Thứ nhất là một lớp màu bán trong suốt đặt lên trên nền, do thuộc tính nền và giá trị độ trong suốt quyết định; đây là thứ tạo cảm giác có vật thể chắn ở đó. Thứ hai là bộ lọc tác động lên phần hậu cảnh nhìn xuyên qua, gồm làm mờ và tăng độ bão hòa. Thứ ba là viền một pixel màu cùng tông nhưng nhạt hơn, đóng vai trò như cạnh của tấm kính bắt sáng. Mối liên hệ quan trọng nhất là giữa độ mờ và độ trong suốt: hai giá trị này bù trừ cho nhau, mờ nhiều thì cần trong suốt ít và ngược lại. Nếu tăng cả hai cùng lúc, bạn được một mảng đục không còn cảm giác kính. Mức tăng độ bão hòa tồn tại vì một lý do rất cụ thể: khi phủ một lớp trắng bán trong suốt lên ảnh, mọi màu phía dưới đều bị kéo về phía trắng và trông nhợt đi; đẩy độ bão hòa lên khoảng 180 phần trăm sẽ kéo màu trở lại gần với cảm nhận ban đầu. Đây chính là lý do các hệ điều hành dùng hiệu ứng kính mờ đều kèm bước tăng bão hòa chứ không chỉ làm mờ đơn thuần.
Hiệu ứng cần có gì phía sau, và các trường hợp nó biến mất
Thuộc tính làm mờ hậu cảnh chỉ tác động lên những gì nằm phía sau khối, nên nếu phía sau là một mảng màu phẳng thì làm mờ một mảng phẳng vẫn ra mảng phẳng và bạn không thấy gì khác. Đây là nguyên nhân phổ biến nhất của tình huống dán mã vào mà chẳng thấy hiệu ứng đâu. Muốn hiệu ứng hiện rõ, phía sau phải có ảnh, có chuyển sắc nhiều màu, hoặc có nội dung để trôi qua khi cuộn. Nhóm nguyên nhân thứ hai nằm ở ngữ cảnh dựng hình. Nếu một phần tử tổ tiên có áp bộ lọc, hoặc có phép biến đổi hình học, hoặc có thuộc tính khai báo trước sự thay đổi, thì phần tử đó tạo ra một khối chứa mới và phần hậu cảnh mà bộ lọc nhìn thấy bị giới hạn lại, khiến hiệu ứng mất hoặc chỉ mờ đúng phần bên trong. Nhóm thứ ba là chính khối kính không có nền bán trong suốt: nếu bạn đặt nền đục hoàn toàn thì không còn gì nhìn xuyên qua để mà làm mờ. Nhóm cuối là trình duyệt cũ, nhất là Firefox trước phiên bản 103 ra mắt giữa năm 2022 vốn chưa bật thuộc tính này theo mặc định.
Giá phải trả về hiệu năng và cách hạn chế
Đây là hiệu ứng nặng nhất trong nhóm hiệu ứng hình ảnh của CSS. Lý do nằm ở cách trình duyệt xử lý: nó phải chụp lại phần hậu cảnh nằm dưới khối, chạy phép làm mờ trên đó, rồi ghép trở lại, và toàn bộ chuỗi này lặp lại mỗi lần có gì đó phía sau thay đổi. Nếu khối kính là thanh điều hướng cố định trên đầu trang, phép tính đó chạy lại liên tục trong suốt quá trình người dùng cuộn trang, và trên điện thoại tầm trung thì cảm giác giật rất rõ. Vài nguyên tắc thực dụng để giảm thiệt hại: giữ diện tích khối kính nhỏ, ưu tiên thẻ nội dung và hộp thoại thay vì phủ kín cả màn hình; không bao giờ chạy hoạt ảnh trên giá trị độ mờ vì mỗi khung hình là một lần tính lại toàn bộ; hạn chế đặt nhiều khối kính chồng lấn nhau trong cùng một màn hình; và cân nhắc tắt hiệu ứng khi người dùng bật tùy chọn giảm chuyển động hoặc khi thiết bị báo bộ nhớ thấp. Một cách thay thế rẻ hơn nhiều cho ảnh nền tĩnh là chuẩn bị sẵn một phiên bản ảnh đã làm mờ rồi đặt làm nền, tuy không có được cảm giác động khi cuộn.
Độ tương phản chữ, chỗ hiệu ứng kính mờ hay vi phạm tiêu chuẩn
Vấn đề cốt lõi là nền phía sau lớp kính thay đổi liên tục, nên độ tương phản giữa chữ và nền không phải một con số cố định mà là một dải giá trị. Chữ trắng đọc rõ khi trôi qua vùng ảnh tối, rồi biến mất khi trôi qua vùng trời sáng. Tiêu chuẩn tiếp cận nội dung web yêu cầu tỷ lệ tương phản tối thiểu 4,5 trên 1 cho chữ thường và 3 trên 1 cho chữ lớn, trong đó chữ lớn được hiểu là từ cỡ 24 pixel trở lên, hoặc từ 18,66 pixel trở lên nếu in đậm. Với lớp kính, bạn phải bảo đảm ngưỡng đó ở trường hợp xấu nhất chứ không phải ở trường hợp trung bình. Ba cách xử lý đáng dùng: nâng độ trong suốt của lớp kính lên khoảng 0,4 tới 0,6 tại vùng có chữ để nền dưới chữ ổn định hơn; đặt riêng một lớp nền đặc hơn ngay dưới phần chữ trong khi vẫn giữ phần rìa khối trong suốt; hoặc thêm một lớp phủ chuyển sắc tối nhẹ vào chính ảnh nền trước khi đặt khối kính lên. Cách kiểm tra nhanh là chụp màn hình rồi lấy màu tại vùng chữ ở nhiều vị trí khác nhau và tính tỷ lệ tương phản cho từng vị trí.
Những giá trị cố định trong mã và phần bạn nên chỉnh thêm
Mã sinh ra có ba giá trị không nằm trong thanh trượt, bạn nên biết để tự chỉnh. Thứ nhất là bo góc cố định ở mức 16 pixel, đây là mức thường thấy cho thẻ nội dung; với hộp thoại lớn bạn có thể nâng lên 20 tới 24 pixel, còn với nút bấm nên hạ về 8 tới 12 pixel. Thứ hai là bóng đổ đặt sẵn với độ lan 30 pixel và độ đậm rất nhẹ; bóng này quan trọng hơn vẻ ngoài của nó, vì nó tạo cảm giác tấm kính nổi lên khỏi nền, bỏ đi thì khối trông như bị dán bẹp. Thứ ba là viền dày một pixel dùng chung màu với lớp kính; một kỹ thuật hay dùng để tăng cảm giác thật là làm viền trên sáng hơn viền dưới, mô phỏng ánh sáng chiếu từ trên xuống bắt vào cạnh kính. Ngoài ra bạn nên bọc phần khai báo bộ lọc trong một khối kiểm tra hỗ trợ, để trình duyệt không hỗ trợ sẽ nhận một nền đặc hơn thay vì một khối gần như trong suốt không đọc được chữ. Đây là bước hay bị bỏ qua nhất và cũng là bước tạo ra khác biệt giữa một hiệu ứng đẹp và một giao diện hỏng trên máy người dùng.
Câu hỏi thường gặp (FAQ)
Vì sao dán mã vào mà không thấy hiệu ứng gì?
Thường vì phía sau khối là một mảng màu phẳng. Thuộc tính này làm mờ những gì nằm sau khối, mà làm mờ một mảng phẳng thì vẫn ra mảng phẳng. Hãy đặt khối kính lên trên ảnh, lên chuyển sắc nhiều màu, hoặc lên một vùng có nội dung trôi qua khi cuộn.
Hiệu ứng chạy trên trình duyệt nào?
Chạy trên tất cả trình duyệt lớn hiện nay. Safari hỗ trợ từ sớm nhưng cần biến thể có tiền tố, và mã sinh ra ở đây đã kèm sẵn biến thể đó. Firefox chỉ bật theo mặc định từ phiên bản 103 ra mắt giữa năm 2022, nên máy cài bản cũ hơn sẽ không thấy hiệu ứng.
Nên đặt độ mờ bao nhiêu pixel?
Khoảng 8 tới 16 pixel là vùng hợp lý cho phần lớn trường hợp: chi tiết phía sau chỉ còn nhận ra hình khối chứ không đọc được nữa. Dưới 5 pixel thì hiệu ứng gần như không thấy, còn trên 25 pixel thì phần hậu cảnh mất hết cấu trúc và khối trông như một mảng sương đục.
Tăng độ bão hòa để làm gì?
Để bù lại phần màu bị lớp kính làm nhạt. Khi phủ một lớp trắng bán trong suốt lên ảnh, mọi màu phía dưới đều bị kéo về phía trắng và trông nhợt đi. Đẩy độ bão hòa lên khoảng 150 tới 200 phần trăm kéo màu trở lại gần với cảm nhận ban đầu, đây là chi tiết tạo nên vẻ trong trẻo của hiệu ứng.
Hiệu ứng có làm chậm trang không?
Có, đây là hiệu ứng nặng nhất trong nhóm hiệu ứng hình ảnh của CSS vì trình duyệt phải chụp lại hậu cảnh, làm mờ rồi ghép lại mỗi khi phía sau thay đổi. Trên điện thoại tầm trung, một thanh điều hướng cố định dùng hiệu ứng này sẽ gây giật rõ khi cuộn.
Có nên dùng cho thanh điều hướng cố định không?
Cân nhắc kỹ, vì đây là trường hợp tốn kém nhất: nội dung phía sau đổi liên tục khi cuộn nên phép làm mờ chạy lại không ngừng. Nếu vẫn muốn dùng, hãy giữ chiều cao thanh nhỏ, giảm độ mờ xuống dưới 10 pixel và kiểm tra thật kỹ trên điện thoại tầm trung.
Chữ trên lớp kính bị khó đọc, xử lý thế nào?
Vì nền sau lớp kính thay đổi liên tục nên độ tương phản không cố định. Hãy nâng độ trong suốt lên khoảng 0,4 tới 0,6 ở vùng có chữ, hoặc đặt riêng một lớp nền đặc hơn ngay dưới phần chữ, hoặc phủ một lớp chuyển sắc tối nhẹ lên ảnh nền trước khi đặt khối kính.
Mức tương phản tối thiểu cần đạt là bao nhiêu?
Tiêu chuẩn tiếp cận nội dung web yêu cầu 4,5 trên 1 cho chữ thường và 3 trên 1 cho chữ lớn, tức từ cỡ 24 pixel trở lên hoặc từ 18,66 pixel nếu in đậm. Với lớp kính, bạn phải đạt ngưỡng đó ở vị trí nền sáng nhất chứ không phải ở mức trung bình.
Vì sao hiệu ứng mất khi khối nằm trong một khối cha nhất định?
Vì khối cha có áp bộ lọc, phép biến đổi hình học hoặc thuộc tính khai báo trước sự thay đổi sẽ tạo ra một khối chứa mới, làm giới hạn phần hậu cảnh mà bộ lọc nhìn thấy. Cách xử lý là bỏ những thuộc tính đó ở khối cha, hoặc đưa khối kính ra ngoài khối cha đó trong cây tài liệu.
Nên chọn lớp kính màu trắng hay màu đen?
Trắng khi nền phía sau tối, đen khi nền phía sau sáng, đây là quy tắc chung nhất. Với giao diện có cả hai chế độ sáng và tối, hãy khai báo màu lớp kính bằng biến CSS rồi đổi giá trị theo chế độ, thay vì cố tìm một màu chạy tốt ở cả hai.
Làm sao để trình duyệt cũ không bị vỡ giao diện?
Bọc phần khai báo bộ lọc trong một khối kiểm tra hỗ trợ, và đặt bên ngoài một nền đặc hơn làm phương án dự phòng. Nếu không làm bước này, trình duyệt không hỗ trợ sẽ chỉ nhận lớp nền bán trong suốt và người dùng thấy một khối gần như trong suốt với chữ gần như không đọc được.
Bo góc và bóng đổ trong mã có chỉnh được không?
Được, chỉ là chúng không có thanh trượt nên bạn sửa tay sau khi dán. Bo góc đang cố định ở 16 pixel, phù hợp với thẻ nội dung; hộp thoại lớn nên tăng lên 20 tới 24 pixel còn nút bấm nên giảm về 8 tới 12 pixel. Bóng đổ nên giữ vì nó tạo cảm giác tấm kính nổi lên khỏi nền.
Từ khóa liên quan
- tạo hiệu ứng kính mờ css
- glassmorphism generator online
- backdrop filter blur css
- hiệu ứng frosted glass
- css glass effect
- thiết kế giao diện kính mờ
- code css hiệu ứng kính
- backdrop-filter không hoạt động
- hiệu ứng kính mờ trên safari
- glassmorphism là gì
- làm mờ nền phía sau khối
- css blur nền
- tăng saturation cho hiệu ứng kính
- độ tương phản chữ trên nền mờ
- hiệu ứng kính mờ ảnh hưởng hiệu năng
- thanh điều hướng kính mờ
- card kính mờ css
- sinh code css tự động
- hiệu ứng ui hiện đại
- công cụ tạo css miễn phí
