Cách tạo UI chuyển đổi bằng CSS Mask
Trong xử lý ảnh, mặt nạ là một kỹ thuật cho phép bạn ẩn một hình ảnh với một cái khác. Một mặt nạ được sử dụng để tạo ra một phần của hình ảnh nhìn xuyên qua. Bạn có thể thực hiện mặt nạ bằng CSS với sự trợ giúp của các thuộc tính mặt nạ.
Trong bài viết hôm nay, chúng tôi sẽ tạo ra một hình ảnh bị che bằng cách sử dụng hai hình ảnh PNG và kỹ thuật mặt nạ CSS và cho phép người dùng xử lý hai trạng thái của hình ảnh (ngày và đêm) với sự trợ giúp của UI chuyển đổi.
Do một số vấn đề tương thích trình duyệt - không phải tất cả các thuộc tính mặt nạ đều được hỗ trợ trong mọi trình duyệt (kể từ tháng 6 năm 2016) - tôi sẽ hiển thị hai kỹ thuật để thêm mặt nạ, một cho trình duyệt dựa trên Webkit và một cho Firefox. Hai bước đầu tiên trong hướng dẫn ba bước này giống nhau cho mọi trình duyệt, nhưng sẽ có sự khác biệt trong bước thứ ba.
Bước 1. Tạo một chuyển đổi cơ bản
Vì một công tắc thông thường có hai trạng thái với chỉ một kích hoạt tại một thời điểm, bạn có thể sử dụng một nhóm nút radio của hai để tạo ra các thành phần làm việc của công tắc. Đặt từng nút radio ở đầu bên trái và bên phải của phần tử cha.
Các nhóm nút radio được tạo bằng cách cho mỗi nút radio giống nhau Tên thuộc tính. Trong một nhóm nút radio, chỉ có một nút radio có thể được kiểm tra tại một thời điểm.
Chúng tôi bắt đầu với HTML và CSS sau:
HTML
CSS
Trong CSS bên dưới, tôi đã sử dụng định vị tuyệt đối để đặt các nút radio trên màn hình chính xác nơi tôi muốn.
#outerWrapper width: 450px; chiều cao: 90px; phần đệm: 10px; lề: 100px tự động 0 tự động; bán kính đường viền: 55px; hộp bóng: 0 0 10px 6px #EAEBED; nền: #fff; #innerWrapper chiều cao: 100%; bán kính đường viền: 45px; tràn: ẩn; vị trí: tương đối; .radio width: 90px; chiều cao: 100%; vị trí: tuyệt đối; lề: 0; độ mờ đục: 0; #rightRadio phải: 0; .radio: not (: đã kiểm tra) con trỏ: con trỏ;
Tôi đã thêm độ mờ đục: 0 quy tắc .radio lớp để ẩn các nút radio. Quy tắc cuối cùng trong khối mã bên dưới, con trỏ: con trỏ; hiển thị con trỏ con trỏ cho nút radio không được kiểm tra để người dùng biết phải nhấp vào nút nào để chuyển trạng thái chuyển đổi.
Bước 2. Thêm Skins vào Switch
Trong bước này, chúng tôi sẽ thêm hai Tôi đang sử dụng "Ngày" và "Đêm" là hai trạng thái của công tắc, lấy cảm hứng từ một cú lừa bóng của Minh Killy Le. HTML CSS Các Với thuộc tính CSS của các sự kiện con trỏ, bạn có thể đặt các trường hợp theo đó một yếu tố đồ họa có thể nhắm mục tiêu bởi các sự kiện chuột. Thay thế cho mã ở trên, hai Đối với Chrome và các trình duyệt dựa trên Webkit khác, tôi sẽ sử dụng Nói chung, có hai loại mặt nạ: độ chói và alpha. Trong Chrome (kể từ phiên bản 51.0.2704.103, Win10), chỉ có alpha dường như hiện đang hoạt động. Trong CSS, Đây là CSS thêm một mặt nạ để hình nền trong trình duyệt Webkit: CSS Tôi đã sử dụng Đối với làn da ban đêm, tôi tạo ra một vòng tròn trong suốt, và tôi làm cho phần còn lại của hộp chứa mờ đục. Đối với làn da ban ngày, tôi đã làm ngược lại: tạo ra một vòng tròn mờ đục với Mặc dù nó chưa được hỗ trợ trong các trình duyệt Webkit, tôi đã thêm Như bạn có thể thấy ở trên, đường viền của vòng tròn không được trơn tru lắm. Đến ẩn các cạnh thô, thêm một HTML CSS Các Mặc dù Vì vậy, thay vì một Hình ảnh SVG ở trên trông giống như một sự kết hợp của một hình chữ nhật màu trắng và một vòng tròn màu đen. Thêm cái này và cái khác với hình chữ nhật màu đen và một vòng tròn trắng làm mặt nạ cho HTML mà chúng tôi đã sử dụng trong phiên bản Webkit. HTML Thay thế (hoặc kết hợp với) mã CSS cho Bây giờ chúng tôi có hai hình ảnh mặt nạ khác nhau (CSS gradient & SVG), hai loại mặt nạ khác nhau (Alpha & Luminance) và cả hỗ trợ Webkit và Firefox. CSS
#daySkin hình nền: url ('day.png'); #nightSkin hình nền: url ('night.png'); . da chiều rộng: 100%; chiều cao: 100%; sự kiện con trỏ: không có; vị trí: tuyệt đối; lề: 0; sự kiện con trỏ: không có; quy tắc được thêm vào giao diện để các sự kiện nhấp chuột trên công tắc có thể đi qua chúng, và đạt các nút radio.
Bước 3a. Thêm mặt nạ (phiên bản Webkit)
hình ảnh mặt nạ Thuộc tính CSS, mà - như cách viết của bài đăng này - chỉ hoạt động với -webkit tiền tố trong trình duyệt Webkit. Các hình ảnh mặt nạ tài sản cho phép bạn chỉ định hình ảnh được sử dụng như mặt nạ.alpha và độ chói là các giá trị của loại mặt nạ bất động sản.#nightSkin hình nền: url ('night.png'); loại mặt nạ: alpha; / * vòng tròn trong suốt với phần còn lại mờ đục * / -webkit-mask-image: radial-gradient (vòng tròn ở 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ; / * Khi da ban ngày được chọn * / #leftRadio: đã kiểm tra ~ # nightSkin mask-type: alpha; / * vòng tròn mờ với phần còn lại trong suốt * / -webkit-mask-image: radial-gradient (vòng tròn ở 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; -webkit-mask-hình ảnh tài sản để tạo hình ảnh mặt nạ ban đầu. Giá trị của nó sử dụng radial-gradient () Hàm CSS được sử dụng để tạo hình ảnh từ hình dạng được xác định trước, độ dốc xuyên tâm và tâm của gradient.radial-gradient () chức năng, và làm cho phần còn lại trong suốt.loại mặt nạ thuộc tính CSS để tham khảo trong tương lai.
#switchBtnOutline width: 90px; chiều cao: 100%; bán kính đường viền: 45px; hộp bóng: 0 0 2px 2 pixel màu xám, 0 0 10px xám; sự kiện con trỏ: không có; vị trí: tuyệt đối; lề: 0; )
Bước 3b. Thêm mặt nạ (phiên bản Firefox)
hình ảnh mặt nạ Thuộc tính CSS thực sự là một tài sản lâu năm, và nó là một phần của tài sản tốc ký mặt nạ cho phép bạn chỉ định hình ảnh sẽ được sử dụng làm mặt nạ. Trong khi hình ảnh mặt nạ chưa được hỗ trợ trong Firefox, mặt nạ Là.mặt nạ thuộc tính nên chấp nhận một hình ảnh được tạo bằng radial-gradient () Hàm CSS là một giá trị, giống như hình ảnh mặt nạ tài sản đã làm, không có hỗ trợ cho điều đó trong Firefox.radial-gradient () hình ảnh, hãy sử dụng hình ảnh SVG làm hình ảnh mặt nạ với loại mặt nạ độ chói.
#nightSkin chúng tôi đã sử dụng trong phiên bản Webkit với mã sau đây. Và bạn đã hoàn thành.#nightSkin hình nền: url ('night.png'); loại mặt nạ: độ chói; mặt nạ: url (#leftSwitchMask); #leftRadio: đã kiểm tra ~ # nightSkin mask-type: độ chói; mặt nạ: url (#rightSwitchMask); Kiểm tra bản demo
