Домашня » Кодування » Як створити комутатор UI за допомогою CSS Mask

    Як створити комутатор 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 правило до .радіо клас для того, щоб приховати перемикачі. Останнє правило в кодовому блоці нижче, курсор: покажчик; показує курсор вказівника для перемикача без позначки, щоб користувачі знали, яку кнопку натиснути для перемикання стану комутатора.

    Знімок екрана перемикача інтерфейсу користувача з перемикачами в браузері Chrome

    Крок 2. Додайте скіни до комутатора

    На цьому кроці ми додамо два

    теги для двох шкір під радіо-кнопками в нашому файлі HTML, а також фонове зображення для кожної шкіри в нашому CSS.

    Я використовую "День" і "Ніч" як два стани перемикача, натхненний Dribbble пострілом Мінь Кіллі Ле.

    День шкіри
    Нічна шкіра

    HTML

    CSS

    #daySkin background-image: url ('day.png');  #nightSkin background-image: url ('night.png');  .skin width: 100%; висота: 100%; покажчик-події: немає; позиція: абсолютна; маржа: 0; 

    The покажчик-події: немає; Правило додається до скінів так, що події клацання на комутаторі можуть проходити через них, і досягти перемикачів.

    За допомогою властивості CSS покажчика-події можна задати обставини, за яких може бути графічний елемент мішені.

    Як альтернативу коду вище, два (з вихідними зображеннями) всередині

    теги також можуть працювати. Вони будуть скіни для двох станів комутатора.

    Скріншот перемикача зі шкурами в хромі

    Етап 3a. Додати маску (версія Webkit)

    Для Chrome та інших веб-переглядачів на основі Webkit я скористаюся маска-зображення Властивість CSS, яка - при написанні цієї публікації - працює тільки з -webkit в браузерах Webkit. The маска-зображення власність дозволяє вкажіть зображення бути використаним як маску.

    Загалом, існує два види маскування: яскравість і альфа.

    • В маскування яскравості, темна частина зображення маски приховує зображення, яке він маскує: чим темніше частина зображення на масці, тим більше прихована ця частина на зображенні, що маскується.
    • В альфа-маскування, прозора частина зображення маски приховує зображення, яке він маскує: чим прозоріша частина знаходиться на зображенні маски, тим більше прихована ця частина на зображенні, що маскується.

    У Chrome (починаючи з версії 51.0.2704.103, Win10) зараз працює лише альфа.

    У CSS, альфа і яскравість є значеннями тип маски власності.

    Ось CSS додає маску до фонових зображень у веб-переглядачах Webkit:

    CSS

    #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, яка використовується для створення зображення з попередньо визначеної форми, радіального градієнта і центру градієнта.

    Для ночі шкіра, я створив прозорий коло, і я зробив решту контейнера непрозорим. Для дня шкіри я зробила навпаки: створила непрозоре коло з радіальний градієнт () функцію, і зробила частину прозорою.

    Хоча це ще не підтримується в браузерах Webkit, я додав тип маски для CSS для подальшого використання.

    Скріншот перемикача з вибраною нічною шкірою
    Знімок екрана перемикача з виділеною шкірою дня

    Як ви можете бачити вище, межа кола не дуже гладка. До приховати нерівні краї, додайте a

    після скінів у формі кола (такого ж розміру, як маска кола) з коробкою тіні. Тінь буде приховувати грубі краї маски кола.

    HTML

    CSS

    #switchBtnOutline width: 90px; висота: 100%; кордон-радіус: 45px; box-shadow: 0 0 2px 2px сіра вставка, 0 0 10px сіра; покажчик-події: немає; позиція: абсолютна; маржа: 0;  / * Встановіть #switchBtnOutline у ​​правому кінці, коли вибрано шкірний день * / #leftRadio: перевірено ~ # switchBtnOutline right: 0; 
    Скріншот перемикача з прихованими країми маски кола

    Етап 3b. Додати маску (версія Firefox)

    The маска-зображення Властивість CSS насправді a нерухоме майно, і це частина скороченого майна маску що дозволяє вказувати зображення, яке також можна використовувати як маску. Поки маска-зображення Firefox ще не підтримується, маску є.

    Хоча маску властивість повинна приймати зображення, створене за допомогою радіальний градієнт () CSS функціонує як значення, як і маска-зображення власність, поки що немає підтримки в Firefox.

    Отже, замість a радіальний градієнт () зображення, давайте використовувати зображення SVG як зображення маски з типом маски яскравість.

         

    Зображення SVG вище виглядає як комбінація a білий прямокутник а чорний коло. Додайте це, а ще одне з чорний прямокутник а білий коло як маски на HTML, який ми використовували у версії Webkit.

    Зображення SVG (білий прямокутник і чорне коло для маски)

    HTML

                 

    Замінити (або поєднати) код CSS для #nightSkin ми використовували в версії Webkit наступний код. І все готово.

    Тепер у нас є два різних зображення маски (CSS градієнт і SVG), два різних типи масок (Alpha & Luminance), а також підтримка Webkit і Firefox.

    CSS

    #nightSkin background-image: url ('night.png'); тип маски: яскравість; маска: url (#leftSwitchMask);  #leftRadio: перевірено ~ # nightSkin маска-тип: яскравість; маска: url (#rightSwitchMask); 

    Перевірте демонстрацію

    • Демо
    • Завантажити джерело
    © Savtec
    Корисна інформація та поради по веб-розробці. Програмування, веб-дизайн, CSS, HTML, JAVASCRIPT. Налагодження та перевстановлення WINDOWS. Створення сайтів і додатків з нуля.