Jak utworzyć interfejs przełącznika za pomocą maski CSS
W przetwarzaniu obrazu, maskowanie to technika, która pozwala ukryj obraz z innym. Maska służy do tworzenia części obrazu widzieć przez. Możesz wykonać maskowanie za pomocą CSS za pomocą właściwości maskowania.
W dzisiejszym poście stworzymy zamaskowany obraz, używając dwóch obrazów PNG i technik maskowania CSS, i pozwolimy użytkownikom obsługiwać dwa stany obrazu (dzień i noc) za pomocą przełącznika interfejsu użytkownika.
Z powodu pewnych problemów ze zgodnością przeglądarki - nie wszystkie właściwości maskowania są obsługiwane w każdej przeglądarce (stan na czerwiec 2016 r.) - pokażę dwie techniki dodawania masek, jeden dla przeglądarek opartych na Webkit i jeden dla Firefoksa. Dwa pierwsze kroki w tym trzystopniowym samouczku są takie same dla każdej przeglądarki, ale w trzecim kroku będzie różnica.
Krok 1. Utwórz podstawowy przełącznik
Ponieważ typowy przełącznik ma dwa stany tylko jeden włączone na raz możesz użyć a grupa przycisków opcji dwóch stworzyć działające komponenty przełącznika. Umieść każdy przycisk radiowy na lewym i prawym końcu elementu macierzystego.
Grupy przycisków radiowych są tworzone, gdy każdy przycisk radiowy jest taki sam imię atrybut. W grupie przycisków opcji, tylko jeden przycisk radiowy można sprawdzać na raz.
Zaczynamy od następującego kodu HTML i CSS:
HTML
CSS
W poniższym CSS użyłem pozycjonowania bezwzględnego, aby umieścić przyciski radiowe na ekranie dokładnie tam, gdzie chcę.
#outerWrapper szerokość: 450px; wysokość: 90px; padding: 10px; margin: 100px auto 0 auto; granica-promień: 55px; box-shadow: 0 0 10px 6px #EAEBED; background: #fff; #innerWrapper wysokość: 100%; granica-promień: 45px; przepełnienie: ukryte; pozycja: względna; .radio width: 90px; wysokość: 100%; pozycja: absolutna; margines: 0; krycie: 0; #rightRadio right: 0; .radio: not (: checked) cursor: pointer;
Dodałem krycie: 0 reguła do .radio klasa w celu ukryj przyciski radiowe. Ostatnia reguła w bloku kodu poniżej, cursor: pointer; pokazuje kursor wskaźnika dla niezaznaczonego przycisku opcji, dzięki czemu użytkownicy wiedzą, który przycisk kliknąć, aby przełączyć stan przełącznika.
Krok 2. Dodaj skórki do Switcha
W tym kroku dodamy dwa Używam „Day” i „Night” jako dwóch stanów przełącznika, zainspirowanych strzałem Dribbble Minha Killy Le. HTML CSS The Za pomocą właściwości CSS wskaźnika-wydarzenia można ustawić okoliczności, w których może być element graficzny celowane przez zdarzenia myszy. Jako alternatywę dla powyższego kodu, dwa W Chrome i innych przeglądarkach opartych na Webkitach użyję Ogólnie istnieją dwa rodzaje maskowania: luminancja i alfa. W Chrome (od wersji 51.0.2704.103, Win10) tylko alfa wydaje się działać. W CSS, Oto CSS dodaje maskę do obrazów tła w przeglądarkach Webkit: CSS Użyłem W przypadku skóry nocnej stworzyłem przezroczysty okrąg, a pozostałą część pojemnika zrobiłem nieprzezroczystą. Dla skóry dziennej zrobiłem przeciwnie: stworzyłem nieprzezroczysty krąg za pomocą Chociaż nie jest jeszcze obsługiwany w przeglądarkach Webkit, dodałem Jak widać powyżej, granica okręgu nie jest bardzo gładka. Do ukryj nierówne krawędzie, dodać HTML CSS The Chociaż Więc zamiast a Powyższy obraz SVG wygląda jak połączenie a biały prostokąt i a czarne kółko. Dodaj to i jeszcze jedno z czarny prostokąt i a białe kółko jako maski do kodu HTML, którego używaliśmy w wersji Webkit. HTML Zastąp (lub połącz) kod CSS Mamy teraz dwa różne obrazy maski (gradient CSS i SVG), dwa różne typy masek (Alpha i Luminance) oraz obsługę Webkit i Firefox. CSS
#daySkin background-image: url ('day.png'); #nightSkin background-image: url ('night.png'); .skin szerokość: 100%; wysokość: 100%; zdarzenia-wskaźniki: brak; pozycja: absolutna; margines: 0; zdarzenia-wskaźniki: brak; reguła jest dodawana do karnacji, dzięki czemu zdarzenia kliknięcia na przełączniku mogą przejść przez nich, i dotrzeć do przycisków radiowych.
Krok 3a. Dodaj maskę (wersja Webkit)
obraz maski Właściwość CSS, która - podczas pisania tego posta - działa tylko z -webkit prefiks w przeglądarkach Webkit. The obraz maski właściwość pozwala określ obraz być używana jak maska.alfa i luminancja są wartościami typ maski własność.#nightSkin background-image: url ('night.png'); typ maski: alfa; / * przezroczysty okrąg z pozostałą częścią nieprzezroczysty * / -webkit-maska-obraz: radial-gradient (okrąg z 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ; / * Gdy wybrano karnację dnia * / #leftRadio: checked ~ # nightSkin mask-type: alpha; / * nieprzezroczysty okrąg z pozostałą częścią przezroczysty * / -webkit-maska-obraz: radial-gradient (okrąg na 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; -obraz-maska-webkit właściwość do utworzenia początkowego obrazu maski. Jego wartość używa radial-gradient () Funkcja CSS używana do tworzenia obrazu z wcześniej zdefiniowanego kształtu, gradientu radialnego i środka gradientu.radial-gradient () funkcja i sprawiła, że pozostała część była przezroczysta.typ maski właściwość do CSS w przyszłości.
#switchBtnOutline width: 90px; wysokość: 100%; granica-promień: 45px; box-shadow: 0 0 2px 2px szary wstawka, 0 0 10px szary; zdarzenia-wskaźniki: brak; pozycja: absolutna; margines: 0; / * Miejsce #switchBtnOutline po prawej stronie, gdy wybrana jest skóra dzienna * / #leftRadio: checked ~ # switchBtnOutline right: 0;
Krok 3b. Dodaj maskę (wersja Firefox)
obraz maski Właściwość CSS jest w rzeczywistości a własność longhand, i jest częścią stenograficznej własności maska to pozwala określić obraz, który ma być również używany jako maska. Podczas obraz maski nie jest jeszcze obsługiwany w Firefoksie, maska jest.maska właściwość powinna zaakceptować obraz utworzony za pomocą radial-gradient () CSS działa jako wartość, podobnie jak obraz maski nie, nie ma jeszcze wsparcia w Firefoksie.radial-gradient () obraz, użyjmy obrazu SVG jako obrazu maski z typem maski luminancja.
#nightSkin użyliśmy w wersji Webkit z następującym kodem. I jesteś skończony.#nightSkin background-image: url ('night.png'); typ maski: luminancja; mask: url (#leftSwitchMask); #leftRadio: checked ~ # nightSkin mask-type: luminance; mask: url (#rightSwitchMask); Sprawdź demo
