Як створити комутатор UI за допомогою CSS Mask
У процесі обробки зображень, маскування це техніка, яка дозволяє приховати зображення з іншим. Для створення частини зображення використовується маска прозорий. Ви можете виконати маскування за допомогою CSS за допомогою маскуючих властивостей.
У сьогоднішньому повідомленні ми створимо замасковане зображення за допомогою двох зображень PNG і методів маскування CSS, і дозволимо користувачам обробляти два стани зображення (день і ніч) за допомогою комутатора UI.
Через деякі проблеми із сумісністю з браузером - не всі властивості маскування підтримуються в кожному браузері (станом на червень 2016 року) - я покажу дві методики додавання масок, один для браузерів на основі Webkit, а другий - для Firefox. Два перших кроки в цьому покроковому посібнику є однаковими для кожного браузера, але на третьому кроці буде різниця.
Крок 1. Створіть базовий комутатор
Оскільки типовий комутатор має два стани з тільки один увімкнено одночасно можна використовувати a перемикач групи з двох створити робочі компоненти комутатора. Помістіть кожну перемикач на лівому та правому кінцях батьківського елемента.
Групи радіо-кнопок створюються, надаючи кожному перемикачу однакові кнопки ім'я атрибут. У групі перемикачів, лише один перемикач можна перевірити одночасно.
Почнемо з наступних HTML і CSS:
HTML
CSS
У CSS нижче, я використав абсолютне позиціонування для розміщення перемикачів на екрані саме там, де я хочу.
#outerWrapper width: 450px; висота: 90px; заповнення: 10px; запас: 100px auto 0 auto; кордон-радіус: 55px; коробка-тінь: 0 0 10px 6px #EAEBED; фон: #fff; #innerWrapper висота: 100%; кордон-радіус: 45px; переповнення: приховано; позиція: відносна; .radio ширина: 90px; висота: 100%; позиція: абсолютна; маржа: 0; непрозорість: 0; #rightRadio right: 0; .radio: not (: checked) курсор: покажчик;
Я додав непрозорість: 0 правило до .радіо клас для того, щоб приховати перемикачі. Останнє правило в кодовому блоці нижче, курсор: покажчик; показує курсор вказівника для перемикача без позначки, щоб користувачі знали, яку кнопку натиснути для перемикання стану комутатора.
Крок 2. Додайте скіни до комутатора
На цьому кроці ми додамо два Я використовую "День" і "Ніч" як два стани перемикача, натхненний Dribbble пострілом Мінь Кіллі Ле. HTML CSS The За допомогою властивості CSS покажчика-події можна задати обставини, за яких може бути графічний елемент мішені. Як альтернативу коду вище, два Для Chrome та інших веб-переглядачів на основі Webkit я скористаюся Загалом, існує два види маскування: яскравість і альфа. У Chrome (починаючи з версії 51.0.2704.103, Win10) зараз працює лише альфа. У CSS, Ось CSS додає маску до фонових зображень у веб-переглядачах Webkit: CSS Я використав Для ночі шкіра, я створив прозорий коло, і я зробив решту контейнера непрозорим. Для дня шкіри я зробила навпаки: створила непрозоре коло з Хоча це ще не підтримується в браузерах Webkit, я додав Як ви можете бачити вище, межа кола не дуже гладка. До приховати нерівні краї, додайте a HTML CSS The Хоча Отже, замість a Зображення SVG вище виглядає як комбінація a білий прямокутник а чорний коло. Додайте це, а ще одне з чорний прямокутник а білий коло як маски на HTML, який ми використовували у версії Webkit. HTML Замінити (або поєднати) код CSS для Тепер у нас є два різних зображення маски (CSS градієнт і SVG), два різних типи масок (Alpha & Luminance), а також підтримка Webkit і Firefox. CSS
#daySkin background-image: url ('day.png'); #nightSkin background-image: url ('night.png'); .skin width: 100%; висота: 100%; покажчик-події: немає; позиція: абсолютна; маржа: 0; покажчик-події: немає; Правило додається до скінів так, що події клацання на комутаторі можуть проходити через них, і досягти перемикачів.
Етап 3a. Додати маску (версія Webkit)
маска-зображення Властивість CSS, яка - при написанні цієї публікації - працює тільки з -webkit в браузерах Webkit. The маска-зображення власність дозволяє вкажіть зображення бути використаним як маску.альфа і яскравість є значеннями тип маски власності.#nightSkin background-image: url ('night.png'); тип маски: альфа; / * прозоре коло з непрозорою частиною, що залишилася * / -webkit-mask-image: радіальний градієнт (коло при 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ; / * Коли вибрано шкіру дня * / #leftRadio: перевірено ~ # nightSkin тип маски: alpha; / * непрозоре коло з залишковою частиною прозорою * / -webkit-mask-image: радіальний градієнт (коло при 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; -webkit-mask-image властивість для створення початкового зображення маски. Його значення використовує радіальний градієнт () Функція CSS, яка використовується для створення зображення з попередньо визначеної форми, радіального градієнта і центру градієнта.радіальний градієнт () функцію, і зробила частину прозорою.тип маски для CSS для подальшого використання.
#switchBtnOutline width: 90px; висота: 100%; кордон-радіус: 45px; box-shadow: 0 0 2px 2px сіра вставка, 0 0 10px сіра; покажчик-події: немає; позиція: абсолютна; маржа: 0; / * Встановіть #switchBtnOutline у правому кінці, коли вибрано шкірний день * / #leftRadio: перевірено ~ # switchBtnOutline right: 0;
Етап 3b. Додати маску (версія Firefox)
маска-зображення Властивість CSS насправді a нерухоме майно, і це частина скороченого майна маску що дозволяє вказувати зображення, яке також можна використовувати як маску. Поки маска-зображення Firefox ще не підтримується, маску є.маску властивість повинна приймати зображення, створене за допомогою радіальний градієнт () CSS функціонує як значення, як і маска-зображення власність, поки що немає підтримки в Firefox.радіальний градієнт () зображення, давайте використовувати зображення SVG як зображення маски з типом маски яскравість.
#nightSkin ми використовували в версії Webkit наступний код. І все готово.#nightSkin background-image: url ('night.png'); тип маски: яскравість; маска: url (#leftSwitchMask); #leftRadio: перевірено ~ # nightSkin маска-тип: яскравість; маска: url (#rightSwitchMask); Перевірте демонстрацію
