Commutateur CSS
Le commutateur de CSS est utilisé pour permettre à l'utilisateur de choisir entre deux états: ON et OFF. Nous déplacons également l'interrupteur vers la gauche ou la droite. Ces commutateurs peuvent être trouvés sur nos sites Web, nos applications mobiles et nos logiciels. Les commutateurs sont utilisés lorsque nous devons éteindre quelque chose ou sur, ou lorsque nous choisissons oui ou non. Nous pouvons créer des commutateurs de différentes formes et tailles dans CSS.
Exemple 1:
Nous développons des codes HTML pour faire les commutateurs et les styliser avec CSS. Le code Visual Studio est utilisé pour démontrer les exemples présentés. En conséquence, nous ouvrons le nouveau fichier et sélectionnons le «HTML» comme langue.Il en résulte la production d'un fichier html. Ensuite, nous commençons à écrire un code dans le fichier qui a été créé. Lorsque nous avons terminé, nous enregistrons le code avec le «.Extension de fichier html ». Après cela, dans ce code, nous concevons un commutateur qui indique ou sur. Il nous permet d'allumer ou de désactiver l'interrupteur. Maintenant, nous passons au code CSS pour donner ce commutateur avec quelques conceptions.
Nous utilisons la propriété «Text-Align» pour le «corps». Ainsi, tout le corps du HTML est rendu au «centre» de la page. Nous changeons également la «couleur» de notre tête vers «vert». Ensuite, nous stylisons le «bascule». Nous le faisons en utilisant le «bascule» et les propriétés de style. La «position» de cette bascule est définie sur «relative». Nous utilisons le «bloc en ligne» comme «affichage». Sa «largeur» et «hauteur» ont également été fixées à «100px» et «52px», respectivement. La «couleur arrière» de cette togne est «rouge» et son «rayon frontalier» est «30px», indiquant que ses bords sont incurvés.
Ensuite, nous ajoutons une «bordure» autour de ce bouton à bascule avec une largeur de «2px» et une couleur «gris». Après avoir stylé cela, nous utilisons le sélecteur «After» avec cette «bascule». Comme nous le savons tous, lorsque vous utilisez le sélecteur «après» dans CSS, nous devons avoir un «contenu.«À nous définir la« position »de ce contenu sur« absolu »et la« largeur »et la« hauteur »à« 50px »chacun. Cette fois, la «couleur fond» est définie sur «Gray».
Pour chacun d'eux, nous définissons en outre le «haut» et la «gauche» à «1px». Nous utilisons la «transition» sur ce «0.Bascule 5s ”. Le style du «bascule: après» est maintenant complet. Nous utilisons deux propriétés à l'intérieur des accolades bouclées de «P» pour coiffer un peu plus loin le paragraphe. Nous mettons simplement à jour la «Font-Family» du paragraphe à «Arial» et utilisons la propriété «Font-Weight» à «Bold». Lorsque cette bascule est vérifiée, nous changeons la propriété «gauche» en «49px» afin qu'il passe à «49px». Nous passons également sa couleur à «vert». Définissez également «aucun» pour «l'affichage» de la «case à cocher».
L'interrupteur est «éteint» et la couleur est «rouge» dans cette capture d'écran. Maintenant, nous avons une capture d'écran suivante:
L'interrupteur est «ON» et est coloré «vert» dans la deuxième capture d'écran. Le mot «off» est imprimé sur le côté gauche de l'interrupteur. Si nous voulons l'éteindre, nous cliquez dessus et le déplacez-le vers le côté droit.
Exemple n ° 2:
Dans cet exemple, nous créons deux commutateurs. Ceux-ci sont différents de l'interrupteur précédent que nous avons créé dans le premier exemple. Nous faisons deux commutateurs ici.
Nous stylissons le corps en utilisant les différentes propriétés. Nous définissons la «taille de boîte» sur «Border-Box» et utilisons la propriété «Font-Family» et utilisons la police «Arial» pour cela. Nous avons également réglé la taille sur «100%». Nous utilisons les sélecteurs «*» avec «After» et «avant» afin qu'il sélectionne tous les éléments et applique la propriété donnée à tous. Nous «héritons» de la «dimensionnement des boîtes». Et le «rembourrage» et la «marge» sont tous deux définis sur «0». Maintenant, nous stylisons le «mid» en utilisant la propriété «Affichage» comme «flex». Nous utilisons le «Centre» pour «Align-Item» et «Justify-Content». Nous définissons la taille de la police «1EM» pour le «padding-top».
Ensuite, nous stylisons le «rocker» qui est le premier interrupteur. L '«affichage» est «en ligne de bloc» et sa «position» est «relative». La «taille de police» du premier interrupteur est «2EM» et il est «audacieux» dans son «poids de police». Le «Text-Align» est SE à «Centre» et la «transformation de texte» est définie sur «majuscule». La «couleur» est définie sur «gris». La «largeur» et la «hauteur» sont définies sur «7EM» et «4EM», respectivement. Le «sur-flux» est «caché». Le «border-bas» est «0.5EM ”. Et Twe a réglé la couleur «blanche» sur un type «solide».
Ensuite, vient le "rocker-small" qui est le deuxième bouton. Pour cela, nous avons défini la «taille de police» sur «0.75em "et sa" marge "dans" 1em ". Nous utilisons le sélecteur «avant» avec notre premier interrupteur «rocker». Et mettez le «contenu» car il est obligatoire tout en utilisant le sélecteur «avant» et «après». Ensuite, nous avons défini sa «position» sur «absolu». Son «haut» est défini sur «0.5EM ”. La «gauche», la «droite» et le «fond» sont tous réglés sur «0». Son «fond» est «gris», la «bordure» est «blanche», la largeur est «0.5EM "et" Solide "en type. La «frontière inférieure» est «0».
Maintenant, nous utilisons «l'entrée de rocker». Pour cela, nous définissons «l'opacité», la «largeur» et la «hauteur» sur «0». Maintenant, nous stylisons le «commutateur-gauche» et le «commutateur-droit» dans les mêmes accolades bouclées. Nous avons réglé son «curseur» sur «pointeur» et la «position» est «absolue». «L'affichage» que nous définissons est «flex». L'exécution «Align-Item» et «Justify-Content» sont tous deux placés sur le «Centre». La «hauteur» que nous définissons ici est «2.5em "et la" largeur "est" 3EM ". Nous devons définir la «transition» pour ceci à «0.2s ”.
Maintenant, nous utilisons séparément le «commutateur-gauche» et le «commutateur-droit» dans lequel nous utilisons la propriété «Transformer». Pour cela, nous avons d'abord réglé la «hauteur», la «largeur», la «gauche» et le «fond» sur «2.4em "," 2.75em ”,« 0.85em »et« 0.4EM ”, respectivement. Nous ajoutons le "Color d'arrière-plan" à "#ddd". Et nous utilisons la propriété «Transformer» et le «tournons» en «15deg» et «biais» à «15deg». Maintenant, nous avons le «commutateur-droit» et concevons cela en définissant la «bonne» propriété sur «0.5EM ”et réglez son« bas »sur« 0 ». Le «fond» est défini sur «rouge». Sur l'arrière-plan «rouge», nous définissons la propriété «blanche» pour la police «couleur». Nous utilisons le sélecteur «avant» avec à la fois «commutateur-gauche» et «commutateur-droit». Donc, pour ce sélecteur «avant», nous utilisons le «contenu». Sa «position» est définie sur «absolu».
Ensuite, nous avons également réglé sa «largeur», «hauteur» et «fond». Le «Color d'arrière-plan» ici est «#ccc» et nous utilisons la propriété «Transform» et «Skewy (-65DEG)». Maintenant, nous définissons la propriété «gauche» sur «-0.4EM ”à l'intérieur en utilisant le sélecteur« avant »avec le« commutateur-gauche ». Nous utilisons également le sélecteur «avant» avec le «commutateur-droit» séparément et définissons la «bonne» propriété sur «-0.375EM ”. Sa «couleur arrière-plan» est «transparente» et nous utilisons la «transformée» en «biais» en «65deg».
Maintenant, nous créons un effet lorsqu'il est «vérifié». Le «Color en arrière-plan» est «transparent» et sa largeur lors de sa vérification est réglé sur «3.0833EM ”. Ensuite, nous utilisons «vérifié» avec «Switch-Left» et «Switch-Right». Nous concevons ou stylissons cela en ajoutant le «Color d'arrière-plan» et la police «couleur» et en les définissant comme «#DDD» et «# 888». Ici, les sélecteurs «en bas» et «droite» sont définis sur «0.4em »et« 0.8em ". Ensuite, nous utilisons les perpéties «Transformer» et «Rotation» et la «biaiser» à «-15deg» pour les deux. Nous utilisons la propriété «vérifiée» avec à la fois «commutateur-gauche» et «commutateur-droit». Et utilisez le sélecteur «avant» à l'intérieur des accolades bouclées et définissez son «couleur d'arrière-plan» sur «#cccc». Ensuite, nous avons réglé la «couleur» de la police sur «blanc» lorsqu'il est vérifié et «gris» avant qu'il ne soit vérifié.
La sortie rend deux commutateurs: le premier interrupteur a sur / désactivé et le deuxième commutateur a oui / non. Dans la première image, vous pouvez voir que le premier interrupteur est «activé» et que sa couleur est «vert» tandis que le deuxième commutateur est sur le «non» et sa couleur est «rouge».
Dans la deuxième image, nous vérifions le premier interrupteur en «off» et le deuxième commutateur à «Oui». Ainsi, le premier interrupteur apparaît «off» et «rouge». Le deuxième interrupteur est «oui» cette fois, et il semble «vert».
Conclusion
Nous avons créé ce tutoriel pour vous montrer ce qu'est un commutateur et comment concevoir et styliser un commutateur dans CSS. Comme indiqué précédemment, l'interrupteur est utilisé pour choisir entre on et désactiver ainsi que oui / non. Nous avons examiné les deux exemples différents jusqu'à présent, et nous avons traversé toutes les propriétés. Après avoir expérimenté les codes de ce tutoriel, vous pourrez comprendre comment les commutateurs fonctionnent dans CSS et comment construire des commutateurs pour votre site Web ou vos projets avec facilité.