-
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 : couleur, color, rouge, rgb, bleu
-
Commentaires
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*
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
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
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>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
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é.
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
#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é.
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.
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.
Ajouter un commentaire
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 =)