Máy phát điện thủy tinh

phông nền-filter: Blur() là thuộc tính CSS đằng sau giao diện kính mờ - một bảng mờ làm mờ bất kỳ chuyển động nào đằng sau nó thay vì chỉ làm mờ một màu phẳng. Điều đáng chú ý là chất lượng mờ gần như không thể đánh giá được bằng một mẫu màu tĩnh; nó chỉ có sức thuyết phục khi có thứ gì đó thực sự chuyển động bên dưới nó, giống như cách nó sẽ diễn ra trên một trang thực có nội dung, video hoặc một nhân vật hoạt hình. Trình tạo này đặt thẻ xem trước trên nền động thực sự thay vì nền tĩnh, vì vậy những gì bạn nhìn thấy khi kéo thanh trượt là những gì khách truy cập sẽ thực sự trải nghiệm.

Nền là một hoạt ảnh CSS thực: một gradient tuyến tính lớn được vẽ bằng 400% kích thước của phần tử, với @keyframes dịch chuyển vị trí nền qua lại trên một vòng lặp — không có vòng lặp hoạt ảnh JavaScript, không có canvas, chỉ là kỹ thuật định vị nền liên tục tương tự được sử dụng trong các phần anh hùng sản xuất. Độ mờ, tông màu và độ mờ, màu/độ mờ/chiều rộng của đường viền nổi bật, bán kính góc và độ mềm của bóng đều tạo nên phong cách trực tiếp của thẻ nổi và hộp CSS có thể sao chép phản chiếu các giá trị giống hệt nhau.

Không phải mọi trình duyệt đều hỗ trợ bộ lọc phông nền, do đó trình tạo cũng phát ra khối @supports not (backdrop-filter: Blur(1px)) thực — không phải là cử chỉ mã thông báo mà là quy tắc dự phòng với màu nền riêng được tính toán từ độ mờ tông màu thực tế của bạn. Bởi vì độ trong mờ không bị mờ trông tệ hơn đáng kể (bất cứ thứ gì đằng sau nó đều hiển thị ở trạng thái không bị mờ), dự phòng sẽ tự động tăng kênh alpha lên trên độ mờ của tông màu bạn đã chọn và một nhận xét trong CSS được tạo sẽ giải thích chính xác lý do và mức độ.

Mọi thứ đều được tính toán và hiển thị trong trình duyệt của riêng bạn: không cần tải lên, không cần tài khoản, không cần sử dụng máy chủ. Sao chép CSS khi thẻ trông ổn, thả nó vào bất kỳ thành phần nào bạn muốn đặt phía trên ảnh, video hoặc chuyển màu và giữ khối @supports để các trình duyệt cũ hơn vẫn nhận được thẻ dễ đọc, mờ hơn thay vì thẻ khó nhìn thấy.