Les variables
Recourir aux variables CSS pour répertorier les couleurs devient rapidement nécessaire, spécialement lorsque le projet prend de l’ampleur. Avec cette méthode, vous définissez les couleurs en un seul et même endroit, idéal pour faire des tests de changements de couleurs.
<style type="text/css">
:root{
--couleur-principale: #1BDE91;
--couleur-secondaire: #285E48;
--main-bg-color: pink;
}
div{
place-content: center;
display: grid;
padding:12px;
font-size:1.4rem;
background-color: var(--couleur-principale);
color: var(--couleur-secondaire);
}
</style>
<div>Démonstration</div>Dans notre <style> on commence par définir les différentes variables contenant nos couleurs. Puis nous appelons ces variables normalement dans les propriétés CSS à l’aide de var(--NomDeLaVariable).
Résultat :
La transparence
Il est possible d’ajouter de la transparence en utilisant un code HEX ou RGBA.
Pour le HEX, il suffit d’ajouter deux chiffres représentant l'intensité de la couleur à la fin du code. Ces deux chiffrent peuvent aller de 00 à FF (base 16).
- 00 pour une transparence totale
- 80 pour une transparence de 50%
- FF OU ne pas spécifier de valeur supplémentaire pour obtenir la couleur sans transparence
Exemple :
- ff0000 correspond au code HEX du rouge
- ff0000BF permet d’obtenir un rouge avec de la transparence (75% d'intensité)
La correspondance d’intensité n’est pas forcément évidente en format HEX, car elle est basée sur une base 16 et non sur un pourcentage. C’est pourquoi, il est parfois préférable d’utiliser un code RGBA.
L’utilisation du code couleur RGBA permet également de gérer la transparence. Celui-ci est un dérivé du code RGB (red, green, blue) et ajoute un 4ème paramètre, l’alpha. Ce paramètre défini l’opacité. A 1, vous aurez une couleur sans transparence, tandis que à 0 votre couleur sera invisible car entièrement transparente.
<style type="text/css">
div{
place-content: center;
display: grid;
padding:12px;
font-size:1.4rem;
background-color: rgba(27, 222, 145, 1);
}
.div2{
background-color: rgba(27, 222, 145, 0.8);
}
.div3{
background-color: rgba(27, 222, 145, 0.5);
}
.div4{
background-color: rgba(27, 222, 145, 0.2);
}
.div5{
background-color: rgba(27, 222, 145, 0);
}
</style>
<div>Couleur de base</div>
<div class='div2'>Transparence 0.8</div>
<div class='div3'>Transparence 0.5</div>
<div class='div4'>Transparence 0.2</div>
<div class='div5'>Transparence 0</div>Résultat :
accent-color()
Avec la propriété CSS accent-color, vous pouvez définir la couleur de certains éléments d’interface utilisateur, comme les boutons radio, les barres de progression, etc., en une seule ligne.
<style type="text/css">
input {
width: 30px;
height: 30px;
accent-color: #1BDE91;
}
</style>
<input type="checkbox" class="custom" checked />
<br><br>
<input type="radio" id="choix1" name="choix" value="choix1">
<label for="choix1">Choix 1</label><br>
<input type="radio" id="choix2" name="choix" value="choix2" checked>
<label for="choix2">Choix 2</label><br>
<input type="radio" id="choix3" name="choix" value="choix3">
<label for="choix3">Choix 3</label><br>Résultat :
Les dégradés
En utilisant la propriété CSS linear-gradient, vous pouvez ajouter un dégradé à vos éléments colorés.
Pour définir le sens du dégradé, il est possible de spécifier soit un angle, ou plus parlant encore, d’y spécifier une direction en anglais (to right, to right top, …).
<style type="text/css">
div{
place-content: center;
display: grid;
padding:12px;
font-size:1.4rem;
margin:6px;
}
.div1{
background: linear-gradient(to right, #1BDE91, #00DCF0);
}
.div2{
background: linear-gradient(to left top, #1BDE91, #00DCF0);
}
.div3{
background: linear-gradient(45deg, #00DCF0, #1BDE91);
}
</style>
<div class='div1'>Dégradé - de gauche à droite, de vert à bleu</div>
<div class='div2'>Dégradé - du vert coin bas droite, au bleu coin haut gauche</div>
<div class='div3'>Dégradé - de gauche à droite, de bleu à vert</div>Résultat :
Les dégradés ne se limitent pas aux dégradés linéaires (linear-gradient).
- linear-gradient – de gauche à droite, bas en haut, diagonal
- radial-gradient – diffusé à partir d’une origine, le centre du gradient
- conic-gradient – autour d’un point central (comme pour les graphiques en camembert)
contrast()
Le filtre contrast permet de modifier le contraste d’une image, ou un élément graphique quelconque. Une valeur plus haute que 1 permet de l’intensifier, alors qu’une valeur plus petite l’atténue.
<style type="text/css">
div{
place-content: center;
display: grid;
padding:12px;
font-size:1.4rem;
background: #1BDE91;
}
.div2 {
filter: contrast(1.1);
}
.div3 {
filter: contrast(1.2);
}
.div4 {
filter: contrast(1.3);
}
</style>
<div class="div1">#1BDE91</div>
<div class="div2">contrast(1.1)</div>
<div class="div3">contrast(1.2)</div>
<div class="div4">contrast(1.3)</div>Résultat :
Le futur - color-mix()
Attention, color-mix() est une propriété expérimentale. Actuellement elle ne fonctionne que sur certaines versions expérimentales de Chrome, Edge, Firefox et Safari. Nous déconseillons de l’utiliser tant que les navigateurs standards ne l’interprètent pas correctement.
color-mix permettra de mélanger plusieurs couleurs, en spécifiant leur intensité via un pourcentage.
background-color: color-mix(in lch, red 50%, purple 50%);
Catégories :
Tech webTags :
CSSVous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !