Sommaire
- Color Values - Opacity
- Colorize SVG
- Color Variables
- CSS Vars & Design Sytem
Tuto du jour, pour un gain de temps consubstantiel à la flemme intégrale du Designer web 😉
Je vais parler couleur et transparence en CSS/HTML, de conditions et Variables, de transformation colorimétrique des images, de Design Sytem et d’automatisation. Si cela vous dit de suivre ce mini cours…
Note : C’est du vanilla CSS, pas de Pre-Processeur (SASS, LESS, …)
Au commencement…
Pour comprendre l’idée on reprend rapidement les bases.
On définit la couleur d’un élément/entité HTML de plusieurs manières :
Par nom de couleur
En donnant un nom de couleur HTML référencée (voir tableau ici [add link]), ex. color:ultramarine;
Ancienne méthode des temps reculés du WWW (CSS-½). À part white, black, red, blue, orange je n’en ai jamais utilisé aucun et encore, uniquement à des fins d’alpha-tests/brouillons. Et, ce jour où je me suis rendu compte que ces valeurs et noms était en dur dans la Spec. J’ai pleuré.
Les seuls « mots valeurs » que j’utilise en production -dans certains cas- sont “transparent” et « currentColor ».
La valeur transparent parle d’elle-même, on peut, selon les cas, lui préférer : ‘none’, ‘unset’, ‘revert’. [Voir l’article-link]
currentColor est un keyword que l’on peut utiliser pour signifier l’héritage de couleur ‘color’ pour une propriété CSS qui n’en hérite pas par défaut. Selon comment « l’objet » est composé (composant), on peut imaginer que la valeur de ‘color’ devient celle de ‘background’.
Exemple :
<div style="“color: red;">
<p>du texte qui sera en rouge</p>
<div style="“background-color: currentColor”;">
<p style="color: #fff;">Ce texte est dans un bloc rouge</p>
</div>
</div>
Spécification Color Values-Keywords [Link to spec]
div {
color: #fff;
background-color:#000;
}
Par une valeur
En utilisant des valeurs de couleurs, comme color:#fff.
On peut écrire la valeur en utilisant le RGB cubic color-space, en hexadécimal via #valeurhexa, ou en rgb() ou en utilisant l’espace cylindrique HSL (hsl(), en couleur lab() ou encore lch().
La syntaxe des valeurs est large, on peut utiliser une valeur sans unité, un pourcentage, fraction, avec des virgules ou en whitespace etc… Par exemple : [example code to insert]
Je vous renvoie à l’excellent page (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) pour plus de détails, ce n’est pas le propos de cet article.
Note : Vous aurez remarqué, CMJN/CMYK ou Pantone ne sont pas des Color-Spaces supportés par les navigateurs, qui, de toute façon, affichent et calculent en mode substractif et non additif. Mais, car il y a un mais. La prochaine Spec CSS color level 5 aborde le sujet de la conversion de colorSpace entre Digital et Print. À suivre donc.
Jouons avec Opacity
Pour définir l’opacité d’un élément on peut utiliser la règle CSS ‘opacity’. La valeur s’écrit de 0 à 100%, ou en décimale de 1. ( ou 1=100), exemple ces deux valeurs ont le même résultat:
div { opacity: .5 }
div { opacity: 50% }
Easy, Peasy!
Mais avec Opacity [Link to spec], on va rencontrer 2 problèmes.
- Devoir cibler un élément en particulier dans le DOM
- Et surtout considérer que opacity s’applique à l’élément parent et à tous ses descendants.
Dans la structure suivante, tous les enfants du div à qui on applique l’opacité sont transparents. On peut le souhaiter… ou pas.
<div style="“opacity: .5”;">
<h1>blah</h1>
<div>…</div>
<img /> Etc…
</div>
Si je veux uniquement que le fond du div soit avec une opacité et non tous les éléments qu’il contient, je vais devoir utiliser une autre méthode.
Color with alpha
Au début de l’article, je vous donnais la manière de définir les couleurs par une valeur. La méthode CSS de définition d’une couleur avec une valeur d’alpha (valeur de transparence) va nous permettre d’arriver à nos fins.
En utilisant des valeurs de types RGB(A), HSL(A) etc… où ‘A’ représente la valeur de l’alpha, c’est à dire l’opacité, et en l’appliquant à la propriété css ‘background’ ou (background-color), ou color on peut différencier/hiérarchiser l’opacité de chaque élément contenu si besoin
div {
color: #fff;
background-color:rgba(0,0,0,.5);
}
Spécification Color Values-alpha [Link to spec]
Nous avons désormais la base pour aborder la seconde partie de cet article où nous aborderons l’utilisation des couleurs avec les éléments et effet SVG.
À bientôt 🙂 !
