• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    5 personnages de jeux vidéo avec des accents gallois qui ne viennent pas d’Elden Ring

    5 personnages de jeux vidéo avec des accents gallois qui ne viennent pas d’Elden Ring

    Je fête le Tour de France en faisant du vélo dans les jeux

    Je fête le Tour de France en faisant du vélo dans les jeux

    Les chats sont meilleurs que les chiens (en tant que protagonistes de jeux vidéo)

    Les chats sont meilleurs que les chiens (en tant que protagonistes de jeux vidéo)

    Bangor’s Gamenetics apporte de la créativité aux contrôleurs de jeux vidéo

    Bangor’s Gamenetics apporte de la créativité aux contrôleurs de jeux vidéo

    Dwayne Johnson fait la promotion du jeu vidéo “DC League of Super-Pets”

    Dwayne Johnson fait la promotion du jeu vidéo “DC League of Super-Pets”

    Pourquoi les joueurs sont ravis de la renaissance de FF7, mais pas du remake de The Last of Us

    Pourquoi les joueurs sont ravis de la renaissance de FF7, mais pas du remake de The Last of Us

    Les meilleurs jeux vidéo concernent les duos Badass et Child

    Les meilleurs jeux vidéo concernent les duos Badass et Child

    La vidéo de Fallout 3 montre du contenu qui a été coupé du jeu

    La vidéo de Fallout 3 montre du contenu qui a été coupé du jeu

    Meilleurs maîtres des bêtes de jeux vidéo

    Meilleurs maîtres des bêtes de jeux vidéo

  • Developpement web
    • All
    • Language HTML5
    Un groupe de soutien donne pour aider au confort des patients atteints de cancer

    Un groupe de soutien donne pour aider au confort des patients atteints de cancer

    Repêchage de la LNH: Lane Hutson et Jack Devine en tête d’affiche de la catégorie des espoirs élevés à Chicago

    Repêchage de la LNH: Lane Hutson et Jack Devine en tête d’affiche de la catégorie des espoirs élevés à Chicago

    La Juventus “veut” un accord d’échange Werner-De Ligt, la “nouvelle offre” de Barcelone pour Raphinha, Chelsea “cible” Kimpembe – News 24

    La Juventus “veut” un accord d’échange Werner-De Ligt, la “nouvelle offre” de Barcelone pour Raphinha, Chelsea “cible” Kimpembe – News 24

    CSS Founder : Top entreprise de conception de sites Web à Bangalore

    CSS Founder : Top entreprise de conception de sites Web à Bangalore

    Un homme accusé d’homicide suite à une épave causée par un excès de vitesse sur le boulevard Wilma Rudolph

    Un homme accusé d’homicide suite à une épave causée par un excès de vitesse sur le boulevard Wilma Rudolph

    Extensions de navigateur qui ont fait les choses en grand

    Extensions de navigateur qui ont fait les choses en grand

    Test du Chromebook Lenovo IdeaPad Duet 3

    Test du Chromebook Lenovo IdeaPad Duet 3

    Premiers pas avec Lottie.js – SitePoint

    Premiers pas avec Lottie.js – SitePoint

    COVID-19 due to the B.1.617.2 (Delta) variant compared to B.1.1.7 (Alpha) variant of SARS-CoV-2: a prospective observational cohort study

  • Astuces
    7 choses à faire avant de changer votre thème WordPress

    7 choses à faire avant de changer votre thème WordPress

    Comment créer un site Web en 5 étapes

    Comment créer un site Web en 5 étapes

    Les 5 meilleurs outils SEO pour booster votre classement

    Les 5 meilleurs outils SEO pour booster votre classement

    La mise à jour du plugin Yoast WordPress provoque des erreurs fatales

    La mise à jour du plugin Yoast WordPress provoque des erreurs fatales

    Autowriterpro utilise l’IA pour générer de nouveaux articles pour 40 $

    Autowriterpro utilise l’IA pour générer de nouveaux articles pour 40 $

    WordPress révèle son option de création de site Web la plus abordable à ce jour

    WordPress révèle son option de création de site Web la plus abordable à ce jour

    11 étapes pour vous aider à démarrer votre carrière de blogueur

    11 étapes pour vous aider à démarrer votre carrière de blogueur

    Les 15 meilleures façons de sécuriser un site WordPress

    Les 15 meilleures façons de sécuriser un site WordPress

    WordPress 6.0 rend la création d’un site Web plus facile que jamais

    WordPress 6.0 rend la création d’un site Web plus facile que jamais

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
ADVERTISEMENT
Home Actualité

Fondamentaux CSS : Travailler avec les couleurs

Caleb by Caleb
octobre 13, 2021
in Actualité
0 0
0
Fondamentaux CSS : Travailler avec les couleurs
332
SHARES
2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedin


