Cara Membuat Switch UI Menggunakan Topeng CSS

Dalam pengolahan gambar, topeng adalah teknik yang memungkinkan Anda sembunyikan gambar dengan yang lain. Topeng digunakan untuk membuat sebagian gambar tembus pandang. Anda dapat melakukan masking menggunakan CSS dengan bantuan properti masking.

Dalam posting hari ini kita akan membuat gambar bertopeng dengan menggunakan dua gambar PNG dan teknik penyembunyian CSS, dan memungkinkan pengguna untuk menangani dua status gambar (hari dan malam) dengan bantuan UI saklar.

Karena beberapa masalah kompatibilitas browser - tidak semua properti masking didukung di setiap browser (per Juni 2016) - Saya akan tunjukkan dua teknik untuk menambahkan topeng, satu untuk browser berbasis Webkit, dan satu untuk Firefox. Dua langkah pertama dalam tutorial tiga langkah ini sama untuk setiap browser, tetapi akan ada perbedaan pada langkah ketiga.

Langkah 1. Buat Switch Dasar

Karena saklar khas memiliki dua negara dengan hanya satu diaktifkan pada suatu waktu, Anda dapat menggunakan a kelompok tombol radio dua untuk membuat komponen kerja sakelar. Tempatkan setiap tombol radio di ujung kiri dan kanan elemen induknya.

Grup tombol radio dibuat dengan memberikan masing-masing tombol radio sama nama atribut. Dalam grup tombol radio, hanya satu tombol radio dapat diperiksa sekaligus.

Kami mulai dengan HTML dan CSS berikut:

HTML

CSS

Pada CSS di bawah ini, saya menggunakan penentuan posisi absolut untuk menempatkan tombol radio di layar tepat di tempat yang saya inginkan.

#outerWrapper width: 450px; tinggi: 90px; padding: 10px; margin: 100px otomatis 0 otomatis; batas-radius: 55px; box-shadow: 0 0 10px 6px #EAEBED; latar belakang: #fff;  #innerWrapper height: 100%; batas-radius: 45px; overflow: disembunyikan; posisi: relatif;  .radio width: 90px; tinggi: 100%; posisi: absolut; margin: 0; opacity: 0;  #rightRadio right: 0;  .radio: not (: checked) cursor: pointer;  

Saya menambahkan opacity: 0 aturan untuk .radio kelas untuk sembunyikan tombol radio. Aturan terakhir dalam blok kode di bawah ini, kursor: pointer; menunjukkan kursor penunjuk untuk tombol radio yang tidak dicentang, sehingga pengguna tahu tombol mana yang harus diklik untuk mengaktifkan keadaan sakelar.

Langkah 2. Tambahkan Skins ke Switch

Pada langkah ini, kami akan menambahkan dua

tag untuk dua skin di bawah tombol radio di file HTML kami, dan gambar latar belakang untuk setiap skin di CSS kami.

Saya menggunakan "Day" dan "Night" sebagai dua negara saklar, terinspirasi oleh tembakan Dribbble oleh Minh Killy Le.

HTML

CSS

#daySkin background-image: url ('day.png');  #nightSkin background-image: url ('night.png');  .skin width: 100%; tinggi: 100%; pointer-events: tidak ada; posisi: absolut; margin: 0; 

Itu pointer-events: tidak ada; aturan ditambahkan ke skins sehingga acara klik pada sakelar dapat melewati mereka, dan mencapai tombol radio.

Dengan properti CSS pointer-event Anda dapat mengatur keadaan di mana elemen grafis dapat ditargetkan oleh acara mouse.

Sebagai alternatif untuk kode di atas, dua tag (dengan gambar sumber) di dalam

tag juga bisa berfungsi. Mereka akan menjadi kulit untuk dua status sakelar.

Langkah 3a. Tambahkan Topeng (versi Webkit)

Untuk Chrome dan browser berbasis Webkit lainnya, saya akan menggunakan gambar topeng Properti CSS, yang - pada saat penulisan posting ini - hanya berfungsi dengan -webkit awalan di browser Webkit. Itu gambar topeng properti memungkinkan Anda tentukan gambar untuk digunakan sebagai topeng.

Secara umum, ada dua jenis masking: pencahayaan dan alfa.

• Di masking pencahayaan, bagian gelap dari gambar topeng menyembunyikan gambar yang disembunyikan: bagian yang lebih gelap ada di gambar topeng, semakin tersembunyi bagian itu dalam gambar yang sedang ditutup.
• Di masker alpha, bagian transparan dari gambar topeng menyembunyikan gambar yang disembunyikan: semakin banyak bagian transparan dalam gambar topeng, semakin tersembunyi bagian itu dalam gambar yang sedang ditutup.

Di Chrome (pada versi 51.0.2704.103, Win10), saat ini hanya alpha yang berfungsi.

Dalam CSS, alfa dan pencahayaan adalah nilai dari jenis topeng milik.

Inilah CSS-nya itu menambahkan topeng ke gambar latar belakang di browser Webkit:

CSS

#nightSkin background-image: url ('night.png'); tipe topeng: alpha; / * lingkaran transparan dengan bagian buram yang tersisa * / -webkit-mask-image: radial-gradient (lingkaran di 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ;  / * Ketika kulit siang dipilih * / #leftRadio: checked ~ # nightSkin mask-type: alpha; / * lingkaran buram dengan sisa bagian transparan * / -webkit-mask-image: radial-gradient (lingkaran di 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; 

Saya menggunakan -webkit-mask-image properti untuk membuat gambar topeng awal. Nilainya menggunakan radial-gradient () Fungsi CSS yang digunakan untuk membuat gambar dari bentuk yang telah ditentukan, gradien radial, dan pusat gradien.

Untuk kulit malam, saya membuat lingkaran transparan, dan saya membuat bagian sisa wadah menjadi buram. Untuk kulit siang, saya melakukan yang sebaliknya: membuat lingkaran buram dengan radial-gradient () berfungsi, dan membuat bagian yang tersisa transparan.

Meskipun belum didukung di browser Webkit, saya menambahkan jenis topeng properti ke CSS untuk referensi di masa mendatang.

Seperti yang Anda lihat di atas, batas lingkaran tidak terlalu mulus. Untuk sembunyikan tepi yang kasar, tambah sebuah

setelah kulit dalam bentuk lingkaran (ukuran yang sama seperti lingkaran topeng) dengan bayangan kotak. Bayangan akan menyembunyikan tepi kasar topeng lingkaran.

HTML

CSS

#switchBtnOutline width: 90px; tinggi: 100%; batas-radius: 45px; box-shadow: 0 0 2px 2px inset abu-abu, 0 0 10px abu-abu; pointer-events: tidak ada; posisi: absolut; margin: 0;  / * Tempatkan #switchBtnOutline di ujung kanan ketika kulit siang dipilih * / #leftRadio: dicentang ~ # switchBtnOutline right: 0; 

Langkah 3b. Add Mask (versi Firefox)

Itu gambar topeng Properti CSS sebenarnya a properti bekas, dan itu bagian dari properti steno topeng yang memungkinkan Anda menentukan gambar yang akan digunakan sebagai topeng juga. Sementara gambar topeng belum didukung di Firefox, topeng aku s.

walaupun topeng properti harus menerima gambar yang dibuat dengan radial-gradient () CSS berfungsi sebagai nilai, sama seperti gambar topeng properti itu, belum ada dukungan untuk itu di Firefox.

Jadi, bukannya a radial-gradient () gambar, mari kita gunakan gambar SVG sebagai gambar topeng dengan jenis topeng pencahayaan.

Gambar SVG di atas terlihat seperti kombinasi dari a persegi panjang putih dan a lingkaran hitam. Tambahkan ini, dan satu lagi dengan a kotak hitam dan a lingkaran putih sebagai topeng ke HTML yang kami gunakan dalam versi Webkit.

HTML

Ganti (atau gabungkan dengan) kode CSS untuk #nightSkin kami menggunakan dalam versi Webkit dengan kode berikut. Dan kamu sudah selesai.

Kami sekarang memiliki dua gambar topeng yang berbeda (CSS gradient & SVG), dua jenis topeng yang berbeda (Alpha & Luminance), dan keduanya dukungan Webkit dan Firefox.

CSS

#nightSkin background-image: url ('night.png'); tipe topeng: luminance; mask: url (#leftSwitchMask);  #leftRadio: checked ~ # nightSkin mask-type: luminance; mask: url (#rightSwitchMask); 

Lihat Demo

• Demo
• Sumber Unduhan

Cara Membuat Titik Pemulihan Sistem di Windows 7

Cara Membuat Titik Pemulihan Sistem secara Manual di XP

Cara Membuat Kata Sandi yang Kuat (dan Ingat Itu)