Créer des cases à cocher animées avec CSS3

Les cases à coucher ou les Checkboxes sont des éléments HTML qu’on ajoute à un formulaire pour donner à l’utilisateur la possibilité de sélectionner un ou plusieurs choix parmi un ensemble d’alternative en cochant ou en marquant la case avec une coche(Une coche).Typiquement, une case à cocher ordinaire n’a qu’un seul design traditionnel et ennuyeux.

Grace au CSS3 nous allons créer dans ce tutoriel des cases à cocher plus modernes en leurs ajoutant plus d’animation.  Vous apprendrez comment remplacer une case à cocher traditionnelle et ajouter un peu d’animation CSS3.

Démo

Pré-requis

Evidemment, il faut des connaissances en HTML et CSS.

Organisons d’abord notre petit projet

Créer deux fichiers  index.html et style.css puis sauvegarder-les dans un dossier et nommez-le comme vous voulez.

Créons notre fichier HTML

Commençons d’abord par l’appel des feuilles de styles  que nous allons utiliser dans ce tuto.

Dans l’entête de fichier HTML, nous allons appeler le fichier style.css  ainsi que le fichier css de Font Awesome.

Pour le BODY de code HTML nous allons créer un formulaire qui va contenir une liste non ordonnée<ul> dont chaque élément de la liste (<li>) contiendra un input de type checkbox et un label.

Recopiez le code ci-dessous et coller-le  dans le fichier index.html.

Travaillons maintenant sur le style général de la page

Ajoutant d’abord un peu de style à notre page qui va contenir notre formulaire de cases à cocher. Ajoutons un espace entre les lignes et annulons l’affichage des puces pour notre balise li. Un peu de padding à gauche pour notre balise form.

Ajouter le code ci-dessous au fichier style.css

A propos de nos cases à cocher

Nous allons commencer d’abord par les faire disparaître à l’aide de la propriété : display:none afin de les remplacer par la suite par des cases attractives. recopiez le code ci-dessous:

Nous allons prendre les balises <label> comme repère pour placer nos nouvelles cases à coucher, c’est pour cela que nous utiliserons le positionnement relatif. Le font-family: FontAwesome c’est pour utiliser les icons qu’offre la librairie FontAwesome. Les reste des propriété c’est pour donner un peu de style à nos balises <label>. Recopier le code ci-dessous:

Positionnons  maintenant les icons de nos futures cases à coucher. On utilisera deux icons de la librairie FontAwesome pour représenter les deux états que peut prendre une case : cochée ou découchée. Nous utiliserons une technique qui sert des pseudos-format (before et after) afin de placer nos icons l’une en dessus de l’autre.  Ajoutons d’abord nos icons. Recopier le code ci-dessous:

Si vous essayer de tester votre code vous allez voir que l’icon de cadre s’est positionnée à gauche de nos label et l’icon de coche à droite. Pour positionner les deux icons l’une en dessous de l’autre nous servirons de positionnement absolu. Recopier le code ci-dessous :

Ajustons la taille et le positionnement de nos icons et donnons une couleur à nos coches.

au chargement de la page les cases seront décochées, alors nous devons faire disparaitre les coches et pour cela nous servirons des propirétés max-width :0px et overflow : hidden. Voir le code ci-dessous :

A ce stade nous allons faire apparaître les coches en cas où un case est cochée et pour cela nous allons faire appel au pseudo-format :checked de la balise input[type= »checkbox »] en ciblant la balise label :after. Donc, une fois qu’on clique sur une case la coche doit être affichée et pour ce faire nous donnerons un max-width de 25px. Recopiez le code ci-dessous:

Animons nos cases à cocher

Ajoutons le bout de code ci-dessous à la balise label :after

Essayez de voir le résulat

Démo

Conclusion

CSS3 est vraiment puissant, nous avons peu réalisé des cases à cocher modernes et animées à l’aide des pseudos formats et les animations sans  l’utilisation de javascript. Il faut savoir que le code que nous avons écrit ci-dessus n’est pas compatible avec tous les navigateurs notamment les anciens versions.

Vous aimerez aussi ...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *