Créer des "flat" checkbox en CSS

Un style très à la mode

Paul Underwood

Traducteur

Sébastien Germez

Dans cet article nous allons apprendre à styliser des checkbox HTML afin de les adapter au style très en vogue sur le Web en ce moment : le « flat design ».

Commentez

- Titre : Créer des "flat" checkbox en CSS

- Auteur : Paul Underwood

- Traducteur : Sébastien Germez

- Parution : 24 octobre 2013

- Mise à jour : 24 octobre 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Paul Underwood. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Voir également :

- Donner du style aux listes déroulantes

- Articles et tutoriels sur la personnalisation des éléments HTML

Sommaire

- I. Traduction

- II. Introduction

- III. Checkbox arrondie

- IV. « flat » checkbox

- V. Conclusion

- VI. Liens

- VII. Remerciements

I - Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, How To Create Flat Checkboxes.

II - Introduction

Le design sur le Web ne cesse d'évoluer avec les nouvelles fonctionnalités CSS ainsi que le développement des nouveaux périphériques : smartphones, tablettes, etc.
Comme pour les vêtements, les voitures ou tout autre produit faisant appel à un designer, l'apparence de vos sites Web suit des effets de mode. La tendance actuelle pousse les designers à utiliser ce que l'on appelle le « flat design ».

Le « flat design » n'a pas de définition à proprement parler. Il s'agit plutôt d'association de termes par rapport à la tendance actuelle. Cette tendance consiste à exclure du design tout ce qui est superflu. Elle se caractérise par des aplats de couleurs relativement sobres où l'organisation de la typographie crée la structure du contenu. Vous l'aurez compris, le « flat design » est un style minimaliste, clair et extrêmement épuré. L'expression « less is more » prend ici tout son sens !

Dans ce tutoriel nous allons créer deux checkbox avec des styles sensiblement proches. La première sera plutôt arrondie alors que la seconde respectera parfaitement le style « flat design ».

III - Checkbox arrondie

Tout d'abord nous allons commencer par le code HTML de la checkbox. Cette dernière sera placée à l'intérieur d'un div avec un label ; nous allons également ajouter une seconde div vide juste après le label. C'est tout ce dont nous avons besoin au niveau HTML, le reste sera fait en CSS.

<section>
<!-- Rounded Checkbox &#8594;
<h3>Rounded Checkbox</h3>
<div class="flatRoundedCheckbox">
<input type="checkbox" value="1" id="flatOneRoundedCheckbox" name="" />
<label for="flatOneRoundedCheckbox"></label>
<div></div>
</div>
</section>

Le moment est venu de créer le style du bouton. Pour cela nous devons tout d'abord créer une zone en forme de pilule dans laquelle nous allons placer notre bouton.
Tout d'abord nous allons créer le style de la div extérieure en lui donnant une hauteur et une largeur et en la positionnant en relative. Nous utilisons le positionnement relatif pour pouvoir placer notre bouton en absolute à l'intérieur.

.flatRoundedCheckbox
{
width: 120px;
height: 40px;
margin: 20px 50px;
position: relative;
}
.flatRoundedCheckbox div
{
width: 100%;
height:100%;
background: #d3d3d3;
border-radius: 50px;
position: relative;
top:-30px;
}

Le bouton sur lequel l'utilisateur va cliquer sera le label. Ce label sera simplement un cercle ; comme ce bouton se déplacera au clic de l'utilisateur, nous allons devoir utiliser les transitions. Ensuite nous pouvons positionner notre bouton dans la div extérieure où nous voulons grâce au positionnement absolu.

.flatRoundedCheckbox label
{
display: block;
width: 30px;
height: 30px;
border-radius: 50px;

-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;

cursor: pointer;
position: absolute;
top: 5px;
z-index: 1;
left: 8px;
background: #FFF;
}

Maintenant nous allons utiliser le sélecteur CSS :checked afin d'appliquer des styles une fois que la checkbox sera sélectionnée. Ensuite nous utiliserons le sélecteur d'adjacence ~ pour cibler la div et changer la couleur d'arrière-plan. Dans le même temps, nous souhaitons déplacer le bouton sur la droite de la checkbox, nous utiliserons une fois encore le sélecteur :checked pour changer la position du label.

.flatRoundedCheckbox input[type=checkbox]:checked ~ div
{
background: #4fbe79;
}

.flatRoundedCheckbox input[type=checkbox]:checked ~ label {
left: 85px;
}

IV - « flat » checkbox

Le code HTML pour cette seconde checkbox est exactement le même que celui de la précédente (checkbox arrondie). Le fonctionnement sera également le même, à savoir le déplacement du bouton au clic de l'utilisateur.

<section>
<!-- Flat Checkbox -->
<h3>Flat Checkbox</h3>
<div class="flatCheckbox">
<input type="checkbox" value="1" id="flatOneCheckbox" name="" />
<label for="flatOneCheckbox"></label>
<div></div>
</div>
</section>

Le premier code CSS à écrire est aussi le même que pour la checkbox précédente. Nous allons fixer une hauteur et une largeur à la div extérieure ainsi qu'une position:relative. Puis nous allons nous occuper de la div intérieure en lui donnant les mêmes dimensions que la div extérieure pour pouvoir appliquer une couleur d'arrière-plan.

.flatCheckbox
{
width: 120px;
height: 50px;
margin: 20px 30px;
position: relative;
}
.flatCheckbox div
{
width: 100%;
height:100%;
background: #2fca6c;
position: relative;
top:-30px;
}

Le label va être utilisé comme un bouton pour la checkbox, nous devons aussi le placer à droite nous allons donc utiliser les transitions.

.flatCheckbox label
{
display: block;
width: 40px;
height: 40px;

-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;

cursor: pointer;
position: absolute;
top: 5px;
z-index: 1;
left: 8px;
background: #fffffd;
}

À l'intérieur du bouton il y a trois lignes qui ajoutent de la texture au bouton. Ces lignes sont ajoutées en utilisant la pseudoclasse CSS :before qui vous permet de créer un élément HTML.

.flatCheckbox label:before
{
color: #ccc;
content:'|||';
font-size: 15px;
letter-spacing: 1px;
position: absolute;
left: 7px;
top:11px;
}

Pour finir, quand la checkbox est sélectionnée, nous changeons la couleur d'arrière-plan et nous déplaçons le bouton sur la droite.

.flatCheckbox input[type=checkbox]:checked ~ div
{
background: #e9513a;
}

.flatCheckbox input[type=checkbox]:checked ~ label {
left: 75px;
}

V - Conclusion

Dans cet article nous avons vu comment créer des checkbox respectant le style très à la mode du « flat design ».
N'hésitez pas à expérimenter de vous-même d'autres styles pour vos checkbox !

VI - Liens

Vous pouvez consulter la démonstration afin d'avoir un aperçu du rendu dans un navigateur.

VII - Remerciements

Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également ClaudeLELOUP pour sa relecture orthographique.