• Couleur

    Il existe trois moyens différents de noter les couleurs pour les navigateurs les reconnaissent : avec leur nom (anglais), un code hexadécimal ou en RGB

    Couleur nommées

    Il s'agit d'utiliser le nom de la couleur dans le code. Voici un petit aperçu des couleurs pouvant être utilisé de cette façon.

    Red

    Blue

    Yellow

    Green

    Maroon

    Lime

    Gray

    Fuchsia

    Purple

    Silver

    Teal

    White

    Aqua

    Olive

    Navy

    Black

    Il en existe d'autre, mais je vous laisserais le soin de les chercher sur internet.

    C'est la méthode la plus simple pour utiliser rapidement un couleur.

    CSS

    sélecteur {   color: red;}

    HTML

    <balise color="red" />

    Code Héxadécimal

    Permettant de faire plus de 16 millions de couleurs, cette façon d'écrire les couleurs est beaucoup plus complète que la précédente.
    On utilise la notation suivante :

    #RRVVBB

    On utilise ensuite des chiffres de 1 à 9 et des lettres de A à F que l'on associe par paire pour indiquer les intensités de rouge, de vert et de bleu de la couleur voulue. Les deux premier correspondent au rouge, ceux du milieu au vert et les derniers au bleu. Le F est la teinte la plus intense, et le 0 la plus sombre. Ce type de code est toujours précédé du symbole #

    Ainsi, si je veux du rouge,j'obtiens le code suivant:

    CSS

    sélecteur {   color: #ff0000;}

    HTML

    <balise color="#ff0000" />

    Couleur RGB

    Ce type d'écriture fonctionne de la même manière qe les couleurs héxa: il faut définir 3 valeurs, une pour le rouge, le vert et le bleu.

    rgb(R,V,B)

    Gardons la couleur rouge. J'obtient le code suivant :

    CSS

    sélecteur {   color: rgb(255,0,0);}

    HTML

    <balise color="rgb(255,0,0)" />

    255 est la valeur maximum que peut prendre cette couleur. Si ce nombre ne vous parle pas, vous pouvez utiliser la même notation avec des pourcentages

    CSS

    sélecteur {   color: rgb(100%,0,0);}

    HTML

    <balise color="rgb(100%,0,0)" />

    Canal Alpha

    Il est également possible de créer des couleurs transparentes en rajoutant un canal dans la notation rgb : le canal alpha. Il permet de gérer l'opacité de la couleur entre 0 (invisible) et 1 (visible)

    Dans l'exemple suivant, j'ai un rouge à 50% d'opacité.

    CSS

    sélecteur {   color: rgba(255,0,0,0.5);}

    HTML

    <balise color="rgba(255,0,0,0.5)" />

     

    Tags Tags : , , , ,
  • Commentaires

    1
    Vendredi 30 Décembre 2011 à 20:47

    Pour Google Chrome ça marche?

    Et pour les autres couleurs, comme aliceblue?

    Pardon pour la question ... Je sais c'est bête x)

    2
    Vendredi 30 Décembre 2011 à 20:51

    Si tu vois la couleur, c'est que c'est bon ;)

    Je pense pas qu'il y ai beaucoup de monde qui soit gêné par les couleurs: tous les navigateurs actuel reconnaissent les couleur nommée =)

    3
    Samedi 21 Janvier 2012 à 14:10

    Coucou, je cherchais le tutoriels du menu qui est a gauche, si tu l'a déja fait, tu peux me donner le lien ? T.T

    *sinon bon tuto, même si je voie pas trop a quoi ça sert xD merci du partage*

    4
    Samedi 21 Janvier 2012 à 14:37

    Reimu, le tutoriel pour le menu de gauche, a été supprimé car la personne l'ayant fait avant a trouver que c'était du plagiat. Les tutoriels sont à tout le monde, mais ça ne lui à pas plu.

    5
    Jeudi 15 Mars 2012 à 20:09

    A la bourre moi...

    Si tu cherche toujours le tuto pour faire des ongets coulissant, voilà le nouveau tuto

    => http://fanstasy-graph.eklablog.net/onglets-coulissant-a39580075

    6
    Dimanche 18 Octobre 2015 à 10:05

    Bonjour,

    Votre site est très précieux et m'a beaucoup aidée à diverses reprises.

    Aujour'hui, il y a un truc qui coince et que je ne parviens pas à résoudre. Je voudrais que le fond de mon site Ekla puisse être en dégradé à partir de la couleur que j'utilise actuellement et tout ce que je lis sur les forums ne fonctionne pas. Quand j'essaie de rajouter un des codes CSS que j'ai trouvés sur ces forums, Ekla me signale qu'il y a une erreur et n'enregistre pas ce code.

    Pourriez-vous m'aider ? Merci beaucoup par avance.

    Focales

    7
    Dimanche 18 Octobre 2015 à 10:43

    Bonjour :)

    Tout d'abord, le message "d'erreur" affiché par EklaBlog peut être dû à plusieurs choses, regardez s'il n'y a pas un problème de syntaxe ( manque d'une accolade ouvrante ou fermante { }, manque d'un point virgule ; ).
    Il peut aussi s'agir d'une notation que l'éditeur ne supporte pas, mais qui n'est pas une erreur de code :
    • Les commentaire sur plusieurs lignes. La seule syntaxe supportée est la suivante :

    /* Ligne 1*/
    /* Ligne 2 */

    • Les règles commençant par @ (@media ou @keyframe)
    • Certains sélecteurs avancés :

    selecteur > seletceur {}

    selecteur + selecteur {}

    selecteur ~ selecteur {}

     

    Si tout ce que j'ai dis au dessus est correct, le problème peut vernir du code du dégradé lui même. Je vous conseil d'utiliser un site de générateur de dégradé (j'utilise pour ma part celui-ci : http://www.colorzilla.com/gradient-editor/)

    Le code fourni se place dans les propriété de l'élément auquel doit s'appliquer le dégradé. Pour le fond sur Ekla

    #body {
       CODE DEGRADE
    }

    Si le problème persiste malgré tout, collez le code dans le HTML d'un module simple entre les balises <style> </style>

    <style>
    #body {
      CODE DEGRADE
    }
    </style>

    8
    Dimanche 18 Octobre 2015 à 10:56

    Merci beaucoup pour votre réponse mais je suis quasi nulle en matière de codes CSS aussi j'ai du mal à comprendre vos explications. Alors pour créer mon propre code sur Colorzilla j'ai testé mais là encore le code CSS que me donne le site ne plait pas à EKLA

    9
    Dimanche 18 Octobre 2015 à 10:58

    Montrez moi votre code

    10
    Dimanche 18 Octobre 2015 à 10:59

    Je viens de réessayer mais Ekla rejette à nouveau le code qui est le suivant :

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#606c88+0,3f4c6b+100;Grey+3D+%232 */
    background: #606c88; /* Old browsers */
    background: -moz-linear-gradient(top,  #606c88 0%, #3f4c6b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #606c88 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #606c88 0%,#3f4c6b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #606c88 0%,#3f4c6b 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #606c88 0%,#3f4c6b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */

    Ce n'est d'ailleurs pas ce que je veux comme couleur car je voudrais partir du bleu marine que j'ai déjà sur mon site mais en y ajoutant un peu de dégradé.

    11
    Dimanche 18 Octobre 2015 à 11:00

    Et sur mon site actuel, la couleur de base #12121C est cochée partout où il faut, c'est peut-être pour ça que les codes ne fonctionnent pas

     

    12
    Dimanche 18 Octobre 2015 à 11:15

    #body {
    background: #12121c; /* Old browsers */
    background: -moz-linear-gradient(top,  #12121c 0%, #363654 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#12121c), color-stop(100%,#363654)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #12121c 0%,#363654 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #12121c 0%,#363654 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #12121c 0%,#363654 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #12121c 0%,#363654 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12121c', endColorstr='#363654',GradientType=0 ); /* IE6-9 */
    }

    Ce code fonctionne sur mon blog.

    Le fait que les cases soient cochées peut masquer les codes ajoutés en CSS, mais ne provoquent pas d'erreur

    Pour modifier la couleur, double cliquez sur les petits carrés en bas. Ceux du haut permettent re modifier l'opacité.

     

    13
    Dimanche 18 Octobre 2015 à 11:21

    Cela marche bien en effet mais il faut décocher toutes les cases de mon fond actuel. Le problème va être pour moi de trouver comment avoir le bon dégradé car celui-ci, que je viens de tester chez moi, donne un bleu qui ne me plait pas en partie basse.

    14
    Dimanche 18 Octobre 2015 à 11:56

    Merci beaucoup en tout cas. Je vais garder le lien précieusement jusqu'à ce que je trouve le bon dosage mais pour le moment je n'y parviens pas. Le dégradé ne se voit pas assez et pourtant cela fait une demi-heure que je teste avec des pourcentages différents. Bonne journée et merci encore. Votre site est une mine d'or.

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :