$ 5.00

Tuto Créer un Toggle Switch en CSS avec CSS

$ 5.00

  • Une formation vidéo de 18m10s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Dans ce tuto CSS en vidéo, nous allons apprendre à réaliser un Toggle Switch (interrupteur à bascule en français).

Tuto Toggle Switch CSS

Le toggle switch ou plus simplement switch CSS est un élément de formulaire très utilisé en front-end.
Il permet de basculer d'un mode actif à inactif et inversement. Dans certains cas cette présentation en Toggle Switch est préférable à une simple case à cocher.

Au cours de ce tutoriel, nous apprendrons à créer ensemble un Switch CSS grâce à certaines propriétés, pseudo classes et pseudo éléments. Pour passer de l'état on à off, notre Toggle Switch sera animé.

Tous les fichiers de travail sont fournis !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Table des matières de cette formation CSS (durée : 18m10s)

    • Mise en place des bases 00:02:25
    • Modification de l'apparence 00:03:33
    • Modification avant 00:04:43
    • Animation 00:04:07
    • Variante 00:02:37
    • Conclusion 00:00:45



Formateur : Carl Brison

Carl Brison a publié 166 tutoriels et obtenu une note moyenne de 4,9/5 sur 11 248 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

1
avis laissé
5 étoiles
1
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de ddumasdr laissé le 26/05/2020
    Merci, très facile à suivre. J'aurais cependant aimé voir un ou deux exemples d'utilisation d'un toggle switch.
    "Merci pour votre commentaire. Vous pouvez vous en servir par exemple sur un choix OUI ou NON (OUI c'est checked et NON c'est non checked). Après vous faites selon votre imagination. Mais je prends tout de même bonne note de ce que vous m'avez dit ,-)"

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    CSS 3
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
  • Que contient le fichier source ?
    Le code source de ce tuto
accédez à plus de 1202 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données