De nombreux facteurs doivent être pris en compte lors de la conception d’un site Web ; police, flux UX et bien plus encore. Un élément de conception très important est la couleur. Même des décisions simples comme la couleur de la marque, la couleur de la bordure et la couleur de l’arrière-plan ont un impact certain et perceptible.

Dans cet article, nous aborderons les principes fondamentaux des couleurs CSS et apprendrons comment transformer un site HTML en un site Web impeccable.

Premiers pas avec les couleurs CSS

Il existe une certaine façon de décrire les couleurs en CSS qu’un ordinateur peut comprendre. Cela se fait généralement en divisant la couleur en divers composants, en calculant un ensemble mixte de couleurs primaires pour former la couleur souhaitée. Il existe plusieurs façons de décrire une couleur en CSS.

Premiers pas avec les couleurs CSS

Utiliser des noms de couleurs comme mots-clés

Il existe environ 140 noms de couleurs CSS pris en charge par la plupart des navigateurs modernes. Cela pourrait être aussi simple que rouge ou cyan pour le mot-clé couleur. Bien que cela aide avec une gamme modérée de couleurs, vous êtes limité à quelques couleurs définies sans aucun contrôle sur les nuances et les teintes. C’est là que vous devrez passer à la gamme supérieure d’options de couleur CSS.

/*Syntax*/
color: red;
color: crimson;
color: slateblue;

Utilisation des valeurs RVB

Lors de la conception d’un site Web ou d’une application, le Schéma de couleur importe beaucoup, ce ne devrait certainement pas être la dernière chose à laquelle vous pensez. En CSS, vous pouvez utiliser trois méthodes pour représenter une couleur RVB. Il s’agit de la notation de chaîne hexadécimale, de la notation fonctionnelle RVB et de la notation fonctionnelle HSL. Voici de plus près chacun d’eux.

Notation de chaîne hexadécimale

La notation de chaîne hexadécimale commence toujours par le caractère #. Après ce caractère, vous spécifiez les couleurs à l’aide de chiffres hexadécimaux d’un code de couleur spécifique. La chaîne n’est pas sensible à la casse, mais il est classique d’utiliser des minuscules. Voici quelques cas d’utilisation :

#rrggbb

C’est la façon la plus courante de décrire une couleur numérique. C’est une couleur entièrement opaque avec des composants rouges, verts et bleus comme 0xrr, 0xgg, et 0xbb respectivement.

#rrggbbaa

Il suit les critères RVB décrits ci-dessus avec un canal alpha qui gère la transparence de la couleur. Plus le 0xaa valeur est, plus la couleur devient translucide.

#rgb

Si tu as de la couleur #556677, vous pouvez simplement l’écrire comme #567 puisqu’il représente 0xrr, 0xgg, et 0xbb respectivement. Par exemple, #000 (ou #000000) est noir tandis que #fff (ou #ffffff) est blanc.

#rgba

Il suit les critères ci-dessus avec un canal alpha spécifié par 0xaa pour contrôler l’opacité.

Notation fonctionnelle RVB

La notation fonctionnelle RVB représente les couleurs à l’aide de composants rouges, verts et bleus. Il est défini à l’aide de la fonction rgb() qui accepte les paramètres d’entrée sous la forme de composants primaires rouge, vert et bleu (et un canal alpha en option). Les valeurs rouge, verte et bleue doivent être un nombre entier compris entre 0 à 255 (inclus), soit un pourcentage variant de 0% à 100%. D’autre part, le canal alpha accepte des valeurs de 0.0 (complètement transparent) à 1.0 (complètement opaque). Il accepte également une valeur en pourcentage de 0% (identique à 0.0) et 100% (identique à 1.0).

/*Syntax*/
color: rgb(rr,gg,bb);
color: rgba(rr,gg,bb,a);

Notation fonctionnelle HSL

La notation fonctionnelle HSL représente la couleur en utilisant la teinte, la saturation et la luminosité. C’est très similaire au RVB() fonction en termes d’utilisation. Vous pouvez facilement trouver la valeur hexadécimale de n’importe quelle couleur sur votre écran d’ordinateur. Dans cette méthode de couleur, la teinte définit la couleur réelle en fonction de la position sur la roue chromatique. La saturation est le pourcentage de gris avec la teinte maximale possible. La luminosité fait passer la couleur de son apparence la plus sombre à la plus brillante possible à mesure qu’elle augmente.

La valeur de teinte (H) est spécifiée par l’unité d’angle prise en charge dans CSS. Il comprend degrés, rad, diplômé, et tourner. La saturation (S) spécifie le pourcentage de la couleur finale composé de teinte. La composante de luminosité (L) définit le niveau de gris.

/*Syntax*/
color: hsl(XXdeg, XX%, XX%);
color: hsl(XXturn, XX%, XX%);

