Popup làm mờ nền css

Điều này có thể hữu ích khi bạn muốn xóa các bộ lọc nền theo điều kiện, chẳng hạn như khi di chuột hoặc tại một điểm dừng cụ thể

Áp dụng có điều kiện

​Hover, focus và các trạng thái khác

Tailwind cho phép bạn áp dụng có điều kiện các lớp tiện ích ở các trạng thái khác nhau bằng cách sử dụng các công cụ sửa đổi biến thể. Ví dụ: sử dụng hover:backdrop-blur-lg để chỉ áp dụng tiện ích backdrop-blur-lg khi di chuột

Để biết danh sách đầy đủ tất cả các công cụ sửa đổi trạng thái có sẵn, hãy xem tài liệu về Hover, Focus và Other States

Bạn cũng có thể sử dụng các công cụ sửa đổi biến thể để nhắm mục tiêu các truy vấn phương tiện như điểm ngắt phản hồi, chế độ tối, chuyển động giảm ưu tiên, v.v. Ví dụ: sử dụng md:backdrop-blur-lg để áp dụng tiện ích backdrop-blur-lg chỉ với kích thước màn hình trung bình trở lên

Để tìm hiểu thêm, hãy xem tài liệu về Thiết kế đáp ứng, Chế độ tối và các công cụ sửa đổi truy vấn phương tiện khác

​Sử dụng các giá trị tùy chỉnh

Tùy chỉnh chủ đề của bạn

Theo mặc định, Tailwind bao gồm một số tiện ích backdrop-blur có mục đích chung. Bạn có thể tùy chỉnh các giá trị này bằng cách chỉnh sửa theme.backdropBlur hoặc theme.extend.backdropBlur trong tệp backdrop-blur-{amount?}0 của mình

module.exports = {
  theme: {
    extend: {
      backdropBlur: {
        xs: '2px',
      }
    }
  }
}

Tìm hiểu thêm về cách tùy chỉnh chủ đề mặc định trong tài liệu tùy chỉnh chủ đề

Giá trị tùy ý

Nếu bạn cần sử dụng giá trị backdrop-blur một lần không hợp lý để đưa vào chủ đề của mình, hãy sử dụng dấu ngoặc vuông để tạo nhanh một thuộc tính bằng cách sử dụng bất kỳ giá trị tùy ý nào

Làm mờ hậu cảnh thật thú vị. Đây là một thực tế không thể tranh cãi. Mỗi giao diện người dùng phải có ít nhất mười hiệu ứng làm mờ nền trong đó (tốt nhất là xếp chồng lên nhau) và mọi giao diện được tạo kể từ khi tạo world wide web mà không có hiệu ứng làm mờ nền phải được gắn cờ là nợ kỹ thuật có mức độ ưu tiên cao. Đây là sự thật. Các nhà phát triển yêu thích khi bạn cho họ xem các bằng chứng thiết kế với nền mờ. Điều này là sai

Đó là bởi vì làm mờ nền về cơ bản là không thể thực hiện được trên các ứng dụng web, khiến các nhà thiết kế cảm thấy thất vọng, bị lừa dối và hoàn toàn vô dụng với tư cách là con người. Nhưng tất cả thay đổi ngày hôm nay. Chà, nó thực sự đã thay đổi vào năm 2018 hay gì đó và tôi vừa tìm thấy trang MDN, nhưng bạn hiểu rồi đó

Vì vậy, đây là cách tạo hiệu ứng mờ hậu cảnh bằng cách sử dụng thuộc tính CSS bộ lọc phông nền

backdrop-filter: blur(5px);

Đó là nó

Nếu bạn khăng khăng muốn đọc phần còn lại của bài viết, thì đây là chi tiết hơn một chút…

Theo MDN, “Thuộc tính CSS

backdrop-filter: blur(5px);

Trong trường hợp bạn đập nhãn cầu của mình vào một chiếc kéo trong nửa câu đầu tiên, về cơ bản, họ nói rằng nó hoạt động trong nhà phát triển giống hệt như nó hoạt động trong công cụ thiết kế mà bạn chọn (Figma, Sketch, Adobe XD, Framer, bất kỳ thứ gì khác

Bất cứ điều gì đằng sau sự mờ ảo...hãy trở nên mờ nhạt

Bắt đầu bằng cách tạo một

backdrop-filter: blur(5px);

backdrop-filter: blur(5px);

Được rồi, chúng ta hãy thưởng thức một ly cà phê xứng đáng và bánh muffin hạt chuối. Tự phủi bụi và sau đó thêm một số CSS vào lớp

backdrop-filter: blur(5px);

backdrop-filter: blur(5px);

Bây giờ hãy thêm phần làm mờ. Chúng ta sẽ lặng lẽ lẻn vào bên trong

backdrop-filter: blur(5px);

backdrop-filter: blur(5px);

backdrop-filter: blur(5px);

Đây là vòng phỏng vấn thứ 45 của Google. Hãy hoàn thành việc thay đổi trái tim và khối óc

Chúng tôi sẽ làm cho lớp

backdrop-filter: blur(5px);

Nếu bạn muốn phần mờ có màu, bạn cần thêm thuộc tính nền có giá trị rgba. Đảm bảo rằng alpha (độ mờ) nhỏ hơn 1 để chúng ta có thể nhìn xuyên qua màu sắc

Sau đó, chúng ta sẽ thêm thuộc tính CSS

backdrop-filter: blur(5px);

backdrop-filter: blur(5px);

Bây giờ bạn nên nhìn thẳng vào đỉnh cao của sự khéo léo và phát minh của con người. Bốn quả dứa bị nhòe đi một nửa. Nói một cách nghiêm túc, nó rất tuyệt

Nếu bạn muốn thêm nhiều thuộc tính

backdrop-filter: blur(5px);

Đây là ví dụ Codepen của tôi hoàn chỉnh với hoạt ảnh vô nghĩa và một nút để chuyển đổi lớp chứa nhiều thuộc tính

backdrop-filter: blur(5px);

Rõ ràng, bạn có thể trở nên khá sáng tạo với điều này. Nó đã được thử nghiệm trong một thời gian, vì vậy hãy đảm bảo kiểm tra tính tương thích của trình duyệt và tất cả những thứ quan trọng đó. Khi viết bài này, MDN cho biết mọi trình duyệt chính ngoại trừ Internet Explorer, Firefox cho Android và Samsung Internet đều sử dụng nó, vì vậy hãy viết một số dự phòng cho những trình duyệt đó.

Gửi đến những anh hùng đã làm nên điều này, tôi xin chân thành cảm ơn. Bạn đã làm cho các bức ảnh Dribbble của chúng tôi có nhiều cơ hội được nhìn thấy ánh sáng ban ngày hơn

Hy vọng bản tóm tắt cơ bản về cách sử dụng

backdrop-filter: blur(5px);