Как создать интерфейс переключателя с помощью CSS Mask

В обработке изображений, маскировка это техника, которая позволяет скрыть изображение с другим. Маска используется для создания части изображения смотреть сквозь. Вы можете выполнить маскирование с помощью CSS с помощью свойств маскирования.

В сегодняшнем посте мы создадим замаскированное изображение с использованием двух изображений PNG и методов маскировки CSS и позволим пользователям обрабатывать два состояния изображения (день а также ночь) с помощью переключателя UI.

Из-за некоторых проблем совместимости браузера - не все свойства маскирования поддерживаются в каждом браузере (по состоянию на июнь 2016 года) - я покажу две техники для добавления масок, один для браузеров на основе Webkit, а другой для Firefox. Два первых шага в этом трехэтапном руководстве одинаковы для каждого браузера, но в третьем шаге будет разница.

Шаг 1. Создайте базовый переключатель

Поскольку типичный переключатель имеет два состояния с только один включен за один раз, вы можете использовать группа радиокнопок из двух создать рабочие компоненты коммутатора. Поместите каждую кнопку-переключатель слева и справа от родительского элемента.

Группы переключателей создаются путем присвоения каждому переключателю одинаковых название приписывать. В группе переключателей, только одна радиокнопка можно проверить за раз.

Мы начнем со следующего HTML и CSS:

HTML

CSS

В CSS ниже я использовал абсолютное позиционирование, чтобы расположить переключатели на экране именно там, где я хочу.

#outerWrapper width: 450px; высота: 90 пикселей; набивка: 10 пикселей; поле: 100px auto 0 auto; радиус границы: 55 пикселей; тень от рамки: 0 0 10px 6px #EAEBED; фон: #fff;  #innerWrapper height: 100%; границы радиус: 45px; переполнение: скрытый; позиция: относительная;  .radio width: 90px; высота: 100%; позиция: абсолютная; Маржа: 0; непрозрачность: 0;  #rightRadio right: 0;  .radio: not (: флажок) курсор: указатель;

Я добавил Непрозрачность: 0 править .радио класс для того, чтобы спрятать радио кнопки. Последнее правило в блоке кода ниже, курсор: указатель; показывает курсор указателя для неконтролируемой радиокнопки, чтобы пользователи знали, какую кнопку нажимать, чтобы переключать состояние переключателя.

Снимок экрана интерфейса переключателя с переключателями в браузере Chrome

Шаг 2. Добавьте скины на коммутатор

На этом этапе мы добавим два

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

Я использую «День» и «Ночь» в качестве двух состояний переключателя, вдохновленных выстрелом Дрибббла Минь Килли Ле.

HTML

CSS

#daySkin background-image: url ('day.png');  #nightSkin background-image: url ('night.png');  .skin ширина: 100%; высота: 100%; события указателя: нет; положение: абсолютное; поле: 0;

события указателя: нет; правило добавлено в скины, чтобы события щелчка на переключателе могли пройти через них, а также добраться до кнопок радио.

С помощью CSS-свойства pointer-events вы можете установить обстоятельства, при которых графический элемент может быть нацелены на события мыши.

В качестве альтернативы для кода выше, два теги (с исходными изображениями) внутри

теги тоже могут работать. Они будут скины для двух состояний переключателя.

Скриншот переключателя со скинами в хром

Шаг 3а. Добавить маску (версия Webkit)

Для Chrome и других браузеров на основе Webkit я буду использовать Маска-изображения Свойство CSS, которое - на момент написания этого поста - работает только с -WebKit префикс в браузерах Webkit. Маска-изображения собственность позволяет вам указать изображение использоваться как маскировать.

В общем, существует два вида маскировки: яркость а также альфа.

В маскировка яркости, темная часть маскирующего изображения скрывает маскируемое изображение: темная часть маскирует изображение, тем более скрыта эта часть на изображении в маске.
В альфа-маскировка, прозрачная часть маскирующего изображения скрывает маскируемое изображение: чем более прозрачна часть в маскированном изображении, тем более скрыта эта часть в маскируемом изображении.

В 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 тип маски: альфа; / * непрозрачный круг с оставшейся прозрачной частью * / -webkit-mask-image: радиальный градиент (круг при 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ;

Я использовал -WebKit-маска-изображения свойство для создания исходного изображения маски. Его значение использует радиально-градиент () Функция CSS, которая используется для создания изображения из предварительно определенной формы, радиального градиента и центра градиента.

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

Хотя это еще не поддерживается в браузерах Webkit, я добавил Маска типа свойство CSS для дальнейшего использования.

Снимок экрана переключателя с выбранным скином Night

Снимок экрана переключателя с выбранной дневной обложкой

Как вы можете видеть выше, граница круга не очень гладкая. к скрыть неровные края, добавить

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

HTML

CSS

#switchBtnOutline width: 90px; высота: 100%; границы радиус: 45px; тень от рамки: 0 0 2px серая вставка 2px, 0 0 10px серая; указатель события: нет; позиция: абсолютная; Маржа: 0;  / * Поместите #switchBtnOutline в правом конце, когда выбран дневной скин * / #leftRadio: checked ~ # switchBtnOutline right: 0;

Снимок экрана переключателя с скрытыми неровными краями маски

Шаг 3б. Добавить маску (версия Firefox)

Маска-изображения CSS свойство на самом деле от руки собственность, и это часть стенографии маскировать это позволяет вам указать изображение, которое будет использоваться в качестве маски. В то время как Маска-изображения пока не поддерживается в Firefox, маскировать является.

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

Итак, вместо радиально-градиент () изображение, давайте использовать изображение SVG в качестве изображения маски с типом маски яркость.

Изображение SVG выше выглядит как комбинация белый прямоугольник и черный круг. Добавьте это, и еще один с черный прямоугольник и белый круг в качестве масок для 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);

Проверьте демо

демонстрация
Скачать исходный код

Как создать точку восстановления системы в Windows 7

Как создать точку восстановления системы вручную в XP

Как создать надежный пароль (и запомнить его)