Application de couleurs aux éléments HTML

En CSS, le Couleur la propriété définit la couleur de premier plan du contenu, et Couleur de l’arrière plan définit la couleur de fond du contenu structuré par HTML. Lorsqu’un élément est rendu, vous pouvez utiliser les propriétés de couleur pour le styler.

Propriété de couleur pour les textes

Les Couleur La propriété est utilisée lors du dessin de texte et lorsque vous avez besoin de tout type de décoration de texte. Vous pouvez utiliser le texte-décoration-couleur propriété pour rendre les soulignements, les surlignages ou les lignes barrées de différentes couleurs. Vous pouvez changer la couleur de fond du texte en utilisant le Couleur de l’arrière plan biens. Vous pouvez appliquer un effet d’ombre sur le texte en utilisant le ombre de texte biens. Vous pouvez sélectionner texte-accent-couleur tout en dessinant des symboles d’emphase dans les champs de texte.

Propriété de couleur pour les boîtes

Comme vous le savez, tout sur une page Web suit le modèle de boîte. Ainsi, chaque élément est une boîte avec une sorte de contenu et une zone de remplissage, de bordure et de marge en option. Vous pouvez utiliser le Couleur de l’arrière plan propriété lorsqu’il n’y a pas de contenu au premier plan. Lorsque vous tracez une ligne afin de séparer les colonnes d’un texte, vous pouvez utiliser le couleur-règle-colonne propriété pour cela. Il y a un contour-couleur propriété pour colorer le contour. Notez qu’un contour est différent de la bordure : il agit comme un indicateur de mise au point.

Propriété de couleur pour les bordures

Tout élément HTML peut avoir une bordure. Vous pouvez définir le couleur de la bordure propriété comme border-top-color, bordure-droite-couleur, border-bottom-color, et bordure-gauche-couleur pour définir la couleur de bordure des côtés correspondants. Cependant, l’utilisation de la propriété abrégée est une bonne pratique.

Les border-inline-start-color La propriété vous permet de colorer les bords de la bordure les plus proches du début. D’autre part, le border-inline-end-color La propriété vous permet de colorer la fin du début des lignes de texte dans une zone. Bien que cela varie en fonction de votre mode d’écriture, orientation-texte, et direction.

Conclusion : couleur et accessibilité

Bien qu’un site Web magnifiquement conçu soit fortement influencé par la couleur utilisée, vous devez toujours vous assurer qu’il est accessible. Une mauvaise utilisation de la couleur peut entraîner une perte de trafic important sur votre site Web.

L’utilisation de notations de chaîne hexadécimales, de noms de couleurs ou de valeurs RVB dépend entièrement de vous. Assurez-vous simplement que vous utilisez des couleurs pour renforcer le texte existant et qu’il suive une hiérarchie visuelle déterminée. En savoir plus sur la théorie des couleurs et créer votre propre palette est une idée exceptionnelle si vous êtes un développeur Web en herbe. D’ici là, codage joyeux et coloré !


Une collection de fournitures d'art de différentes couleurs disposées en cercle
Comment utiliser la théorie des couleurs pour élever vos projets créatifs

En utilisant les bonnes couleurs de la bonne manière, vous pouvez amener vos projets créatifs à un tout autre niveau.

Lire la suite


A propos de l’auteur

Nainy Mourya
(10 articles publiés)

Naincy se spécialise dans la création de sites Web hautement réactifs et d’une stratégie de contenu efficace ainsi que dans des copies Web. Elle est une rédactrice technique indépendante qui garde un œil attentif sur les technologies tendances.

Plus de Naincy Mourya

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner

— to www.makeuseof.com

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Caleb

Caleb

Stay Connected

  • 85.8k Followers
  • 172k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    4031 shares
    Share 1612 Tweet 1008
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1073 shares
    Share 429 Tweet 268
  • 2 façons d’installer le serveur LAMP sur Ubuntu 22.04 | 20.04

    456 shares
    Share 182 Tweet 114
  • Battle.net s’est remis d’une attaque DDoS, selon Blizzard

    578 shares
    Share 231 Tweet 145
  • Le mystère de la mort de la mariée résolu; histoire d’amour a conduit à son suicide

    350 shares
    Share 140 Tweet 88

Follow Our Page

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Check our landing page for details.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies

Recent News

Qu’est-ce que la technologie HALO qui a sauvé la vie de deux pilotes en une journée en F1 ?

Qu’est-ce que la technologie HALO qui a sauvé la vie de deux pilotes en une journée en F1 ?

juillet 3, 2022
Un groupe de soutien donne pour aider au confort des patients atteints de cancer

Un groupe de soutien donne pour aider au confort des patients atteints de cancer

juillet 3, 2022

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.