So erstellen Sie eine Switch-Benutzeroberfläche mit CSS-Maske

In der Bildverarbeitung, Maskierung ist eine Technik, die es Ihnen erlaubt ein Bild ausblenden mit einem anderen. Mit einer Maske wird ein Bildausschnitt erstellt durchschauen. Sie können die Maskierung mithilfe von CSS mit Hilfe der Maskierungseigenschaften durchführen.

Im heutigen Beitrag erstellen wir ein maskiertes Bild mithilfe von zwei PNG-Bildern und CSS-Maskierungstechniken und ermöglichen Benutzern, die beiden Status des Bildes zu bearbeiten (Tag und Nacht-) mit Hilfe einer Switch-Benutzeroberfläche.

Aufgrund von Problemen mit der Browserkompatibilität - nicht alle Maskierungseigenschaften werden in jedem Browser unterstützt (Stand Juni 2016) - werde ich zeigen zwei Techniken zum Hinzufügen von Masken, einen für Webkit-basierte Browser und einen für Firefox. Die beiden ersten Schritte in diesem dreistufigen Lernprogramm sind für jeden Browser gleich, im dritten Schritt gibt es jedoch einen Unterschied.

Schritt 1. Erstellen Sie einen Basisschalter

Da hat ein typischer Switch zwei Zustände mit einziger aktiviert zu einem Zeitpunkt können Sie eine Optionsfeld Gruppe von zwei um die Arbeitskomponenten des Switches zu erstellen. Platzieren Sie jedes Optionsfeld am linken und rechten Ende des übergeordneten Elements.

Optionsfeldgruppen werden erstellt, indem jedem Optionsfeld das gleiche zugewiesen wird Name Attribut. In einer Optionsfeldgruppe, Nur ein Optionsfeld kann zu einem Zeitpunkt überprüft werden.

Wir beginnen mit dem folgenden HTML und CSS:

HTML

CSS

In der folgenden CSS habe ich die Optionsfelder mit absoluter Positionierung genau auf dem Bildschirm platziert, wo ich möchte.

#outerWrapper width: 450px; Höhe: 90px; Polsterung: 10px; Marge: 100px auto 0 auto; Grenzradius: 55px; Box-Schatten: 0 0 10px 6px #EAEBED; Hintergrund: #fff;  #innerWrapper height: 100%; Grenzradius: 45px; Überlauf versteckt; Position: relativ;  .radio Breite: 90px; Höhe: 100%; Position: absolut; Marge: 0; Deckkraft: 0;  #rightRadio right: 0;  .radio: nicht (: markiert) Cursor: Zeiger;  

Ich habe das hinzugefügt Deckkraft: 0 Regel an die .Radio Klasse, um verstecken Sie die Optionsfelder. Die letzte Regel im nachfolgenden Codeblock, Cursor: Zeiger; Zeigt den Zeiger-Cursor für das nicht markierte Optionsfeld an, damit die Benutzer wissen, auf welche Schaltfläche sie klicken müssen, um den Schalterstatus umzuschalten.

Schritt 2. Fügen Sie dem Switch Skins hinzu

In diesem Schritt fügen wir zwei hinzu

Tags für die beiden Skins unterhalb der Optionsfelder in unserer HTML-Datei und ein Hintergrundbild für jedes Skin in unserem CSS.

Ich benutze "Tag" und "Nacht" als die beiden Zustände des Schalters, inspiriert von einem Dribbble-Schuss von Minh Killy Le.

HTML

CSS

#daySkin Hintergrundbild: URL ('day.png');  #nightSkin Hintergrundbild: URL ('night.png');  .skin Breite: 100%; Höhe: 100%; Zeigerereignisse: keine; Position: absolut; Marge: 0; 

Das Zeigerereignisse: keine; Regel wird zu den Skins hinzugefügt, damit die Klickereignisse auf dem Schalter können gehe durch sie hindurch, und erreichen Sie die Optionsfelder.

Mit der CSS-Eigenschaft pointer-events können Sie die Umstände festlegen, unter denen ein Grafikelement sein kann durch Mausereignisse gezielt.

Als Alternative für den obigen Code zwei Tags (mit Quellbildern) im

Tags können auch funktionieren. Sie werden die sein Skins für die beiden Schalterzustände.

Schritt 3a. Maske hinzufügen (Webkit-Version)

Für Chrome und andere Webkit-basierte Browser verwende ich die Maskenbild CSS-Eigenschaft, die - wie beim Schreiben dieses Beitrags - nur mit der -Webkit Präfix in Webkit-Browsern. Das Maskenbild Eigenschaft lässt Sie Geben Sie das Bild an benutzt werden als die Maske.

Im Allgemeinen gibt es zwei Arten der Maskierung: Leuchtdichte und Alpha.

• Im Luminanzmaskierung, Der dunkle Teil des Maskenbildes verbirgt das zu maskierende Bild: Je dunkler ein Teil im Maskenbild ist, Je versteckter dieser Teil ist in dem Bild, das maskiert wird.
• Im Alpha-Maskierung, Der transparente Teil des Maskenbilds verbirgt das zu maskierende Bild: Je transparenter sich ein Teil im Maskenbild befindet, desto mehr versteckt sich dieser Teil im zu maskierenden Bild.

In Chrome (ab Version 51.0.2704.103, Win10) scheint derzeit nur Alpha zu funktionieren.

In CSS, Alpha und Leuchtdichte sind die Werte von Maskentyp Eigentum.

Hier ist das CSS das fügt eine Maske hinzu zu Hintergrundbilder in Webkit-Browsern:

CSS

#nightSkin Hintergrundbild: URL ('night.png'); Maskentyp: alpha; / * transparenter Kreis mit verbleibendem Teil undurchsichtig * / -webkit-mask-image: radialer Gradient (Kreis bei 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ;  / * Wenn Tages-Skin ausgewählt wurde * / #leftRadio: checked ~ # nightSkin Maskentyp: alpha; / * undurchsichtiger Kreis mit verbleibendem Teil transparent * / -webkit-mask-image: radialer Gradient (Kreis bei 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; 

Ich habe die -Webkit-Maskenbild Eigenschaft, um das ursprüngliche Maskenbild zu erstellen. Sein Wert verwendet die Radialgradient () CSS-Funktion, mit der ein Bild aus einer vordefinierten Form, einem radialen Farbverlauf und dem Mittelpunkt des Farbverlaufs erstellt wird.

Für die Nachthaut habe ich einen transparenten Kreis erstellt und den restlichen Teil des Behälters undurchsichtig gemacht. Für die Tageshaut habe ich das Gegenteil getan: mit dem Radialgradient () Funktion und machte den verbleibenden Teil transparent.

Obwohl es in Webkit-Browsern noch nicht unterstützt wird, habe ich das hinzugefügt Maskentyp Eigenschaft an das CSS zum späteren Nachschlagen.

Wie Sie oben sehen können, ist der Rand des Kreises nicht sehr glatt. Zu verstecke die Ecken und Kanten, füge hinzu ein

hinter den Skins in Form eines Kreises (dieselbe Größe wie der Maskenkreis) mit einem Boxschatten. Der Schatten blendet die rauen Kanten der Kreismaske aus.

HTML

CSS

#switchBtnOutline width: 90px; Höhe: 100%; Grenzradius: 45px; Box-Schatten: 0 0 2px 2px grauer Einsatz, 0 0 10px grau; Zeigerereignisse: keine; Position: absolut; Marge: 0;  / * Platziere #switchBtnOutline am rechten Ende, wenn Tages-Skin ausgewählt ist * / #leftRadio: checked ~ # switchBtnOutline right: 0; 

Schritt 3b. Maske hinzufügen (Firefox-Version)

Das Maskenbild CSS-Eigenschaft ist eigentlich eine langjähriges Eigentum, und es ist Teil der Eigenschaft der Kurzschrift Maske Auf diese Weise können Sie das Bild angeben, das auch als Maske verwendet werden soll. Während Maskenbild wird in Firefox noch nicht unterstützt, Maske ist.

Obwohl die Maske Die Eigenschaft sollte ein mit der. erstelltes Bild akzeptieren Radialgradient () CSS funktioniert wie ein Wert als Wert Maskenbild Eigenschaft hat, es gibt noch keine Unterstützung für Firefox.

Also statt eines Radialgradient () Bild, lassen Sie uns ein SVG-Bild als Maskenbild mit dem Maskentyp verwenden Leuchtdichte.

Das SVG-Bild oben sieht aus wie eine Kombination aus a weißes Rechteck und ein schwarzer Kreis. Fügen Sie dieses und ein anderes mit ein schwarzes Rechteck und ein weißer Kreis als Masken für das HTML haben wir in der Webkit-Version verwendet.

HTML

Ersetzen (oder kombinieren mit) den CSS-Code für #nightSkin Wir haben in der Webkit-Version den folgenden Code verwendet. Und du bist fertig.

Wir haben jetzt zwei verschiedene Maskenbilder (CSS-Farbverlauf & SVG), zwei verschiedene Maskentypen (Alpha & Luminance) sowie Unterstützung für Webkit und Firefox.

CSS

#nightSkin Hintergrundbild: URL ('night.png'); Maskentyp: Leuchtdichte; Maske: URL (#leftSwitchMask);  #leftRadio: checked ~ # nightSkin Maskentyp: Luminanz; Maske: URL (#rightSwitchMask); 

Schauen Sie sich die Demo an

• Demo
• Quelle herunterladen

So erstellen Sie einen Systemwiederherstellungspunkt in Windows 7

Manuelles Erstellen eines Systemwiederherstellungspunkts in XP

So erstellen Sie ein sicheres Kennwort (und erinnern Sie sich daran)