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 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…
Bộ lọc phông nền là gì?Theo MDN, “Thuộc tính CSS
0 cho phép bạn áp dụng các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho khu vực phía sau một phần tử. Bởi vì nó áp dụng cho mọi thứ phía sau phần tử, để thấy được hiệu ứng, bạn phải làm cho phần tử hoặc nền của phần tử ít nhất trong suốt một phần. ”Your content goes here that will be blurred when modal displayed.
Open Modal
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
Hãy làm một ví dụ đơn giảnBắt đầu bằng cách tạo một
1 với một lớpYour content goes here that will be blurred when modal displayed.
Open Modal
2Your content goes here that will be blurred when modal displayed.
Open Modal
Đượ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
2. Chúng tôi sẽ thêm mộtYour content goes here that will be blurred when modal displayed.
Open Modal
4 đáng yêu của một số quả dứa và làm cho nó bao phủ toàn bộ trangYour content goes here that will be blurred when modal displayed.
Open Modal
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
1 đó với lớpYour content goes here that will be blurred when modal displayed.
Open Modal
2 và nhẹ nhàng đặt một div với lớpYour content goes here that will be blurred when modal displayed.
Open Modal
7Your content goes here that will be blurred when modal displayed.
Open Modal
Đâ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
7 của chúng tôi bao phủ toàn bộ chiều cao của cửa sổ nhưng chỉ bằng một nửa chiều rộng, để chúng tôi có thể thấy sự khác biệt sau khi bộ lọc được áp dụngYour content goes here that will be blurred when modal displayed.
Open Modal
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 tôi sẽ thêm thuộc tính CSS huyền diệu
0 và cung cấp cho nó giá trị làYour content goes here that will be blurred when modal displayed.
Open Modal
01. Gợi ý, gợi ý…tăng/giảm px để tăng/giảm độ mờYour content goes here that will be blurred when modal displayed.
Open Modal
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
Thêm nhiều bộ lọcNếu bạn muốn thêm nhiều thuộc tính
0 vào một phần tử, chỉ cần tách chúng bằng dấu cách. Hãy cẩn thận; . Vâng, bỏ dấu chấm phẩy trong bài viết đầu tiên trên Phương tiện của tôi. Có chuyện gì vậyYour content goes here that will be blurred when modal displayed.
Open Modal
Đâ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
0Your content goes here that will be blurred when modal displayed.
Open Modal
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
0 để tạo hiệu ứng mờ hậu cảnh này sẽ giúp ít nhất một người. Xin vui lòng bình luận với bất kỳ suy nghĩ, đề xuất hoặc ghét sâu sắc. Tôi đã có cho mình một Twitter, Dribbble và bạn có thể theo dõi tôi trên Phương tiện trong trường hợp tôi quyết định làm điều này một lần nữaYour content goes here that will be blurred when modal displayed.
Open Modal
Hộp thoại phương thức là một trong những thành phần giao diện người dùng hữu ích để hiển thị thông tin tức thời cho người dùng. Ở trên cùng một trang web, nó có thể được sử dụng để hiển thị thông báo, nội dung thông tin, hình ảnh/video hoặc các yếu tố hoạt động. Nói chung, lớp phủ trong suốt bao phủ nội dung nền khi phương thức được hiển thị. Nhưng bạn có muốn tạo một phương thức có nền mờ bằng CSS không?
Tốt. trong hướng dẫn này, chúng tôi sẽ tạo một cửa sổ bật lên theo chế độ với lớp phủ mờ trên nội dung chính. Yêu cầu của dự án này là khi người dùng nhấp vào nút/liên kết, phương thức sẽ mở ra và lớp phủ mờ bao phủ nền. Phương thức có tiêu đề, khu vực nội dung và nút đóng
Khái niệm lập trình là chúng ta sẽ tạo/tạo kiểu cho một phương thức bằng HTML và CSS. Chúng tôi sẽ giữ nó ở hậu trường và hiển thị nó khi một lớp cụ thể được thêm vào phương thức. Chúng tôi sẽ sử dụng chức năng vanilla JavaScript để chuyển đổi lớp. Trước khi bắt đầu viết mã, hãy xem bản demo của phương thức này
Cấu trúc HTML
Trước hết, hãy tạo một phần tử div có tên lớp là
×2 và đặt nội dung trang của bạn bên trong nó. Vùng chứa này sẽ bị mờ khi phương thức hiển thị. Ngoài ra, hãy tạo một phần tử nút sẽ được sử dụng để kích hoạt cửa sổ bật lên theo chế độModal Title
Your Modal Content.
Your content goes here that will be blurred when modal displayed.
Open ModalSau đó, bạn cần tạo HTML cho modal popup ngay sau vùng chứa nội dung. Để làm như vậy, hãy tạo một phần tử div với tên lớp là “modal” và đặt một phần tử nút sẽ được sử dụng để đóng cửa sổ bật lên. Tương tự, tạo phần tử
×3 với tên lớpModal Title
Your Modal Content.
×4 và đặt nội dung của bạn sau nó. Cuối cùng, gói tất cả các phần tử này vào một trình bao bọc và xác định tên lớp của nó làModal Title
Your Modal Content.
×5Modal Title
Your Modal Content.
×Modal Title
Your Modal Content.
Bên trong thẻ div
×6, bạn có thể đặt bất kỳ thành phần HTML nào như hình ảnh, video, liên kết và nút, v.v.Modal Title
Your Modal Content.
Kiểu CSS cho Phương thức với Nền mờ
Sau khi tạo cấu trúc đánh dấu cho phương thức, giờ là lúc tạo kiểu cho nó bằng CSS. Nhưng trước đó, bạn cần một số kiểu cơ bản cho tài liệu HTML của mình để phương thức hoạt động. Vì vậy, hãy xác định kiểu cho nội dung, tiêu đề và đoạn văn như sau
________số 8 Bây giờ, chỉ định các kiểu CSS cho phần tử nút sẽ được sử dụng để mở phương thức. Nếu bạn muốn tùy chỉnh nút này, hãy xem gói nút CSS này
button { padding: 10px; border: none; border-radius: 20px; margin-bottom: 1.5em; background: #fff; cursor: pointer; min-width: 38px; font-size: 1em; }Tương tự, chỉ định kiểu cho nội dung trang của bạn. Giữ bộ lọc mờ 0 và độ mờ 1 cùng với thuộc tính chuyển tiếp CSS để tạo độ mượt mà
×0Modal Title
Your Modal Content.
Sau đó, xác định kiểu cho nội dung khi lớp
×7 được thêm vào phương thức. Đặt bộ lọc của nó là 8px và độ mờ 1Modal Title
Your Modal Content.
×2Modal Title
Your Modal Content.
Tương tự, tạo kiểu cho lớp
×8. Giữ cố định vị trí của nó và giữ nó ở phía sau bằng cách xác định giá trị 100vh cho thuộc tính trên cùng. Chỉ định giá trị 0 cho bên phải, dưới cùng và bên trái để vừa với toàn màn hình. Xác định độ mờ 1 và giá trị cao nhất 0 cho lớp hoạt động theo phương thứcModal Title
Your Modal Content.
×4Modal Title
Your Modal Content.
Lớp/phần tử “modal” là mục con của modal-wrapper. Chúng ta cần căn chỉnh nó vào giữa trang. Để làm như vậy, hãy giữ vị trí tương đối, ẩn tràn, xác định chiều cao, chiều rộng và giữ tự động lề trái và phải. Các giá trị cho bóng hộp, phần đệm và bán kính đường viền có thể được xác định theo nhu cầu của bạn
×5Modal Title
Your Modal Content.
Chỉ định kiểu cho tiêu đề phương thức như sau
×6Modal Title
Your Modal Content.
Bạn có thể xác định kiểu cho từng thành phần của nội dung phương thức bằng cách nhắm mục tiêu bộ chọn con. Sau đây là một ví dụ về phong cách đoạn nội dung phương thức. Tương tự, bạn có thể đặt kiểu tùy chỉnh cho các phần tử khác mà bạn đã đặt trong nội dung phương thức
×7Modal Title
Your Modal Content.
Cuối cùng, chỉ định kiểu CSS cho nút đóng. Giữ vị trí tuyệt đối của nó và đặt giá trị 20px cho cả thuộc tính bên trái và trên cùng. Bạn có thể tùy chỉnh các giá trị nền và màu khi cần
×0Modal Title
Your Modal Content.
Chức năng JavaScript để mở/đóng phương thức
Sau khi tạo và tạo kiểu cho phương thức, giờ là lúc để chức năng hóa nó bằng JavaScript. Chúng ta chỉ cần một hàm nhỏ để chuyển đổi lớp “modal–active”. Vì vậy, sau đây là mã JavaScript để mở/đóng cửa sổ bật lên phương thức
×1Modal Title
Your Modal Content.
Bạn đã làm xong việc đó. Tôi hy vọng bạn đã tạo thành công một chế độ CSS với nền mờ. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, hãy cho tôi biết bằng cách bình luận bên dưới
Làm cách nào để tạo cửa sổ bật lên trong HTML và CSS?
Để tạo popup trong CSS, chúng ta làm theo 3 bước chính. .Bước 1. Thêm HTML. Để tạo cửa sổ bật lên, trước tiên chúng ta phải tạo một biểu mẫu. .Bước 2. Thêm CSS. Tiếp theo, hãy tạo kiểu dáng cho cửa sổ bật lên và biểu mẫu của chúng ta. .Bước 3. Kết hợp HTML và CSS. Bây giờ chúng tôi kết hợp các tệp HTML và CSS để kết nối biểu mẫu bật lên và kiểu dáng của nóBộ lọc phông nền trong CSS là gì?
Thuộc tính CSS của bộ lọc phông nền cho phép bạn áp dụng các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho khu vực phía sau một phần tử . Bởi vì nó áp dụng cho mọi thứ phía sau phần tử, để thấy được hiệu ứng, bạn phải làm cho phần tử hoặc nền của nó ít nhất trong suốt một phần.Chủ Đề