• 2/Introduction aux couleurs

    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.


  • Commentaires

    1
    Jeudi 1er Juillet à 13:20

    Hahaha ça me rappelle mon cours de physique sur la vision des couleurs qui n'était pas pareil pour l'oeil et pour l'ordinateur qui n'avait même pas les trois mêmes couleurs de références ect...

    Levez la main ceux qui ont déjà eu ce cours haha!

    Salutations

      • Lundi 5 Juillet à 10:44

        Oui moi aussi en l'écrivant j'ai beaucoup pensé à ce cours xD

        Au début je pensait faire un petit mixte entre le cours et ce magnifique article justement, puis ensuite je me suis dit que je risquait trop de dénaturer les propos du cours et qu'il était au final plus simple d'aller à l'essentiel.

        Merci pour ta visite, bonne journée **Aeda. ♥

    2
    Jeudi 1er Juillet à 16:49

    Merci beaucoup ma libulouche =)

    3
    Dimanche 4 Juillet à 20:57

    Ton thème est magnifique et ton article est superbe et aide beaucoup sur le CSS, et qui peut s'avérer super utile surtout sur une plateforme comme Eklablog !

    En tout cas bravo !^^

      • Lundi 5 Juillet à 10:41

        Coucou toi ! Cela fait un bail que je t'ai pas vu ici xD 

        Merci beaucoup, même s'il changeras bientôt c'est vrai qu'il est beau j'en suis assez fière ^^. Et merci, même si je me doute que toi tu n'en avais pas besoin xD

        (J'aime beaucoup ton avatar, il change du papillon :3)

        Merci beaucoup :p

      • Lundi 5 Juillet à 10:53

        Oui en effet c'est vrai que j'avais un peu délaissé Ekla, mais je me suis dit pourquoi pas revenir et voir tout ce qu'il y a de nouveau ? Et j'ai pas été déçu ! x)

        Ouais, c'est vrai que je me débrouille en CSS mais c'est tout autre chose de faire un thème en entier et franchement bravo parce qu'en plus des connaissances en code faut une super créativité et là on la ressens bien ! J'admire beaucoup ton travail !^^

        (Oui... C'est vrai x)
        Je me suis dit, quitte à revenir, autant faire prendre la retraite à ce vieux pépère, c'est pas censé vivre longtemps les papillons en plus xD)

      • Lundi 5 Juillet à 11:08

        Ah ouais tu m'étonne xD ! En plus il y a eu pleins de nouveaux ou de gens qui faisaient leur grand retour sur la plateforme ces derniers temps. C'est vraiment chouette, y à pleins de personnes sympas et de blogs magnifiques à découvrir maintenant. Oh, et du coup tu compte essaye d'intégrer la communauté cette fois ? (Sans la moi qui t'inscrit à des milliers de RG qui se révèlent être inactifs xD ^^")

        Oui c'est vrai qu'il faut de l'inspiration.. cela dit si j'était pas sur ekla je serait incapable de coder un thème et je ne pense pas que ce soit ton cas. :p. En tout cas merci beaucoup. ^^

        Ah. xD. Tu est tellement généreux avec ce pauvre vieux petit père, avoue, tu espère toucher son héritage en faisant ça ? 
        Plus sérieusement, c'est vrai que ça donne un coup de frai à ton compte, comme la petite description que tu à mise (elle est nouvelle non ?)

      • Lundi 5 Juillet à 11:24

        Ouais j'ai pu voir ça ! J'en ai pas encore fait le tour, y'en a tellement ! Humm... Bonne question, je ne sais pas encore si je vais rester... Je suppose que je verrais x)

        Je sais pas trop comment ça se passe sur Ekla mais je suis sûr que c'est pas bien différent que de créer une page HTML et d'y intégrer un fichier CSS (parce que y'a que ça à faire pour faire un thème en dehors d'une plateforme annexe x))

        Comment t'as deviné ? Euh, je veux dire, non, bien sûr que non m'enfin voyons !
        Ah... nan la description elle date d'un an au moins, si ce n'est plus, et j'ai d'ailleurs hésité à l'enlever parce que elle me plaît pas trop... Je pense la réécrire...
        Mais c'est vrai que je le trouve sympathique ce nouvel avatar (C'est un personnage de Pokémon, en plus xD). D'ailleurs, le tien aussi est tout neuf non ?
        J'aime beaucoup le style noir&blanc, ça donne un côté claaasse, pis accompagné de ta citation, ça rend ton profil vraiment super beau je trouve !^^

      • Lundi 5 Juillet à 11:42

        Ouais je comprend ^^. En tout cas quand Yim's ouvrira je te dirais ^^ (enfin si je finis par réussir à le finir un jour... pour le moment je travaille encore la forme en je pense le scénario bien comme il faut dans ma petite tête pour que tout sois parfait... j'ai un soucis avec la perfection je crois.)

        Ouais je suppose que c'est pareil du coup. Même si en vrai tu peux coder un thème sans utiliser le HTML, genre sur GraphA le seul binome CSS/HTML c'est la menubarre fixe ^^". Après je suis pas une pro ekla, y en a y arrivent carrément à changer la forme de la plateforme et là tu peux dire "ok, respect mec" (enfin meuf parce que généralement c'est des filles sur ekla..). Genre ce blog.

        Ah bah bien ! Si il tombe dans les escaliers on sauras c'est qui. 
        Ah xD OK, erreur. Bon. Retourne te coucher Aeda maintenant xDD. D'accord, bah autant pour moi alors ^^
        Ouais il est super sympa ^^. (Pourquoi je suis pas étonnée ? xDD). Ouaip, je l'aime bien celui-ci. ^^
        Ouais moi pareil, le noir et blanc c'est giga classe :D. Aaah merci, moi aussi j'aime bien, je pense le garder un moment lui (ça et la flemme de changer aussi xDD).

      • Lundi 5 Juillet à 12:30

        D'acc-o-d'acc ! (Ouais je comprends, et je suis certain que ça donnera un magnifique RPG blog !
        Mais naaan xDD)

        D'accord ! Ah bon ? xDD
        Tu m'étonnes, c'est impressionnant !

        Maiiis nan ça aura été une petite glissade due à de l’inattention, voilà tout ! (Dis, t'as fini de révéler mes plans comme ça au grand public ? xDD)
        T'inquiète pas ça arrive, surtout qu'en plus vu mon inactivité c'est normal que tu n'as pas consulté mon profil xD
        Merci ! (Franchement, bonne question x))
        C'est clair ! (Et sombre aussi du coup, vu que c'est noir et blanc)
        (Je vais aller m'enterrer la tête tel une autruche après cet ignoble jeu de mot, je m'en excuse xD)
        (Tu m'étonnes ! xDD)

      • Lundi 5 Juillet à 12:53

        (Ouais mais toi aussi t'es bourré d'optimisme xD.)

        Grave. Un jour je saurais faire ça aussi. Ou pas.

        Aaaah je vois, la peau de banane qui trainais par terre ça aurait pas été la tienne ? (Oups désolé, attend je corrige le tir "CECI EST UN CONVESATION TOTALEMENT INVISIBLE, EN FAIT VOUS NE VOYEZ RIEN". Voilà. 
        Bah si des fois j'y allait en plus... mais je sais pas j'avais jamais fait le lien étonnamment... j'ai un soucis docteur (un seul vraiment ?). 
        ^^ (xD)
        OK.
        (Ouais je crois que tu peux aller faire ça. xDD)
        Nan mais en vrai je peux rien dire hier j'ai failli crier à mon frère "TOUCHE PAS C'EST A LORAINE" lorsqu'il à voulu prendre la limonade. (photo pour comprendre ma blague pourrie).
        (En vrai c'est dur de trouver une pdp qui convienne ! Quel travail à plein temps ! Moi j'ai déjà rendu le tablier mais toi qui continu franchement gg xDD)

      • Lundi 5 Juillet à 13:15

        (Hmmm T'as pas tort xD)

        Mais siii !

        Mais nan, elle aurait été placée là complètement par le plus grand des hasard ! (Merci, c'est mieux, maintenant on peut parler de mon plan machiavélique en toute discrétion !)
        Ah ouais ? Mais naaan xD
        Si t'as un souci, qu'est-ce que j'ai moi alors docteur ? J'ai ri à cette blague ! Pourquoi ? Pourquoi ? Pourquoiiii ?
        (Mais c'est clair ! Totalement xDD
        Merci... Je suppose que j'ai aussi un critère de "perfection" x)

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :