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(
).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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html> <head> <title>Démo: Créer des cases à cocher animées avec CSS3</title> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/> </head> <body> <div id="conteneur"> <div id="contenu"> <h1 id="question">Quels langages utilisez-vous?</h1> <form id="form-resp" action="#" name="" method="post"> <ul> <li> <input type="checkbox" name="html" id="html" /> <label for="html">HTML</label> </li> <li> <input type="checkbox" name="css" id="css" /> <label for="css">CSS3</label> </li> <li> <input type="checkbox" name="php" id="php" /> <label for="php">PHP5</label> </li> <li> <input type="checkbox" name="javascript" id="javascript" /> <label for="javascript">JavaScript</label> </li> <li> <input type="checkbox" name="ajax" id="ajax" /> <label for="ajax">Ajax</label> </li> <li> <input type="checkbox" name="python" id="python" /> <label for="python">Python</label> </li> </ul> </form> <div> </div> </body> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
body{ background: #4CAF50; } #contenu{ width:600px; margin:0 auto; padding-top:50px; } #question{ color:#dadada; } #form-resp{ padding-left: 20px; } ul{ line-height: 50px; list-style: none; } |
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:
|
1 2 3 4 |
/* Hide the Ordinary Checkbox */ input[type="checkbox"] { display: none; } |
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:
|
1 2 3 4 5 6 7 8 9 10 |
/* Checkbox Icons */ label { font-family: FontAwesome; position: relative; padding-left: 30px; font-size: 30px; cursor: pointer; color: #fff; padding: 16px 28px 0 0; } |
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:
|
1 2 3 4 5 6 7 |
label:before { content: '\f096'; /*checkbox unchecked */ } label:after { content: '\f00c'; /*checkbox checked*/ } |
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 :
|
1 2 3 4 |
label:before, label:after { /*absolutely positioned*/ position: absolute; left: -49px; right: 10px; } |
Ajustons la taille et le positionnement de nos icons et donnons une couleur à nos coches.
|
1 2 3 4 5 6 7 8 9 10 11 |
label:before { content: '\f096'; /*checkbox unchecked */ font-size :50px ; } label:after { content: '\f00c'; /*checkbox checked*/ font-size :25px ; color: #f2ca27; left :-42px ; } |
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 :
|
1 2 3 4 5 6 7 |
label:after { content: '\f00c'; /*checkbox checked*/ font-size :25px ; left: -42px; max-width: 0; overflow: hidden; } |
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:
|
1 2 3 |
input[type="checkbox"]:checked + label:after { max-width: 25px; } |
Animons nos cases à cocher
Ajoutons le bout de code ci-dessous à la balise label :after
|
1 2 3 4 |
-webkit-transition: all 0.50s; -moz-transition: all 0.50s; -o-transition: all 0.50s; transition: all 0.50s; |
Essayez de voir le résulat
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.
