Cara Mencipta UI Suis Menggunakan Mask CSS

Dalam pemprosesan imej, pelekat adalah teknik yang membolehkan anda menyembunyikan imej dengan yang lain. Topeng digunakan untuk membuat sebahagian daripada imej melihat-melalui. Anda boleh melakukan pelekat menggunakan CSS dengan bantuan sifat-sifat pelekat.

Dalam siaran hari ini, kami akan membuat imej bertopeng dengan menggunakan dua imej PNG dan teknik pelindung CSS, dan membolehkan pengguna mengendalikan kedua-dua keadaan imej (hari dan malam) dengan bantuan UI suis.

Kerana beberapa isu keserasian pelayar - tidak semua sifat pelindung disokong dalam setiap pelayar (pada Jun 2016) - Saya akan menunjukkan dua teknik untuk menambah topeng, satu untuk pelayar berasaskan Webkit, dan satu untuk Firefox. Dua langkah pertama dalam tutorial tiga langkah ini adalah sama untuk setiap penyemak imbas, tetapi akan ada perbezaan dalam langkah ketiga.

Langkah 1. Buat Suis Asas

Oleh kerana suis tipikal mempunyai dua keadaan hanya satu didayakan pada satu masa, anda boleh menggunakan kumpulan butang radio dua untuk mewujudkan komponen kerja suis. Letakkan setiap butang radio di hujung kiri dan kanan elemen ibu bapa mereka.

Kumpulan butang radio dicipta dengan memberi setiap butang radio yang sama nama atribut. Dalam kumpulan butang radio, hanya satu butang radio boleh diperiksa pada satu masa.

Kami mulakan dengan HTML dan CSS berikut:

HTML

CSS

Dalam CSS di bawah, saya menggunakan kedudukan mutlak untuk meletakkan butang radio pada skrin dengan tepat di mana saya mahu.

#outerWrapper lebar: 450px; ketinggian: 90px; padding: 10px; margin: 100px auto 0 auto; jejari sempadan: 55px; box-shadow: 0 0 10px 6px #EAEBED; latar belakang: #fff;  #innerWrapper ketinggian: 100%; jejari sempadan: 45px; limpahan: tersembunyi; kedudukan: relatif;  .radio width: 90px; ketinggian: 100%; kedudukan: mutlak; margin: 0; kelegapan: 0;  #rightRadio right: 0;  .radio: not (: checked) kursor: pointer;  

Saya menambah kelegapan: 0 memerintah ke .radio kelas untuk sembunyikan butang radio. Peraturan terakhir dalam blok kod di bawah, kursor: penunjuk; menunjukkan kursor penunjuk untuk butang radio yang tidak ditandatangani, supaya pengguna tahu butang yang hendak diklik untuk menghidupkan keadaan suis.

Langkah 2. Tambah Skins ke Switch

Dalam langkah ini, kami akan menambah dua

tag untuk kedua kulit di bawah butang radio dalam fail HTML kami, dan imej latar belakang untuk setiap kulit dalam CSS kami.

Saya menggunakan "Hari" dan "Malam" sebagai kedua-dua negeri suis, yang diilhamkan oleh pukulan Dribbble oleh Minh Killy Le.

HTML

CSS

#daySkin background-image: url ('day.png');  #nightSkin background-image: url ('night.png');  .skin width: 100%; ketinggian: 100%; penunjuk: tidak ada; kedudukan: mutlak; margin: 0; 

The penunjuk: tidak ada; peraturan ditambah ke kulit supaya peristiwa klik pada suis boleh melalui mereka, dan mencapai butang radio.

Dengan sifat-sifat penunjuk CSS, anda boleh menetapkan keadaan di mana unsur grafik boleh disasarkan oleh peristiwa tetikus.

Sebagai alternatif untuk kod di atas, dua tag (dengan imej sumber) di dalam

tag juga boleh berfungsi. Mereka akan menjadi kulit untuk kedua-dua negara suis.

Langkah 3a. Tambah Mask (versi Webkit)

Untuk Chrome dan pelayar berasaskan Webkit yang lain, saya akan menggunakannya topeng-imej Hartanah CSS, yang - seperti penulisan jawatan ini - hanya berfungsi dengan -webkit awalan dalam penyemak imbas Webkit. The topeng-imej harta membolehkan anda tentukan imej untuk digunakan sebagai topeng.

Secara umum, terdapat dua jenis pelekat: luminance dan alpha.

• In pelindung mata, bahagian gelap dari imej topeng menyembunyikan imej itu adalah masking: bagian yang lebih gelap berada dalam imej topeng, bahagian yang lebih tersembunyi itu dalam imej yang bertopeng.
• In pelindung alpha, bahagian telus dari imej topeng menyembunyikan imej yang lebih tebal: lebih telus pada bahagian dalam imej masker, bahagian yang lebih tersembunyi di dalam imej yang bertopeng.

Di Chrome (seperti versi 51.0.2704.103, Win10), hanya alpha yang seolah-olah sedang berfungsi.

Dalam CSS, alpha dan luminance adalah nilai-nilai jenis topeng harta.

Berikut adalah CSS itu menambah topeng kepada imej latar belakang dalam penyemak imbas Webkit:

CSS

#nightSkin background-image: url ('night.png'); topeng-jenis: alpha; / * bulatan telus dengan baki bahagian bawah * / -webkit-mask-image: radial-gradient (lingkaran pada 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) ;  / * Apabila kulit hari dipilih * / #leftRadio: checked ~ # nightSkin mask-type: alpha; / * lingkaran opaque dengan baki bahagian telus * / -webkit-mask-image: radial-gradient (lingkaran pada 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) ; 

Saya menggunakannya -webkit-mask-image harta untuk mencipta imej topeng awal. Nilainya menggunakan gradien radial () Fungsi CSS yang digunakan untuk membuat imej dari bentuk yang telah ditetapkan, kecerunan jejari, dan pusat kecerunan.

Untuk kulit malam, saya mencipta bulu telus, dan saya membuat bahagian yang tersisa daripada legap kontena. Untuk kulit hari, saya melakukan yang sebaliknya: mencipta bulatan legap dengan gradien radial () fungsi, dan membuat baki bahagian telus.

Walaupun ia masih belum disokong dalam penyemak imbas Webkit, saya menambahkannya jenis topeng harta ke CSS untuk rujukan masa depan.

Seperti yang anda lihat di atas, sempadan bulatan tidak begitu lancar. Untuk Sembunyikan tepi kasar, tambahkan

selepas kulit dalam bentuk bulatan (saiz yang sama dengan lingkaran topeng) dengan bayang kotak. Bayang-bayang akan menyembunyikan tepi kasar topeng bulatan.

HTML

CSS

#switchBtnOutline width: 90px; ketinggian: 100%; jejari sempadan: 45px; box-shadow: 0 0 2px 2px inset kelabu, 0 0 10px grey; penunjuk: tidak ada; kedudukan: mutlak; margin: 0;  / * Tempat #switchBtnOutline di hujung kanan ketika kulit hari dipilih * / #leftRadio: checked ~ # switchBtnOutline right: 0; 

Langkah 3b. Tambah Mask (versi Firefox)

The topeng-imej Hartanah CSS sebenarnya a harta rampasan, dan ia adalah sebahagian daripada harta pendek topeng yang membolehkan anda menentukan imej yang akan digunakan sebagai topeng juga. Sementara itu topeng-imej tidak disokong dalam Firefox lagi, topeng adalah.

walaupun topeng harta harus menerima imej yang dibuat dengan gradien radial () Fungsi CSS sebagai nilai, sama seperti topeng-imej harta benda, tidak ada sokongan untuk itu di Firefox.

Jadi, bukannya a gradien radial () imej, mari kita gunakan imej SVG sebagai imej topeng dengan jenis topeng luminance.

Imej SVG di atas kelihatan seperti gabungan a segi empat tepat putih dan a bulatan hitam. Tambah ini, dan satu lagi dengan a segi empat hitam dan a bulatan putih sebagai topeng untuk HTML yang kami gunakan dalam versi Webkit.

HTML

Gantikan (atau gabungkan dengan) kod CSS untuk #nightSkin kami menggunakan versi Webkit dengan kod berikut. Dan anda sudah selesai.

Kami sekarang mempunyai dua imej topeng yang berbeza (gradien CSS & SVG), dua jenis topeng yang berbeza (Alpha & Luminance), dan kedua-dua sokongan Webkit dan Firefox.

CSS

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

Semak Demo itu

• Demo
• Muat turun Sumber

Bagaimana Membuat Sistem Pulihkan Point dalam Windows 7

Bagaimana Membuat Sistem Pemulihan Point secara manual di XP

Cara Buat Kata Laluan Yang Kuat (dan Ingat Ini)