Bouton de basculement CSS
À l'aide de balises HTML, il n'y a pas de méthode simple pour construire un bouton à bascule. Pour construire un bouton à bascule, nous devons utiliser le style CSS.
Création d'un bouton à bascule:
Bien qu'il n'y ait pas de balise HTML native pour construire un bouton d'interrupteur à bascule, vous pouvez utiliser la case à cocher et ensuite la modifier en utilisant CSS pour construire un bouton à bascule. À cette fin, nous utiliserons l'élément «Entrée» avec la boîte à cocher Attribut pour créer une «boîte à cocher».
L'élément vous fournit des contrôles interactifs destinés aux formulaires Web qui obtiennent des informations auprès des utilisateurs. Selon le type de fonctionnalité, l'élément pourrait être de plusieurs types. L'attribut «ID» dans l'élément d'entrée fait référence à une affirmation de feuille de style particulière. L'élément avec l'ID spécifié peut également être modifié à travers ce.
La case à cocher a une très petite zone cliquable mais l'interrupteur à bascule nécessite une plus grande zone. Donc, pour agrandir la zone interactive, enfermez-la dans une étiquette d'étiquette. Dans le «label», mettez une balise «Span» pour faire un curseur avec CSS par la suite. Dans HTML, l'étiquette est utilisée pour augmenter l'efficacité des opérateurs de curseur. Le contrôle est basculé lorsqu'une personne atteint les données à l'intérieur de l'élément.
Vous trouverez ci-dessous le code CSS, pour modifier l'élément d'étiquette à l'intérieur de ce script, l'élément d'étiquette du commutateur est également connecté à l'élément HTML à cocher via son ID. En appuyant sur l'étiquette d'une case à cocher, vous pouvez le cocher ou le rejeter.
L'extrait ci-dessus créera une simple case à cocher.
Maintenant, nous allons utiliser le style CSS pour lui donner l'apparence d'un bouton à bascule. Les informations de conception d'une page Web (CSS) sont fournies en utilisant l'attribut. La balise décrit la façon dont les composants de HTML devraient s'afficher dans un navigateur. Prenez l'élément d'étiquette et ajustez sa largeur, sa hauteur, sa position, sa couleur d'arrière-plan, sa frontière et d'autres propriétés. L'attribut de largeur de CSS détermine la largeur du domaine de contenu d'un objet. La hauteur d'un élément est déterminée par l'attribut de hauteur. L'attribut Border-Radius donne à la bordure extérieure d'un élément une apparence arrondie. Vous pouvez construire des coins circulaires avec un seul rayon ou des coins elliptiques avec deux rayons.
L'application de la propriété CSS «Affichage: bloc en ligne», des directives de conception peuvent être ajoutées à des composants HTML spécifiques. La position d'un élément avec l'attribut «position: relative»; est relatif à sa position par défaut. Un élément relativement positionné allait passer du placement par défaut une fois que les propriétés de gauche, du haut, du bas ou de la droite seront modifiées. Nous allons le faire apparaître comme une zone cliquable en lui donnant un curseur de pointeur et en obscurcissant la case avec «curseur: pointeur».
Vous pouvez utiliser la propriété de curseur de CSS pour indiquer le type de curseur que l'utilisateur devrait voir. La largeur et la hauteur de l'objet d'étiquette sont nécessaires car elles définissent la région cliquable réelle du bouton à bascule. Utilisez «Affichage: aucun» pour rendre la case standard invisible. Cette propriété est utilisée pour cacher et révéler des entités sans les retirer et les remplacer. Bien qu'il soit toujours présent dans le code source, l'élément associé ne capture aucun écart.
Maintenant, nous avons une zone cliquable comme affiché sur l'écran de sortie.
Le «bouton intérieur» doit maintenant être construit à la fin de la «coquille externe». Nous allons maintenant utiliser l'élément «Span» pour créer le curseur. Il est utilisé pour disposer des objets en les regroupant ensemble. Si vous avez l'intention de mettre en évidence une certaine phrase ou un morceau de matériau, vous pouvez le styliser en l'enroulant dans un élément de portée, en lui donnant une étiquette de classe, puis en le choisissant avec les valeurs de fonctionnalité. Attribuez-le absolu, en haut et en haut pour le dire sur le composant d'étiquette. Fournir à cet élément «Span» avec la «largeur» et la «hauteur» que vous avez définies pour l'élément d'étiquette. Nous allons faire une poignée de curseur circulaire maintenant en utilisant la pseudo-classe. Cette classe avec l'attribut de contenu est généralement exercée pour ajouter du matériel stylistique à un élément.
Une fois que nous avons exécuté le code susmentionné, un curseur rond est généré sur le commutateur.
Avec la «boîte extérieure» et le «bouton intérieur» en place, tout ce qui reste sera de gérer la commutation. Nous pouvons également inclure notre attribut «transition» qui fera passer le cercle de droite à gauche lorsque vous cliquez sur. «Transform: tradlatex (n);», la propriété est responsable du mouvement réel: qui déplacera le pseudo-élément une quantité spécifiée de pixels aux côtés de l'axe x. Nous avons utilisé un nouveau identifiant pour le pseudo-élément «::: avant» et l'attribut «transition» à l'identifiant de curseur actuel. L'attribut «:: avant» génère le premier enfant de l'élément cible comme un pseudo-élémentation. Pour s'adapter à la transition de gauche à droite, nous avons juste inclus l'attribut «Translatex» au roman pseudo-élémentation.
Dans la sortie finale, nous avons proposé un bouton de bascule de travail.
Ajout de texte sur le bouton de basculement:
Comme dans l'illustration précédente, nous avons fait un bouton de bascule simple sans texte. Pour ajouter du texte au bouton basculer, nous insérons simplement un composant HTML supplémentaire à l'intérieur et le concevons avec une feuille de style pour la créer apparaître comme une étiquette.
Nous utiliserons la pseudo-classe pour construire des étiquettes qui s'affichent sur ou hors texte en fonction de l'état du bouton de basculement. Nous pouvons utiliser la propriété Data pour inclure des attributs de données arbitraires sur les éléments HTML. Pour le mode OFF, nous allons réparer l'opacité à 0 et pour le mode ON; Nous allons l'ajuster à 1. L'attribut d'opacité dans CSS est utilisé pour indiquer la visibilité d'un objet. En un mot, il décrit la clarté de l'image.
Le code ci-dessus allumera et désactiver le texte du bouton de bascule.
Boucler le bouton lorsque vous cliquez sur:
Bouettez le bouton lorsque vous cliquez sur:
Bouton à bascule avec bordure:
Nous pouvons également ajouter des frontières au bouton à bascule que nous venons de créer ci-dessus avec le texte. Dans l'extrait de code ci-dessous, nous avons défini tous les éléments nécessaires pour générer et afficher la bordure du conteneur à bouton à bascule ainsi que pour la balle ronde intérieure. En dehors de cela, nous devons également mettre la couleur de la bordure. Dans notre exemple, nous l'avons réglé sur # 2196F3 qui est un code couleur hexadécimal pour appliquer la couleur cyan-bleue.
Vous pouvez voir les frontières apparues dans le bouton de basculement qui en résulte.
Conclusion:
L'apprentissage du CSS lors de l'effondrement de devenir un développeur Web est une exigence de base. Dans cet article, nous avons discuté du commutateur à bascule CSS. La première partie de cet extrait contient une introduction aux boutons de bascule dans CSS, puis nous avons élaboré avec un exemple de script CSS pratique de la création de l'interrupteur à bascule. Nous avons en outre inséré du texte sur le bouton à bascule. Dans la dernière partie, nous vous avons montré comment ajouter une bordure au bouton à bascule. Pour l'implémentation des exemples de code, nous avons utilisé l'éditeur de texte sublime.