::backdrop trong CSS: Lớp phủ tuyệt đẹp cho Modal & Dialog

Bạn muốn tạo một lớp phủ mờ ảo, tinh tế cho các hộp thoại (dialog) hoặc cửa sổ modal của mình? Thuộc tính ::backdrop trong CSS chính là giải pháp hoàn hảo. Tìm hiểu cách sử dụng nó để nâng tầm giao diện người dùng!

Bạn có thể khám phá thêm các thuộc tính CSS khác tại trang tổng quan CSS của chúng tôi, hoặc tìm hiểu thêm về [CSS là gì?] để có cái nhìn tổng quan.

Giới thiệu ::backdrop

::backdrop là một pseudo-element (phần tử giả) trong CSS. Nó đại diện cho lớp phủ trực tiếp nằm bên dưới một phần tử đang hiển thị ở chế độ toàn màn hình (fullscreen) hoặc một phần tử hộp thoại ( <dialog> ) đang mở. Lớp phủ này nằm giữa phần tử đó và tất cả các phần tử khác trên trang.

Hãy tưởng tượng một lớp kính mờ được đặt phía sau cửa sổ modal của bạn. Đó chính là hiệu ứng mà ::backdrop mang lại.

Tại sao nên sử dụng ::backdrop?

Sử dụng ::backdrop mang lại nhiều lợi ích cho trải nghiệm người dùng:

• Tập trung sự chú ý: Làm mờ các nội dung khác trên trang, hướng sự tập trung vào hộp thoại hoặc modal.
• Cải thiện tính thẩm mỹ: Thêm hiệu ứng trực quan đẹp mắt cho giao diện.
• Tăng cường khả năng sử dụng: Giúp người dùng dễ dàng nhận biết phần nào của trang đang tương tác.

Cách sử dụng ::backdrop

Để sử dụng ::backdrop , bạn chỉ cần áp dụng nó cho phần tử <dialog> hoặc phần tử đang ở chế độ toàn màn hình. Sau đó, bạn có thể tùy chỉnh các thuộc tính CSS như màu sắc, độ mờ, hoặc hiệu ứng bộ lọc.

Ví dụ cơ bản với <dialog>

Đầu tiên, chúng ta tạo một phần tử <dialog> đơn giản:

<dialog id="myDialog"> <p>Đây là nội dung của hộp thoại.</p> <button id="closeDialog">Đóng</button> </dialog> <button id="openDialog">Mở hộp thoại</button> <script> const dialog = document.getElementById('myDialog'); const openDialogButton = document.getElementById('openDialog'); const closeDialogButton = document.getElementById('closeDialog'); openDialogButton.addEventListener('click', () => { dialog.showModal(); }); closeDialogButton.addEventListener('click', () => { dialog.close(); }); </script>

Tiếp theo, chúng ta thêm CSS để tùy chỉnh ::backdrop :

dialog::backdrop { background-color: rgba(0, 0, 0, 0.5); /* Màu đen với độ mờ 50% */ backdrop-filter: blur(5px); /* Hiệu ứng làm mờ */ }

Đoạn CSS này tạo ra một lớp phủ màu đen với độ mờ 50% và hiệu ứng làm mờ 5px phía sau hộp thoại.

Ví dụ với chế độ toàn màn hình (Fullscreen API)

Bạn cũng có thể sử dụng ::backdrop với các phần tử đang hiển thị ở chế độ toàn màn hình bằng Fullscreen API.

/* CSS */ :fullscreen::backdrop { background-color: rgba(255, 255, 255, 0.8); /* Màu trắng với độ mờ 80% */ } /* JavaScript */ const element = document.documentElement; // Hoặc một phần tử cụ thể function toggleFullscreen() { if (!document.fullscreenElement) { element.requestFullscreen().catch(err => { console.error(`Lỗi khi bật chế độ toàn màn hình: ${err.message}`); }); } else { document.exitFullscreen(); } }

Khi phần tử ở chế độ toàn màn hình, ::backdrop sẽ có màu trắng với độ mờ 80%.

Các thuộc tính CSS có thể sử dụng với ::backdrop

Bạn có thể sử dụng hầu hết các thuộc tính CSS thông thường để tùy chỉnh ::backdrop , bao gồm:

• background-color : Đặt màu nền.
• opacity : Điều chỉnh độ mờ.
• backdrop-filter : Áp dụng các hiệu ứng bộ lọc như blur, grayscale, brightness, v.v.
• mix-blend-mode : Xác định cách lớp phủ hòa trộn với nội dung bên dưới.

Lưu ý khi sử dụng ::backdrop

Mặc dù ::backdrop rất hữu ích, bạn cần lưu ý một vài điều:

• Khả năng tương thích: Đảm bảo kiểm tra khả năng tương thích của trình duyệt trước khi sử dụng, đặc biệt là với các trình duyệt cũ.
• Hiệu suất: Các hiệu ứng bộ lọc ( backdrop-filter ) có thể ảnh hưởng đến hiệu suất, đặc biệt trên các thiết bị di động.
• Tính dễ đọc: Đảm bảo lớp phủ không làm ảnh hưởng đến khả năng đọc của nội dung bên dưới.

Kết luận

::backdrop là một công cụ mạnh mẽ để tạo ra các hiệu ứng lớp phủ đẹp mắt và chuyên nghiệp cho các hộp thoại và modal trong ứng dụng web của bạn. Hãy thử nghiệm và khám phá những khả năng sáng tạo mà nó mang lại để nâng cao trải nghiệm người dùng.