Share
Vous vous retrouverez souvent à utiliser des curseurs à bascule comme une alternative tendance aux cases à cocher. Aujourd'hui, nous allons en créer un en utilisant CSS3 et HTML..
Créez un nouveau document HTML et ajoutez un envergure tag avec une classe de bascule-bg. Ce sera la zone de fond pour la bascule.
Pour rendre la bascule fonctionnelle, nous allons utiliser des éléments invisibles entrées radio. Ceux-ci ont juste quelques exigences:
Je vais utiliser sur et de comme mes valeurs, avec un nom de basculer, mais vous pouvez changer cela en fonction de votre utilisation. Par exemple, vous basculerez peut-être entre Oui et non.
Ajouter le contribution au envergure vous avez créé plus tôt. Votre code devrait ressembler à ceci:
Accentsconagua
En fonction de votre propre utilisation, vous pouvez également placer tout cela dans un formulaire..
Le petit cercle qui sera le commutateur lui-même est simplement un envergure que nous dénommerons plus tard. Donner la envergure une classe de commutateur et insérez-le après le contributions.
Ceci est votre balisage HTML final:
Pour simplifier les choses, nous allons commencer avec le minimum nécessaire pour que cette bascule fonctionne. Ajoutez les éléments suivants à votre document CSS (ou à votre style élément si vous utilisez inline CSS.)
.toggle-bg background: # 222; / * Vous voudrez voir la zone en cours de basculement, mais n'hésitez pas à changer la couleur * / display: block; / *… Pour que nous puissions définir une hauteur et une largeur * / float: left; / *… Pour qu'il ne prenne pas toute la largeur de la page * / height: 7px; / * Vous pourrez changer cela plus tard si vous voulez * / position: relative; / * Requis pour permettre au commutateur de se déplacer * / width: 26px; / * Ceci peut aussi être changé plus tard * /
Celles-ci contributions doivent être absolument positionnés, puis légèrement décalés pour s’ajuster correctement. Nous allons ensuite leur tourner opacité jusqu'à 0.
.entrée toggle-bg hauteur: 28px; gauche: 0; marge: 0; / * Réinitialise les marges et le remplissage * / opacité: 0; /* Invisible! * / remplissage: 0; position: absolue; en haut: -10px; / * Décalage vertical * / largeur: 36px; z-index: 2; / * Nous voulons que l'entrée soit sur le span.switch, auquel nous donnerons un z-index de 1 * /
L’interrupteur doit être carré afin que nous puissions l’entourer d’un cercle parfait plus tard en utilisant un rayon de la frontière. Il a besoin d’un positionnement relatif pour pouvoir se déplacer, et puisque nous devons lui donner une la taille et largeur, Ce sera un bloc-élément de niveau flotté au la gauche.
.switch background: #ccc; bloc de visualisation; float: gauche; hauteur: 14px; gauche: -1px; / * C'est le point de départ. Lors de l'ajout d'un rayon de bordure, un petit peu d'arrière-plan est affiché si nous utilisons left: 0 ;, donc -1px est préférable. * / Position: relative; en haut: -4px; / *… Pour le maintenir centré verticalement * / width: 14px; z-index: 1; / * Souvenez-vous, il doit être en dessous des entrées invisibles * /
CSS3 a ajouté le nouveau combinateur de frères et sœurs, un sélecteur utilisant le tilde (~) pour sélectionner des éléments qui partagent le même parent. L'ordre dans lequel ils apparaissent dans le CSS (avant ou après le tilde) reflète l'ordre dans lequel ils apparaissent dans le DOM.
Nous avons également accès à la nouvelle: pseudo-classe vérifiée. Cela nous permettra de cibler spécifiquement le (actuellement invisible) entrée radio c'est vérifié…
Tout d'abord, nous allons utiliser ces sélecteurs pour réinitialiser la position de départ de l'interrupteur à bascule.
.entrée toggle-bg: vérifiée ~ .switch left: -1px; / * Position initiale de basculement * /
Ensuite, nous indiquerons au navigateur la position finale de la bascule.
.entrée toggle-bg ~: vérifiée ~ .switch left: 13px; / * position finale finale de la bascule * /
Enfin, nous allons mettre le :vérifié contribution derrière le décoché contribution et le commutateur de sorte que le second contribution peut être cliqué.
.entrée à bascule-bg: vérifiée index-z: 0;
A présent, cela devrait ressembler à ceci:
Voici le code CSS complet et non stylé:
.toggle-bg background: # 222; / * Vous voudrez voir la zone en cours de basculement, mais n'hésitez pas à changer la couleur * / display: block; / *… Pour que nous puissions définir une hauteur et une largeur * / float: left; / *… Pour qu'il ne prenne pas toute la largeur de la page * / height: 7px; / * Vous pourrez changer cela plus tard si vous voulez * / position: relative; / * Requis pour permettre au commutateur de se déplacer * / width: 26px; / * Ceci peut aussi être changé plus tard * / .toggle-bg input height: 28px; gauche: 0; marge: 0; / * Réinitialise les marges et le remplissage * / opacité: 0; /* Invisible! * / remplissage: 0; position: absolue; en haut: -10px; / * Décalage vertical * / largeur: 36px; z-index: 2; / * Nous voulons que l'entrée soit sur le span.switch, auquel nous allons donner un indice z de 1 * / .switch background: #ccc; bloc de visualisation; float: gauche; hauteur: 14px; gauche: -1px; / * C'est le point de départ. Lors de l'ajout d'un rayon de bordure, un petit peu d'arrière-plan est affiché si nous utilisons left: 0 ;, donc -1px est préférable. * / Position: relative; en haut: -4px; / *… Pour le maintenir centré verticalement * / width: 14px; z-index: 1; / * Souvenez-vous, il doit être en dessous des entrées invisibles * / Entrée .toggle-bg: vérifié ~ .switch left: -1px; / * Position initiale de basculement * / .toggle-bg input ~: vérifié ~ .switch left: 13px; / * position finale finale de basculement * / .toggle-bg entrée: vérifiée z-index: 0;
Vous avez maintenant un curseur carré dingue, alors arrondissons ces coins! Nous allons ajouter un rayon de la frontière de 8px au envergure avec une classe de bascule-bg et au envergure avec une classe de commutateur.
border-radius: 8px;
Note: comme avec opacité et le transition À venir, je n’utilise aucun préfixe de fournisseur ici pour des raisons pédagogiques, mais vous en aurez besoin pour la compatibilité avec certains navigateurs plus anciens..
Les transitions devrait être ajouté à la envergure avec une classe de commutateur. N'hésitez pas à ajuster les paramètres. La gauche: est la seule partie de la transition suivante qui ne peut pas être modifiée.
transition: gauche facilité .2s;
Maintenant que toutes les fonctionnalités sont là, tout peut être personnalisé à votre guise. Vous pouvez ajouter un dégradé d’ombre-boîte et d’arrière-plan à la envergure avec une classe de bascule-bg ou au commutateur. Parce qu’il est rond, les gradients radiaux auront tendance à avoir une meilleure apparence sur le commutateur.
Voici mes réglages, mais merci de les modifier en fonction de votre style et de votre projet.
Donner la corps un fond blanc cassé et une marge pour que la bascule ne soit pas dans le coin:
body background: # f6f8f9; marge: 200px;
Ajoutez ce qui suit aux styles pour .bascule-bg:
arrière-plan: dégradé linéaire (au bas, # f6f8f9 0%, # e5ebee 50%, # d7dee3 51%, # f5f7f9 100%); box-shadow: 0 1px 0 #fff, encart 0 0 2px # d7dee3, encart 0 1px 0 # d7dee3, encart 0 1px 5px # d7dee3;
Ajoutez ce qui suit aux styles pour .commutateur:
arrière-plan: dégradé radial (ellipse au centre, #ffffff 0%, # fefefe 50%, # fdfdfd 51%, # ffffff 100%); box-shadow: 0 1px 1px # 65727b, 0 0 1px # b6bdc2;
Pour une bascule de style iOS dans laquelle le commutateur a la même taille que son arrière-plan, modifiez ce qui suit dans le style pour .commutateur:
hauteur: 30px; en haut: 0; largeur: 30px;
Modifiez la position de basculement finale en laissant 41 pixels:
.entrée toggle-bg ~: vérifiée ~ .switch left: 41px;
Changer les tailles du contributions et supprimer le décalage vertical en modifiant les éléments suivants dans les styles pour .entrée toggle-bg:
hauteur: 30px; en haut: 0; largeur: 70px;
Changer tous vos rayons de bordure à 30px au lieu de 8px.
Pointe: garder le rayon de la frontière valeur égale à la la taille de l'élément qu'il modifie.
Et enfin, changez le la taille et largeur de .bascule-bg pour s'adapter aux éléments modifiés:
hauteur: 30px; largeur: 70px;
Toutes nos félicitations! Vous pouvez maintenant créer des bascules sans JavaScript avec du nouveau CSS3 génial. Vous voudrez probablement changer les dégradés de fond, et heureusement, il existe un excellent outil en ligne pour vous aider avec cela; consultez l'éditeur de dégradé gratuit de Colorzilla. Il y a aussi une application Mac appelée Gradient qui fonctionne de manière similaire.
Cette méthode reposant sur de toutes nouvelles fonctionnalités CSS3, les anciens navigateurs ne sont pas pris en charge. Prise en charge du navigateur pour le :vérifié La pseudo-classe comprend les éléments suivants:
Et les navigateurs suivants prennent en charge le combinateur général-frère:
J'ai créé trois jsFiddles que vous pouvez expérimenter vous-même. La première inclut le CSS minimum dont vous aurez besoin pour avoir un curseur de basculement fonctionnel. La seconde, beaucoup plus brillante, comprend tout du premier plus des styles et des transitions supplémentaires. Le dernier est celui que j'appelle une "bascule de style iOS" car, comme les bascules sur iOS, la hauteur du commutateur est égale à la hauteur de l'arrière-plan..
Comme il s’agit de CSS, vous pouvez créer plusieurs variantes. En voici quelques-uns pour bien commencer:
étiquette à l'intérieur d'une grande bascule..bascule-bg quand un enfant contribution est vérifié. Ou encore mieux, voyez si cela est possible en utilisant rien que du CSS.étiquette pour chaque contribution dans un style iOS basculer et afficher et masquer de manière sélective le Étiquettes en utilisant jQuery.Remarque: lors de la création d'un étiquette pour la bascule entrées radio, vous devez utiliser JavaScript pour afficher et masquer les inactifs contributions étiquette si vous souhaitez pouvoir utiliser le étiquette comme moyen de décocher la contribution. Sinon, vous ne pourrez que vérifier (mais pas décoché) le contribution en appuyant sur étiquette.
J'espère que vous avez trouvé ce tutoriel utile. Merci d'avoir lu!
