Interrupteur à bascule CSS
Exemple 1
Nous allons écrire du code HTML pour créer et styliser des commutateurs à bascule dans CSS. Pour démontrer les exemples donnés, nous utilisons le code Visual Studio. En conséquence, nous ouvrirons le nouveau fichier et choisirons la langue «HTML», qui suit dans la création d'un fichier HTML. Ensuite, nous commençons à écrire le code dans le fichier créé ici. Nous devons enregistrer ce code une fois terminé, et le ".L'extension de fichier html »est automatiquement ajoutée au nom du fichier. Nous créons également du texte que nous voulons présenter en gras, nous utilisons donc «"Et écrivez la ligne à l'intérieur de ces"”Ouverts et fermeture des étiquettes. Après cela, nous créerons un interrupteur à bascule ici dans ce code qui représente ou sur. Cela nous permettra de s'éteindre ou de l'interrupteur. Maintenant, nous nous dirigeons vers le code CSS pour donner un peu de style à ce commutateur à bascule.
Tout d'abord, nous alignons tous les éléments du corps en utilisant «Text-Align» au «centre» et appliquons cette propriété au «corps.«Ensuite, changez la« couleur »de la tête vers le« vert »pour le rendre attrayant. Maintenant, nous devons styliser le «bascule.«Nous utilisons« Toggle », puis utilisons les propriétés de style ici. L '«affichage» que nous utilisons ici est «en ligne de blocage."Nous avons également réglé sa« largeur »et« hauteur »à« 100px »et« 52px », respectivement. La «couleur arrière.
Ensuite, nous avons également réglé une «bordure» autour de ce bouton à bascule de la largeur «2px» en type «solide» et également en couleur «gris». Après avoir stylé cela, nous allons utiliser le sélecteur «après» avec cette «bascule» et, comme nous le savons, nous devons avoir du «contenu» lorsque nous utilisons ce sélecteur «après» dans CSS. Après ce contenu, nous définissons sa «position» ici sur «absolu», et la «largeur» et la «hauteur» sont «50px» chacun. Cette fois, la «couleur fond» est «gris."Nous avons également défini son" haut "et" gauche "à" 1px "pour chacun d'eux. Nous appliquons la «transition» sur cette bascule de «0.5s ”. Le style du «bascule: après» est terminé ici, et nous allons coiffer le paragraphe un peu en utilisant deux propriétés à l'intérieur des accolades bouclées de «P."
Nous changeons simplement sa «famille de police» en «algérien» puis «audacieuse» ce paragraphe en utilisant la propriété «Font-Weight». Nous définissons la «gauche» sur «45px» pour qu'il déplace «45px» lorsque cette bascule est vérifiée. Et sa couleur change en «vert.«De plus, définissez cet« affichage »de la« case à cocher »à« Aucun."
Nous montrons également ce commutateur dans la sortie ci-dessous, et dans la première sortie, vous pouvez voir que nous avons deux possibilités ici dans ce commutateur. Dans cette capture d'écran, l'interrupteur est «off» et sa couleur est «rouge."
Dans la deuxième capture d'écran, cet interrupteur est «sur» et il est de couleur «vert». L'offre est écrit sur le côté droit de l'interrupteur, donc si nous voulons désactiver cet interrupteur, nous cliquons sur ce commutateur pour le déplacer vers le côté droit vers l'arrêt de cet interrupteur.
Exemple 2
Dans le deuxième exemple, nous créerons deux commutateurs à bascule différents. Nous créons deux commutateurs, un commutateur est nommé «abonnez-vous» et l'autre commutateur est nommé «newsletter» ici. Ensuite, nous allons styliser ces commutateurs dans le fichier CSS.
Nous stylisons le «corps» du HTML, nous avons donc défini sa «marge» et «rembourrage» à «0», et la couleur de fond est «noir», comme ici, «# 151515» est le code pour le noir.«Nous définissons le div, qui est nommé« Centre », au centre« Absolute »« Position », donc tous les éléments à l'intérieur de cette div rendront dans le« centre »de la page. Le «haut» et le «bas» du centre de position absolue sont définis comme «50px» pour chacun, puis nous utilisons la propriété «Transform-Translate» en «(-50px, -50px)».
Lorsque nous utilisons tous ces éléments, tous les éléments sont placés au centre verticalement et horizontalement. Ensuite, nous stylisons la «Input [Type = Checkbox]» en utilisant ceci. La «marge» que nous utilisons pour ceci est «10px» et «relative» en «position.«La« largeur »de cette case à cocher est« 120px »et aussi« 40px »à sa hauteur. Nous avons également défini son «apparence Webkit» à «Aucun.«Nous utilisons son« arrière-plan »sous la forme« linéaire-gradient ». Le «contour» est également «aucun», et pour faire sa courbe de bords, nous utilisons la propriété «Border-Radius» ici et la fixons sur «20px». Nous appliquons le «Box-Shadow» et définissons sa valeur sur «0 0 0 4px». Ensuite, nous stylisons la case lorsqu'elle est cochée et définissons son «arrière-plan» sur «linéaire-gradient», qui est «0deg» et «orange."Nous utilisons le même" Box-Shadow "ici que nous avons utilisé ci-dessus, et c'est pour le" Nème de type (1) ". Le «Ndth of-Type» est un sélecteur pour sélectionner un ou plusieurs éléments. Nous stylissons également la case à cocher pour la «n ° de type (2)» et définissons son «arrière-plan» sur le «linéaire-gradient» de «0deg» et «bleu."Nous stylisons également la case lorsqu'elle n'est pas cochée. Alors ici, nous utilisons le sélecteur «avant», et le sélecteur «après» ou «avant» doit avoir un «contenu.«La« position »que nous définissons ici est« absolue », et son« haut »est« 0 »et aussi le même pour la« gauche.«Il est« 80px »dans sa« largeur »et« 40px »en« hauteur.«Nous utilisons à nouveau le« linéaire-gradient »pour le« fond.«Cette fois, nous utilisons la couleur« noir »et« gris ». Nous utilisons également la propriété «Transformer» et «l'échelle» en x, y comme «0.98, 0.96 ”. Nous avons mis sa propriété «transition» sur «0.5s ”. Le «gauche» est défini sur «40px» avant d'être vérifié. Nous utilisons également le sélecteur «After» et nous stylisons également.
À l'intérieur de cette sélection «After», nous avons d'abord défini le «contenu» et sa «position» comme «absolu."Ses sets" Top "comme" 50% - 2px "et" gauche "est" 70px ". Nous avons également réglé sa «largeur» et «hauteur» à «4px» chacun. Nous définissons son «arrière-plan» et utilisons à nouveau «linéaire-gradient» ici. Le «50%» du «Border-Radius» est appliqué ici, donc ses bords apparaissent en forme de courbe. La propriété «transition» est également définie sur «0.5s », qui est utilisé pour contrôler une vitesse d'animation de 0.5 secondes. Dans le sélecteur «After», la «gauche» est définie sur «110px».
Nous voulons styliser les en-têtes en utilisant «H1» et utiliser certaines propriétés ici. La «marge» est «0» et le «rembourrage» est également «0». Nous utilisons le «Sans-Serif» «Font-Family» pour ces titres. Alignez également ces titres sur le «centre.«La police« couleur »de ces titres est« blanche »et« 16px »en taille. Nous avons également réglé le «rembourrage» supérieur et inférieur sur «15px» et «0px» pour la gauche et la droite. Nous utilisons la «majuscule» afin que le texte des titres soit converti en majuscules, et «l'espacement des lettres» est «4px» pour tous les en-têtes.
Nous avons fourni deux captures d'écran ici comme sortie. La première sortie affiche avant la vérification de cet interrupteur à bascule, et la deuxième capture d'écran est lorsque nous avons vérifié les deux interrupteurs à bascule.
Conclusion
Nous avons présenté ce guide pour expliquer l'interrupteur à bascule dans CSS et comment concevoir et styliser l'interrupteur à bascule dans CSS. Nous avons discuté que nous utilisons l'interrupteur à bascule lorsque nous voulons choisir entre / off et oui / non. Nous avons exploré deux codes ici et avons expliqué toutes les propriétés que nous utilisons dans nos codes en détail. Après avoir essayé les codes de ce guide, vous apprendrez facilement comment ces commutateurs à bascule fonctionnent dans CSS et comment vous concelerez des commutateurs à bascule sur votre site Web ou vos projets.