Comment créer une interface utilisateur de commutateur à l'aide d'un masque CSS

En traitement d'image, masquage est une technique qui vous permet de cacher une image avec un autre. Un masque est utilisé pour faire une partie d'une image voir à travers. Vous pouvez effectuer un masquage à l'aide de CSS à l'aide des propriétés de masquage..

Dans le post d'aujourd'hui, nous allons créer une image masquée à l'aide de deux images PNG et de techniques de masquage CSS, et permettre aux utilisateurs de gérer les deux états de l'image (journée et nuit) à l'aide d'une interface utilisateur de commutateur.

En raison de certains problèmes de compatibilité de navigateur - toutes les propriétés de masquage ne sont pas prises en charge dans tous les navigateurs (à partir de juin 2016) - je montrerai deux techniques pour ajouter des masques, un pour les navigateurs Webkit et un pour Firefox. Les deux premières étapes de ce didacticiel en trois étapes sont les mêmes pour tous les navigateurs, mais il y aura une différence dans la troisième étape..

Étape 1. Créer un commutateur de base

Depuis un commutateur typique a deux états avec seulement un activée à la fois, vous pouvez utiliser un bouton radio groupe de deux pour créer les composants de travail du commutateur. Placez chaque bouton radio aux extrémités gauche et droite de leur élément parent.

Les groupes de boutons radio sont créés en donnant à chaque bouton radio la même chose. prénom attribut. Dans un groupe de boutons radio, un seul bouton radio peut être vérifié à la fois.

Nous commençons avec le HTML et CSS suivants:

HTML

CSS

Dans le CSS ci-dessous, j'ai utilisé le positionnement absolu pour placer les boutons radio sur l'écran exactement où je veux.

#outerWrapper width: 450px; hauteur: 90px; rembourrage: 10px; marge: 100px auto 0 auto; border-radius: 55px; box-shadow: 0 0 10px 6px #EAEBED; background: #fff;  #innerWrapper height: 100%; border-radius: 45px; débordement caché; position: relative;  .radio width: 90px; hauteur: 100%; position: absolue; marge: 0; opacité: 0;  #rightRadio right: 0;  .radio: not (: vérifié) curseur: pointeur;  

J'ai ajouté le opacité: 0 règle à la .radio classe afin de cacher les boutons radio. La dernière règle dans le bloc de code ci-dessous, curseur: pointeur; affiche le curseur du pointeur du bouton radio non coché, afin que les utilisateurs sachent sur quel bouton cliquer pour basculer l'état du commutateur.

Étape 2. Ajouter des skins au commutateur

Dans cette étape, nous ajouterons deux

des balises pour les deux skins situés sous les boutons radio de notre fichier HTML et une image d'arrière-plan pour chaque skin de notre CSS.

J'utilise "Day" et "Night" comme les deux états du commutateur, inspirés par un tir de Dribbble de Minh Killy Le.

HTML

CSS

#daySkin background-image: url ('day.png');  #nightSkin background-image: url ('night.png');  .skin width: 100%; hauteur: 100%; événements de pointeur: aucun; position: absolue; marge: 0; 

le événements de pointeur: aucun; règle est ajoutée aux apparences afin que les événements de clic sur le commutateur puissent passer à travers eux, et atteindre les boutons radio.

Avec la propriété CSS pointer-events, vous pouvez définir les circonstances dans lesquelles un élément graphique peut être ciblé par les événements de souris.

Comme alternative au code ci-dessus, deux balises (avec images sources) à l'intérieur du

les tags peuvent aussi fonctionner. Ils seront les habillages pour les deux états de commutation.

Étape 3a. Ajouter un masque (version Webkit)

Pour Chrome et les autres navigateurs Webkit, je vais utiliser le masque-image Propriété CSS qui, à la date de rédaction de cet article, ne fonctionne qu'avec le -webkit préfixe dans les navigateurs Webkit. le masque-image la propriété vous permet spécifier l'image à utiliser comme le masque.

En général, il existe deux types de masquage: luminance et alpha.

• Dans masquage de luminance, la partie sombre de l'image du masque masque l'image masquée: plus une partie est sombre dans l'image du masque, plus cette partie est cachée dans l'image à masquer.
• Dans masquage alpha, la partie transparente de l'image de masque masque l'image à masquer: plus une partie est transparente dans l'image de masque, plus elle est cachée dans l'image à masquer.

Dans Chrome (à partir de la version 51.0.2704.103, Win10), seul l'alpha semble fonctionner actuellement..

En CSS, alpha et luminance sont les valeurs du type de masque propriété.

Voici le CSS qui ajoute un masque vers les images d'arrière-plan dans les navigateurs Webkit:

CSS

#nightSkin background-image: url ('night.png'); type de masque: alpha; / * cercle transparent avec partie restante opaque * / -webkit-mask-image: radial-gradient (cercle à 45px, 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ;  / * Lorsque la peau du jour est sélectionnée * / #leftRadio: cochée ~ # nightSkin masque-type: alpha; / * cercle opaque avec partie restante transparente * / -webkit-mask-image: radial-gradient (cercle à 405 px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; 

J'ai utilisé le -masque-web-image propriété pour créer l'image de masque initiale. Sa valeur utilise le gradient radial () Fonction CSS utilisée pour créer une image à partir d'une forme prédéfinie, d'un dégradé radial et du centre du dégradé.

Pour la peau de nuit, j'ai créé un cercle transparent et j'ai opaque le reste du contenant. Pour la peau de jour, j’ai fait le contraire: créer un cercle opaque avec le gradient radial () fonction, et fait la partie restante transparente.

Bien que cela ne soit pas encore supporté par les navigateurs Webkit, j’ai ajouté le type de masque propriété au CSS pour référence future.

Comme vous pouvez le voir ci-dessus, la bordure du cercle n'est pas très lisse. À cacher les aspérités, ajouter un

après les peaux en forme de cercle (même taille que le cercle du masque) avec une ombre en forme de boîte. L'ombre masquera les aspérités du masque de cercle.

HTML

CSS

#switchBtnOutline width: 90px; hauteur: 100%; border-radius: 45px; box-shadow: 0 0 2px 2px grey inset, 0 0 10px grey; événements de pointeur: aucun; position: absolue; marge: 0;  / * Placez #switchBtnOutline à droite lorsque la peau du jour est sélectionnée * / #leftRadio: cochée ~ # switchBtnOutline right: 0; 

Étape 3b. Ajouter un masque (version Firefox)

le masque-image La propriété CSS est en fait un propriété à long terme, et cela fait partie de la sténographie masque Cela vous permet également de spécifier l'image à utiliser comme masque. Tandis que masque-image n'est pas encore supporté par Firefox, masque est.

Bien que le masque propriété doit accepter une image créée avec le gradient radial () Fonction CSS comme une valeur, tout comme le masque-image la propriété a fait, il n'y a pas encore de soutien pour cela dans Firefox.

Donc, au lieu d'un gradient radial () image, utilisons une image SVG comme image de masque avec le type de masque luminance.

L'image SVG ci-dessus ressemble à une combinaison d'un rectangle blanc et un cercle noir. Ajoutez ceci, et un autre avec un rectangle noir et un cercle blanc en tant que masques au code HTML utilisé dans la version Webkit.

HTML

Remplacez (ou combinez) le code CSS pour #nightSkin nous avons utilisé dans la version Webkit avec le code suivant. Et tu as fini.

Nous avons maintenant deux images de masque différentes (CSS gradient & SVG), deux types de masque différents (Alpha & Luminance) et les supports Webkit et Firefox.

CSS

#nightSkin background-image: url ('night.png'); type de masque: luminance; masque: url (#leftSwitchMask);  #leftRadio: vérifié ~ # nightSkin type-masque: luminance; masque: url (#rightSwitchMask); 

Découvrez la démo

• Démo
• Source de téléchargement

Comment créer un point de restauration du système dans Windows 7

Comment créer un point de restauration système manuellement dans XP

Comment créer un mot de passe fort (et s'en souvenir)