• Bonjour.

    En vu du tutoriel à paraître dans la journée, je me suis dit qu'il serais une bonne idée d'aborder rapidement le thème des couleurs en CSS et en HTML.

    En CSS, comme en HTML, les couleurs s'avèrent indispensables, pour les fonds, les bordures, les textes ect... alors avant d'aborder réellement les codes penchons nous un peu sur les différentes façons de faire appel à une couleur ou de les nommer. 

    → Nous pouvons déjà noter dans un premier point qu'en HTML comme en CSS, les mots sont en anglais, donc pour nous qui ne parlons pas cette langue naturellement, ce n'est pas toujours simple. 

    Pour faire appel à une couleur en CSS, il existe différentes façon et ensemble, nous en avons déjà vue deux. Donc on va les aborder en premier rapidement.

    I/ Les connus

    1. Avec un simple mot

    Comme montré dans le tutoriel "initiation au HTML", parfois il suffit de connaître le nom de la couleur en anglais afin de l'appeler aussi bien dans le HTML que dans le CSS.

    → L'avantage, c'est que c'est plus simple que le #AAAAH!Jesaisplusquelestlecodedecettecouleur, et c'est donc plus rapide et efficace.
    → Mais c'est aussi beaucoup moins précis. Rose c'est rose, tu peux pas varier sur ses nuances. 

    2. Avec un hashtag

    Comme montré dans le tutoriel "initiation au CSS", on peux faire appel à une couleur par son code, donc un hashtag suivit de six caractères (lettres et/ou chiffres).

    → Avec ça, la précision lors de l'appel à la couleur est extra ! Hum... encore faut-il savoir quel code appel quel couleur. Vous pouvez vous cassez la tête comme moi à apprendre les couleurs principales (celons vos propres goûts) ou alors utiliser une solution toute simple et hyper pratique. Je vous donne le lien vers ce site, qui propose une visionneuse de couleur, vous n'avez plus qu'à choisir celle qui vous plait et en copier le code.

    II/ Le p'tit nouveau

    1. RGB... A

    RGB pour Reg Green Blue, chaque valeur associé augmente ou diminue donc le taux de la couleur au fond. Et A... A pour gérer l'opacité. Alors, voici comment se présente notre petit code (à adapter ensuite dans l'environnement CSS ou HTML en fonction de ce que vous changer) :

    background-color: rgba(20, 255, 128, .5);

    Ici donc nous avons un taux de rouge à 20, un taux de vert à 255 et un taux de bleu à 128. Pas trop sorcier jusque là non ? Bien, penchons nous maintenant sur notre "a" il est à .5 autrement dit, l'opacité du fond est de 50% ou de 0,5. Vous pouvez faire varier ce taux entre 0 (mais bon le fond ne serait pas très utile du coup) et 1.

    Voici ce que donne la couleur du fond actuel.

    Pour la changer, il suffit de varier les chiffres tantôt du rouge, du vert et du bleu. Certes, on peux y aller un peu à tâtons au début. Du coup, sois on peux se souvenir du tableau ci-dessous, sois on peux utiliser la ressource donnée ici.

    ___________

    Et voilà, c'est tout. 
    Maintenant que vous savez comment appeler des couleurs et que vous avez les ressources nécessaires pour y accéder facilement, vous pourrez mettre les couleurs de vos choix dans vos codes.


    13 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique