Jak vytvořit přepínač UI pomocí CSS masky
Při zpracování obrazu, maskování je technika, která vám umožní skrýt obrázek s jiným. Maska slouží k vytvoření části obrázku vidět skrz. Maskování můžete provádět pomocí CSS pomocí maskovacích vlastností.
V dnešním příspěvku vytvoříme maskovaný obraz pomocí dvou obrázků PNG a technik maskování CSS a umožníme uživatelům zpracovávat dva stavy obrázku (den a noc) pomocí přepínacího uživatelského rozhraní.
Kvůli některým problémům s kompatibilitou prohlížečů - ne všechny vlastnosti maskování jsou podporovány v každém prohlížeči (od června 2016) - ukážu dvě techniky přidávání masek, jeden pro prohlížeče založené na Webkitu a jeden pro Firefox. Dva první kroky v tomto třístupňovém tutoriálu jsou stejné pro každý prohlížeč, ale ve třetím kroku bude rozdíl.
Krok 1. Vytvořte základní přepínač
Protože typický přepínač má dva stavy jen jeden povoleno najednou můžete použít a přepínač skupiny dvou vytvořit pracovní komponenty spínače. Umístěte každý přepínač na levý a pravý konec rodičovského prvku.
Skupiny tlačítek rádia jsou vytvořeny tak, že se každému rádiovému tlačítku zobrazí stejné tlačítko název atribut. Ve skupině přepínačů, pouze jeden přepínač lze kontrolovat najednou.
Začneme s následujícími HTML a CSS:
HTML
CSS
V CSS níže jsem použil absolutní umístění pro umístění rádiových tlačítek na obrazovce přesně tam, kde chci.
#outerWrapper width: 450px; výška: 90px; polstrování: 10px; okraj: 100px auto 0 auto; hraniční hrana: 55px; box-shadow: 0 0 10px 6px #EAEBED; pozadí: #ff; #innerWrapper výška: 100%; hraniční hrana: 45px; přetečení: skryté; poloha: relativní; .radio width: 90px; výška: 100%; pozice: absolutní; marže: 0; opacity: 0; #rightRadio right: 0; .radio: not (: checked) kurzor: ukazatel;
Přidal jsem opacity: 0 pravidlo .rádio třídy, aby skrýt přepínače. Poslední pravidlo v kódu kódu níže, kurzor: ukazatel; Zobrazí kurzor ukazatele pro nezaškrtnuté přepínač, takže uživatelé vědí, které tlačítko klepnutím přepíná stav přepínače.
Krok 2. Přidejte skiny do přepínače
V tomto kroku přidáme dva Používám "Day" a "Night" jako dva stavy přepínače, inspirované Dribbble shotem Minh Killy Le. HTML CSS Pomocí vlastnosti CSS ukazatele událostí můžete nastavit okolnosti, za kterých může být grafický prvek zaměřené na události myši. Jako alternativa k výše uvedenému kódu, dvě Pro prohlížeče Chrome a jiné prohlížeče založené na webu Webkit používám prohlížeče Obecně existují dva druhy maskování: jasu a alfa. V prohlížeči Chrome (ve verzi 51.0.2704.103, Win10) funguje pouze alfa. V CSS, Zde je CSS přidá masku na obrázky v prohlížeči Webkit: CSS Použil jsem Pro noční kůži jsem vytvořil průhledný kruh a zbývající část nádoby jsem neprůhlednou. Pro dnešní pleť jsem udělal opak: vytvořil neprůhledný kruh s I když to ještě není podporováno v prohlížečích Webkit, přidal jsem Jak vidíte výše, hranice kruhu není příliš hladká. Na zakryjte hrubé hrany, přidat HTML CSS Ačkoliv Takže místo a Obraz SVG nahoře vypadá jako kombinace a bílý obdélník a černý kruh. Přidat, a další s černý obdélník a bílý kruh jako masky na HTML, které jsme použili ve verzi Webkit. HTML Nahraďte (nebo kombinujte s) kód CSS pro Nyní máme dva různé obrazy masek (CSS gradient a SVG), dva různé typy masek (Alpha & Luminance) a podporu Webkit i Firefox. CSS
#daySkin background-image: url ('den.png'); #nightSkin background-image: url ('night.png'); .skin width: 100%; výška: 100%; ukazatele-události: žádné; pozice: absolutní; marže: 0; ukazatele-události: žádné; pravidlo je přidáno do vzhledů tak, aby události klepnutí na přepínači mohly projít nimi, a k přepínačům.
Krok 3a. Přidat masku (verze Webkit)
mask-image Vlastnost CSS, která - při psaní tohoto příspěvku - pracuje pouze s -webkit předpony v prohlížečích Webkit. mask-image vám umožní určete obrázek být použit jako maska.alfa a jasu jsou hodnoty typ masky vlastnictví.#nightSkin background-image: url ('night.png'); typ masky: alfa; / * průhledný kruh se zbývající částí opaque * / -webkit-mask-image: radiální gradient (kruh při 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ; / * Když je vybrána možnost skin kůže * / #leftRadio: checked ~ # nightSkin typ masky: alfa; / * neprůhledný kruh se zbývající částí průhledný * / -webkit-mask-image: radiální gradient (kruh při 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; -webkit-mask-image vlastnost pro vytvoření obrazu počáteční masky. Jeho hodnota používá radiální gradient () Funkce CSS, která se používá k vytvoření obrazu z předem definovaného tvaru, radiálního gradientu a středu přechodu.radiální gradient () funkce a učinila zbylou část průhlednou.typ masky vlastnictví do CSS pro budoucí použití.
#switchBtnOutline width: 90px; výška: 100%; hraniční hrana: 45px; box-shadow: 0 0 2px 2px šedá vložka, 0 0 10px šedá; ukazatele-události: žádné; pozice: absolutní; marže: 0; / * Umístěte #switchBtnOutline na pravý konec, když je vybrána denní kůže * / #leftRadio: checked ~ # switchBtnOutline right: 0;
Krok 3b. Přidat masku (verze Firefoxu)
mask-image Vlastnost CSS je vlastně a dlouhodobé vlastnictví, a je to součást zkratkové vlastnosti maska , který umožňuje také určit obrázek, který má být použit jako maska. Zatímco mask-image Firefox zatím není podporován, maska je.maska vlastnost by měla přijmout obrázek vytvořený pomocí radiální gradient () Funkce CSS funguje jako hodnota, stejně jako funkce mask-image Vlastnost zatím nebyla ve Firefoxu podporována.radiální gradient () Použijme obraz SVG jako obraz masky s typem masky jasu.
#nightSkin ve verzi Webkit jsme použili následující kód. A jste hotovi.#nightSkin background-image: url ('night.png'); typ masky: jas; mask: url (#leftSwitchMask); #leftRadio: checked ~ # nightSkin typ masky: jas; mask: url (#rightSwitchMask); Podívejte se na demo
