Een gebruikersinterface voor switches maken met CSS Mask

Bij beeldverwerking, masking is een techniek waarmee je kunt verberg een afbeelding met iemand anders. Een masker wordt gebruikt om een deel van een afbeelding te maken doorzichtig. U kunt maskeren met behulp van CSS met behulp van maskeringseigenschappen.

In het bericht van vandaag maken we een gemaskerde afbeelding met behulp van twee PNG-afbeeldingen en CSS-maskeringstechnieken en stellen gebruikers in staat om de twee toestanden van de afbeelding te verwerken (dag en nacht) met behulp van een schakelaar UI.

Vanwege een aantal browser-compatibiliteitsproblemen - niet alle maskeringseigenschappen worden in elke browser ondersteund (vanaf juni 2016) - zal ik laten zien twee technieken voor het toevoegen van maskers, één voor op Webkit gebaseerde browsers en één voor Firefox. De twee eerste stappen in deze zelfstudie in drie stappen zijn voor elke browser hetzelfde, maar er zal een verschil zijn in de derde stap.

Stap 1. Maak een basisschakelaar

Omdat een typische schakelaar twee toestanden heeft met maar een ingeschakeld tegelijkertijd kunt u een radioknop groep van twee om de werkende componenten van de schakelaar te creëren. Plaats elke keuzerondje aan de linker- en rechterkant van het bovenliggende element.

Groepen keuzerondjes worden gemaakt door elke keuzerondje op dezelfde manier te gebruiken naam attribuut. In een groep met keuzerondjes, slechts één keuzerondje kan tegelijkertijd worden gecontroleerd.

We beginnen met de volgende HTML en CSS:

HTML

CSS

In de onderstaande CSS heb ik de absolute positie gebruikt om de keuzerondjes op het scherm precies te plaatsen waar ik wil.

#outerWrapper width: 450px; hoogte: 90 px; opvulling: 10px; marge: 100 px automatisch 0 auto; grensradius: 55px; vakschaduw: 0 0 10px 6px #EAEBED; achtergrond: #fff;  #innerWrapper height: 100%; border-radius: 45px; overloop verborgen; position: relative;  .radio width: 90px; height: 100%; positie: absoluut; margin: 0; dekking: 0;  #rightRadio rechts: 0;  .radio: not (: checked) cursor: pointer;

Ik heb de ondoorzichtigheid: 0 regel aan de .radio- klas om verberg de keuzerondjes. De laatste regel in het onderstaande codeblok, cursor: pointer; toont de aanwijzercursor voor het niet-geactiveerde keuzerondje, zodat gebruikers weten op welke knop moet worden geklikt om de schakelstatus in te schakelen.

Schermafbeelding van de gebruikersinterface van de schakelaar met keuzerondjes in de Chrome-browser

Stap 2. Voeg skins toe aan de switch

In deze stap voegen we er twee toe

tags voor de twee skins onder de radioknoppen in ons HTML-bestand, en een achtergrondafbeelding voor elke skin in onze CSS.

Ik gebruik "Dag" en "Nacht" als de twee toestanden van de schakelaar, geïnspireerd door een Dribbel geschoten door Minh Killy Le.

HTML

CSS

#daySkin background-image: url ('day.png');  #nightSkin background-image: url ('night.png');  .skin width: 100%; hoogte: 100%; pointer-events: geen; positie: absoluut; marge: 0;

De pointer-events: geen; regel wordt toegevoegd aan de skins zodat de klikgebeurtenissen op de switch kunnen passeer ze, en bereik de radioknoppen.

Met de CSS-eigenschap pointer-events kunt u de omstandigheden instellen waaronder een grafisch element kan worden gemaakt doelgericht door muisgebeurtenissen.

Als een alternatief voor de bovenstaande code, twee tags (met bronafbeeldingen) in de

tags kunnen ook werken. Zij zullen de skins voor de twee schakelstatussen.

Schermafbeelding van schakelaar met skins in chrome

Stap 3a. Masker toevoegen (versie Webkit)

Voor Chrome en andere op Webkit gebaseerde browsers, zal ik de mask-afbeelding CSS-eigenschap, die - vanaf het schrijven van dit bericht - alleen werkt met de -webkit voorvoegsel in Webkit-browsers. De mask-afbeelding eigenschap laat je toe geef de afbeelding op om gebruikt te worden als de masker.

Over het algemeen zijn er twee soorten maskering: luminantie en alpha.

In luminantie maskeren, het donkere gedeelte van de maskerafbeelding verbergt de afbeelding die wordt gemaskeerd: hoe donkerder een gedeelte in het maskerbeeld, hoe meer verborgen dat gedeelte is in de afbeelding die wordt gemaskeerd.
In alfamaskering, het transparante gedeelte van de maskerafbeelding verbergt de afbeelding die wordt gemaskeerd: hoe transparanter een gedeelte is in de maskerafbeelding, hoe meer verborgen dat gedeelte in de afbeelding is die wordt gemaskeerd.

