Trang chủ » Mã hóa » Cách tạo UI chuyển đổi bằng CSS Mask

    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đê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.

    Ảnh chụp màn hình của UI chuyển đổi với các nút radio trong trình duyệt Chrome

    Bước 2. Thêm Skins vào Switch

    Trong bước này, chúng tôi sẽ thêm hai

    các thẻ cho hai giao diện bên dưới các nút radio trong tệp HTML của chúng tôi và hình nền cho mỗi giao diện trong CSS của chúng tôi.

    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.

    Da ban ngày
    Da đêm

    HTML

    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; 

    Các 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.

    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 thẻ (có hình ảnh nguồn) bên trong

    thẻ cũng có thể làm việc. Họ sẽ là giao diện cho hai trạng thái chuyển đổi.

    Ảnh chụp màn hình của công tắc với giao diện bằng chrome

    Bước 3a. Thêm mặt nạ (phiên bản Webkit)

    Đối với Chrome và các trình duyệt dựa trên Webkit khác, tôi sẽ sử dụng 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ạ.

    Nói chung, có hai loại mặt nạ: độ chóialpha.

    • Trong mặt nạ độ chói, phần tối của hình ảnh mặt nạ che giấu hình ảnh mà nó đang che giấu: phần tối hơn nằm trong hình ảnh mặt nạ, phần ẩn càng nhiều trong hình ảnh bị che.
    • Trong mặt nạ alpha, phần trong suốt của hình ảnh mặt nạ che giấu hình ảnh mà nó đang che giấu: một phần càng trong suốt trong hình ảnh mặt nạ, phần đó càng bị ẩn trong hình ảnh bị che khuất.

    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, alphađộ chói là các giá trị của loại mặt nạ bất động sản.

    Đây là CSS thêm một mặt nạ để hình nền trong trình duyệt Webkit:

    CSS

    #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) ; 

    Tôi đã sử dụng -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.

    Đố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 radial-gradient () chức năng, và làm cho phần còn lại trong suốt.

    Mặc dù nó chưa được hỗ trợ trong các trình duyệt Webkit, tôi đã thêm loại mặt nạ thuộc tính CSS để tham khảo trong tương lai.

    Ảnh chụp màn hình của switch với Night skin được chọn
    Ảnh chụp màn hình của công tắc với giao diện ngày được chọn

    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

    sau các giao diện trong hình dạng của một vòng tròn (cùng kích thước với vòng tròn mặt nạ) với một bóng hộp. Bóng sẽ ẩn các cạnh thô của mặt nạ hình tròn.

    HTML

    CSS

    #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; ) 
    Ảnh chụp màn hình của công tắc với các cạnh thô của vòng tròn mặt nạ ẩn

    Bước 3b. Thêm mặt nạ (phiên bản Firefox)

    Các 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ặc dù 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.

    Vì vậy, thay vì một 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.

         

    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.

    Hình ảnh SVG (hình chữ nhật màu trắng và hình tròn màu đen cho mặt nạ)

    HTML

                 

    Thay thế (hoặc kết hợp với) mã CSS cho #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.

    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

    #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

    • Bản giới thiệu
    • Tải xuống nguồn
    © PHHSNEWS
    Thông tin hữu ích và lời khuyên về phát triển web. Lập trình, thiết kế web, CSS, HTML, JAVASCRIPT. Cấu hình và cài đặt lại WINDOWS. Tạo các trang web và ứng dụng từ đầu.