Как да създадете превключвател UI с помощта на CSS маска

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

В днешната публикация ще създадем маскирано изображение, като използваме две PNG изображения и техники за маскиране на CSS, и ще позволим на потребителите да се справят с двете състояния на изображението (ден и нощ) с помощта на комутационен интерфейс.

Поради някои проблеми с съвместимостта на браузъра - не всички маскиращи свойства се поддържат във всеки браузър (от юни 2016 г.) - ще покажа две техники за добавяне на маски, един за браузъри, базирани на Webkit, и един за Firefox. Двете първи стъпки в този тристепенен урок са еднакви за всеки браузър, но ще има разлика в третата стъпка.

Стъпка 1. Създайте основен ключ

Тъй като един типичен превключвател има две състояния с само един активиран в даден момент можете да използвате a радио бутон група от две за създаване на работните компоненти на ключа. Поставете всеки бутон за избор в левия и десния край на основния им елемент.

Групите на радио бутоните се създават, като всеки бутон за избор е един и същ име атрибут. В група с бутони за избор, само един бутон за избор може да се провери в даден момент.

Започваме със следните HTML и CSS:

HTML

CSS

В CSS по-долу използвах абсолютно позициониране, за да поставя радио бутоните на екрана точно там, където искам.

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

- добавих аз непрозрачност: 0 правило .радио клас, за да скриване на радио бутоните. Последното правило в блоковия код по-долу, курсор: указател; показва курсора на показалеца за непроверен бутон за избор, така че потребителите да знаят кой бутон да кликнете, за да превключите състоянието на превключвателя.

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

Стъпка 2. Добавете Skins към Switch

В тази стъпка ще добавим две

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

Използвам "Ден" и "Нощ" като двете състояния на ключа, вдъхновени от Dribbble, заснет от Мин Кили Ле.

HTML

CSS

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

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

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

Като алтернатива на горния код, две етикети (с изходни изображения) в. \ t

таговете също могат да работят. Те ще бъдат кожи за двете състояния на превключване.

Стъпка 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 тип маска: alpha; / * непрозрачен кръг с оставащ участък прозрачен * / -webkit-mask-image: радиален градиент (кръг при 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ;

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

За нощната кожа създадох прозрачен кръг и направих остатъка от контейнера непрозрачен. За деня на кожата, направих обратното: създадох непрозрачен кръг с радиално-градиент () функцията и останалата част е прозрачна.

Въпреки че все още не се поддържа в браузърите на Webkit, добавих маска тип на CSS за бъдещи справки.

Снимка на превключвателя с избрана нощна кожа

Екранна снимка на превключвателя с избрана денна кожа

Както можете да видите по-горе, границата на кръга не е много гладка. Да се скрийте неравните ръбове, добави

след кожите във формата на кръг (със същия размер като маската кръг) с кутия сянка. Сянката ще скрие грубите краища на маската на кръга.

HTML

CSS

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

Екранна снимка на превключвателя с скрити груби ръбове на маска

Стъпка 3Ь. Добавяне на маска (версия на Firefox)

Най- маска изображение CSS собствеността всъщност е a имущество с дълъг ръка, и това е част от стенографската собственост маска което ви позволява да укажете изображението, което да се използва и като маска. Докато маска изображение все още не се поддържа в Firefox, маска е.

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

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

SVG изображението по-горе изглежда като комбинация от a бял правоъгълник и a черен кръг. Добавете това и още едно с a черен правоъгълник и 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);

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

Демонстрация
Изтеглете Източник

Създаване на точка за възстановяване на системата в Windows 7

Как да създадете точка за възстановяване на системата ръчно в XP

Как да създадете силна парола (и запомнете го)