Comment Contrôler L'opacité Des Couleurs Avec RGBA En CSS?

Lorsqu’il s’agit de spécifier des couleurs dans CSS, le modèle de couleurs RVB jouit d’une immense popularité depuis de nombreuses années maintenant. Le concepteur utilise une combinaison de rouge, de vert et de bleu pour obtenir le ton requis. C’est un modèle de couleur assez simple qui fonctionne bien.

Cependant, le modèle de couleur RVB offre des tons plats et solides, rien d’autre. Et si vous vouliez définir une couleur et également spécifier son opacité (ou sa transparence, quelle que soit la façon dont vous voulez le dire)?

Parlons des couleurs CSS RGBA, une extension du modèle de couleurs RVB. Le A signifie Alpha, qui fait référence au niveau de transparence ou d’opacité de la couleur.

Sommaire

Passons en revue la théorie derrière le modèle RVB

Fondamentalement, le modèle de couleur RVB est utilisé pour décrire une couleur uniquement en termes de rouge, de vert ou de bleu. Pour le bleu pur, on partira avec 100% de bleu et 0% de rouge et de vert. Mais pour le fuchsia, nous utiliserons 100 % de rouge avec 100 % de bleu et 0 % de vert.

art1

Et si nous voulions créer du noir, la théorie des couleurs de base stipule que l’absence de toute couleur est le noir. Par conséquent, nous allons choisir 0 % de rouge, de vert et de bleu. Donc RVB, c’est un peu comme mélanger des aquarelles pour arriver à une teinte donnée.

Pourquoi voudriez-vous vous embêter avec RGBA ?

Dans CSS3, RGBA est comparable aux calques dans Photoshop. RGBA vous permet d’obtenir non seulement les couleurs bleu plat ou fuchsia ou noir dont j’ai parlé plus tôt, mais également un niveau de transparence.

Considérez cette transparence comme un élément supplémentaire à utiliser dans votre conception. Pour être clair, cependant, CSS a déjà eu une propriété d’opacité. Vous pouvez facilement spécifier l’opacité de l’élément entier et de tout ce qu’il contient.

Cependant, RGBA vous permet d’aller au-delà de cela – vous pouvez contrôler l’opacité des couleurs individuelles, plutôt que l’élément entier. Vous avez la possibilité d’ajuster la transparence ou l’opacité de l’arrière-plan uniquement ou uniquement du premier plan ou des deux, selon vos besoins.

art2

Alors, comment utilisez-vous RGBA?

Heureusement, il est assez simple d’utiliser RGBA. Parlons d’abord de la syntaxe. Généralement, une notation RGBA ressemble à peu près à ceci :

rgba (red, green, blue, alpha)

Tout comme RVB, les trois premières valeurs (rouge, vert et bleu) peuvent être soit des nombres entiers compris entre 0 et 255, soit des pourcentages allant de 0 % à 100 %. Tout comme RVB, ces valeurs spécifient la quantité de rouge, de vert et de bleu dans la teinte souhaitée. Par conséquent, la syntaxe d’un rouge pur devrait ressembler à :

rgba (255, 0, 0, 1);

rgba (100%, 0%, 0%, 1);

La quatrième valeur indique alpha et doit être comprise entre 0,0 (transparence absolue) et 1,0 (opacité absolue). Par exemple, 0,5 correspond à 50 % d’opacité et 50 % de transparence.

Le RGBA est-il déjà compatible avec les navigateurs?

De nos jours, pratiquement tous les navigateurs Web modernes prennent en charge le modèle de couleurs RGBA, vous n’avez donc pas grand-chose à craindre en matière de compatibilité. Cependant, je préfère personnellement spécifier des couleurs RVB unies comme solution de rechange pour RGBA. Vous serez du bon côté, mais il n’y a pas beaucoup d’efforts à faire pour l’étape supplémentaire.

art3

Pour spécifier une couleur de repli unie, je m’appuie sur des notations de couleur hexadécimales. Prenons le blanc, par exemple :

color: #ffffff;

Le code hexadécimal ci-dessus rendra un blanc opaque pur. Maintenant, voici comment j’ajouterais 50 % d’opacité à cela dans RGBA :

color: rgba(255, 255, 255, 0.5);

Terminé! Encore une fois, le repli en hexadécimal est une pratique personnelle pour moi. RGBA existe depuis 2011, donc tout navigateur Web publié après IE9 peut le prendre en charge. Et si l’hexadécimal n’est pas votre truc, vous pouvez toujours revenir à RGB à partir de RGBA, en utilisant la notation RGB elle-même. Dans ce cas, vous pouvez spécifier des couleurs RVB pour les anciens navigateurs et des couleurs RVBA pour les navigateurs capables de les interpréter. Par exemple:

color: rgb (0, 0, 0);
color: rgba (0, 0, 0, 0.5);

Comment animer avec CSS

Nous nous sommes habitués à voir des animations sur des sites Web et à profiter de l’énergie et de la variété qu’elles apportent à la conception Web. Ils sont accrocheurs, un excellent moyen d’ajouter un intérêt visuel à un site, et…

Bien sûr, si vous travaillez avec un arrière-plan et que la transparence est quelque chose que vous devez vraiment avoir, vous avez également la possibilité de vous rabattre sur un PNG en utilisant un canal alpha. Je ne recommande pas d’utiliser cette méthode à moins que vous n’y soyez absolument obligé. Un arrière-plan PNG est beaucoup moins flexible que CSS, et vous pourriez finir par utiliser une image PNG distincte pour chaque niveau de transparence dont vous avez besoin.

Cependant, la logique ici est également simple : spécifiez un arrière-plan à l’aide de PNG que chaque navigateur peut comprendre, puis écrasez-le à l’aide de la notation RVBA. Voici comment:

background: transparent url (something.png);
background: rgba (0, 0, 0, 0.5) none;

Comme vous pouvez le constater, le modèle de couleurs RGBA vous permet de créer facilement des conceptions riches en graphismes, grâce à sa flexibilité avec une opacité et une transparence de précision. Avez-vous utilisé des couleurs RGBA dans vos projets et conceptions ? Quelle est votre opinion là-dessus? Partagez votre opinion dans les commentaires ci-dessous!

À VOIR: Comment implémenter des types de publication personnalisés et des champs personnalisés dans WordPress?