In Chrome (vanaf versie 51.0.2704.103, Win10) lijkt alleen alpha momenteel te werken.

In CSS, alpha en luminantie zijn de waarden van de mask-type eigendom.

Hier is de CSS die voegt een masker toe naar achtergrondafbeeldingen in Webkit-browsers:

CSS

#nightSkin background-image: url ('night.png'); mask-type: alpha; / * transparante cirkel met overgebleven gedeelte ondoorzichtig * / -webkit-masker-afbeelding: radiale gradiënt (cirkel op 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ;  / * Wanneer dag skin geselecteerd * / #leftRadio: checked ~ # nightSkin mask-type: alpha; / * ondoorzichtige cirkel met resterend gedeelte transparant * / -webkit-maskerafbeelding: radiale gradiënt (cirkel bij 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ;

Ik gebruikte de -webkit-mask-afbeelding eigenschap om de initiële maskerafbeelding te maken. Zijn waarde gebruikt de radiaal-gradiënt () CSS-functie die wordt gebruikt om een afbeelding te maken van een vooraf gedefinieerde vorm, een radiaal verloop en het midden van het verloop.

Voor de nachthuid heb ik een transparante cirkel gemaakt en heb ik het resterende deel van de container ondoorzichtig gemaakt. Voor de huid van de dag deed ik het tegenovergestelde: creëerde een ondoorzichtige cirkel met de radiaal-gradiënt () functie, en maakte het resterende gedeelte transparant.

Hoewel het nog niet wordt ondersteund in Webkit-browsers, heb ik de mask-type eigendom van de CSS voor toekomstig gebruik.

Screenshot van schakelaar met Night skin geselecteerd

Schermafbeelding van schakelaar met geselecteerde dag-skin

Zoals je hierboven kunt zien, is de rand van de cirkel niet erg soepel. Naar verberg de ruwe randen, Voeg een ... toe

na de huid in de vorm van een cirkel (dezelfde grootte als de maskercirkel) met een doosschaduw. De schaduw verbergt de ruwe randen van het cirkelmasker.

HTML

CSS

#switchBtnOutline width: 90px; height: 100%; border-radius: 45px; vakschaduw: 0 0 2px 2px grijze inzet, 0 0 10px grijs; pointer-events: none; positie: absoluut; margin: 0;  / * Plaats #switchBtnOutline aan het juiste einde wanneer de daghuid is geselecteerd * / #leftRadio: checked ~ # switchBtnOutline right: 0;

Schermafbeelding van schakelaar met de ruwe randen van maskercirkel verborgen

Stap 3b. Masker toevoegen (Firefox-versie)

De mask-afbeelding CSS-eigenschap is eigenlijk een eigendom uit de lange termijn, en het maakt deel uit van de verkorte eigenschap masker waarmee u de afbeelding ook als masker kunt opgeven. Terwijl mask-afbeelding wordt nog niet ondersteund in Firefox, masker is.

Hoewel de masker eigenschap moet een afbeelding accepteren die is gemaakt met de radiaal-gradiënt () CSS-functie als een waarde, net als de mask-afbeelding property deed, daar is in Firefox nog geen ondersteuning voor.

Dus in plaats van een radiaal-gradiënt () afbeelding, laten we een SVG-afbeelding gebruiken als de maskerafbeelding met het maskertype luminantie.

De SVG-afbeelding hierboven ziet eruit als een combinatie van een witte rechthoek en een zwarte cirkel. Voeg dit toe en een ander met een zwarte rechthoek en een witte cirkel als maskers voor de HTML die we in de Webkit-versie gebruikten.

SVG-afbeelding (witte rechthoek en zwarte cirkel voor het masker)

HTML

Vervang (of combineer met) de CSS-code voor #nightSkin we gebruikten in de Webkit-versie met de volgende code. En je bent klaar.

We hebben nu twee verschillende maskerafbeeldingen (CSS-gradiënt en SVG), twee verschillende maskertypes (alfa & luminantie) en zowel Webkit- als Firefox-ondersteuning.

CSS

#nightSkin background-image: url ('night.png'); masker-type: luminantie; masker: url (#leftSwitchMask);  #leftRadio: checked ~ # nightSkin mask-type: luminance; masker: url (#rightSwitchMask);

Bekijk de demo

demonstratie
Download de bron

Hoe een systeemherstelpunt in Windows 7 te maken

Een systeemherstelpunt manueel aanmaken in XP

Een sterk wachtwoord maken (en het onthouden)