2 résultats trouvés pour auteur_Minishiro

Bonjour!

Ah, les codes hexadécimaux! Ces bé-bêtes donnent du fil à retordre à bien des codeurs, expérimentés comme débutants, et nombreux sont ceux qui doivent se fier à des générateurs de code pour produire la couleur idéale, souvent par essais et erreurs. Eh bien, l'astuce que je vous sers aujourd'hui ne remplacera certes pas lesdits générateurs, mais peu à peu, vous serez probablement capable de les utiliser moins souvent, voire pas du tout dépendant des situations. :)

Pour ceux qui ne le savent pas, il y a quatre façon de générer des codes de couleur sur le web.

white, black, blue, etc. → ce sont les noms des couleurs en anglais.
rgb(XXX,XXX,XXX) → ce sont les quantités de rouge, vert et bleu dans la couleur, représentées par une valeur allant de 0 à 255.
rgba(XXX,XXX,XXX,0.X) → même principe que le rgb, mais avec la transparence en nombre décimal entre 0 et 1.
#XXXXXX → codes hexadécimaux.

Les codes hexadécimaux sont nommés ainsi car ils comportent, vous l'aurez deviné, 6 chiffres ou lettres. Les deux premiers chiffres donnent la quantité de rouge, les seconds de vert et les derniers de bleu, comme ceci:

#XXXXXX

En effet, les couleurs primaires sur le web ne sont pas les mêmes que celles des arts plastiques (magenta, cyan et jaune). Les codes hexadécimaux vont de 00 à FF de la manière suivante:

00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 2A, 2B, 2C, 2D, 2E, 2F, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 3A, 3B, 3C, 3D, 3E, 3F, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 4A, 4B, 4C, 4D, 4E, 4F, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 5A, 5B, 5C, 5D, 5E, 5F, etc.

00, c'est le noir, c'est l'absence absolue de la couleur. FF, c'est la saturation maximale. Ainsi:

#000000 = noir
#FF0000 = rouge
#00FF00 = vert
#0000FF = bleu
#FFFF00 = jaune
#00FFFF = cyan
#FF00FF = rose
#FFFFFF = blanc

Lorsque les codes de rouge, vert et bleu sont les mêmes, la saturation de la couleur est nulle; ces codes correspondent aux différentes nuances de gris.

#000000 = noir #111111 = gris 1 #222222 = gris 2 #333333 = gris 3 #444444 = gris 4 #555555 = gris 5 #666666 = gris 6 #777777 = gris 7 #888888 = gris 8 #999999 = gris 9 #AAAAAA = gris 10 #BBBBBB = gris 11 #CCCCCC = gris 12 #DDDDDD = gris 13 #EEEEEE = gris 14 #FFFFFF = blanc

#000000 = noir #101010 = gris A #202020 = gris B #303030 = gris C #404040 = gris D #505050 = gris E #606060 = gris F #707070 = gris G #808080 = gris H #909090 = gris I #A0A0A0 = gris J #B0B0B0 = gris K #C0C0C0 = gris L #D0D0D0 = gris M #E0E0E0 = gris N #F0F0F0 = gris O

#0F0F0F = gris AA #1F1F1F = gris BB #2F2F2F = gris CC #3F3F3F = gris DD #4F4F4F = gris EE #5F5F5F = gris FF #6F6F6F = gris GG #7F7F7F = gris HH #8F8F8F = gris II #9F9F9F = gris JJ #AFAFAF = gris KK #BFBFBF = gris LL #CFCFCF = gris MM #DFDFDF = gris NN #EFEFEF = gris OO #FFFFFF = blanc

Lorsque tous les chiffres d'un code sont les mêmes, il est possible de n'en mettre que les trois premiers (note: ça ne fonctionne pas en BBCode). Les majuscules sont facultatives:

#FFF, #EEE, #DDD, #CCC, #BBB, #AAA, #999, #888, #777, #666, #555, #444, #333, #222, #111, #000,
#fff, #eee, #ddd, #ccc, #bbb, #aaa
#ff0000, #00ff00, #0000ff, #ffff00, #00ffff, #ff00ff, #ffffff

Voyons donc comment ces belles informations peuvent vous être utiles! :) Supposons que nous partons d'un rouge:

Lorem ipsum
(#FF0000)

Finalement, ce rouge est trop vif et trop pâle. Nous voudrions le rendre plus foncé.

Lorem ipsum
(#CC0000)

Et puis, il est encore trop vif, nous allons ajouter du vert et du bleu pour en baisser la saturation.

Lorem ipsum
(#CC3333)

Comme nous avons ajouté de la couleur, elle est à nouveau trop pâle.

Lorem ipsum
(#BB2222)

Et puis, ça serait bien que ça tire un peu sur le bourgogne, nous allons donc ajouter du bleu.

Lorem ipsum
(#BB2244)

Et on aimerait que ça soit encore un peu plus foncé.

Lorem ipsum
(#AA1133)

Et voilà! Bon, certes si vous êtes daltonien, il se peut que vous ne voyez pas ou peu la différence des nuances entre ces différentes étapes, mais sinon vous devriez le voir. :)

En espérant que ça serve! ^^

Bonjour!

Je me suis rendue compte que plusieurs forums ces jours-ci utilisent des polices qui sortent de l'ordinaire dans leurs designs. Le problème avec ces polices particulières, c'est que le codeur du thème doit sélectionner des polices alternatives au cas où le visiteur n'ait pas cette police installée sur son ordinateur. Ça gâche parfois l'effet que le codeur recherchait. Il existe toutefois une solution à ce problème qui garantit que tous les utilisateurs verront la police, peu importe celle que vous utiliserez. Voici un petit tutoriel rapide pour intégrer votre police directement dans votre site web/blog/forum.


I. Trouver, télécharger et installer votre police

Plusieurs sites sont à votre disposition pour ce faire, des sites où les polices sont gratuites et libres de droits pour les utilisations non-commerciales. En voici quelques uns:

• DaFont
  Probablement le plus connu et le plus utilisé parmi les francophones car il offre un bon support des artistes et une interface en français.
  
• Acid Fonts
  Plus utilisé que DaFont donc plus grande variété; bon support des artistes également et guides pour créer vos propres polices.
  
• Abstract Fonts
  Un autre site avec un bon support, recherche aisée.
  
• 1001 Fonts
  Le deuxième plus populaire dans le monde, jolie interface et beaucoup de variété.

Il y en a de nombreux autres et ceux-ci ne sont que suggestions. Une fois que vous avez trouvé une police qui vous convient, il vous suffit de la télécharger. Certains fichiers seront compressé en .zip ou .rar et auront besoin d'être décompressés (jZip, Winrar, WinZip ou celui que vous avez déjà installé sur votre ordinateur (inclus sur Mac)). Une fois le fichier décompressé si nécessaire, il vous suffira de double-cliquer sur le fichier .ttf pour ouvrir l'assistant Windows et de cliquer sur «Installer» (veuillez prendre note qu'il vous faudra les droits d'administrateur pour se faire). La procédure est similaire sous iOS. Si vous recevez des messages d'erreur, c'est probablement que la police est déjà installée sur votre ordinateur.


II. Héberger votre police

Les hébergeurs supportant les fichiers .ttf sont malheureusement rares. Il y en a toutefois un qui le fait, il s'appelle Dropbox. C'est un logiciel gratuit, rapide et sécuritaire qui vous laisse héberger en ligne jusqu'à 2Go de contenu (abonnement possible jusqu'à 500Go). Non ce n'est pas une pub volontaire, c'est juste que dans ma recherche d'hébergeur de fichiers .ttf, je n'en ai pas trouvé d'autre. Sinon, si vous avez votre site personnel hébergé sur serveur, il y a de bonnes chances que celui-ci supporte les fichiers .ttf.
Édit Onyx : Pour les utilisateurs de Archive-Host, oui il supporte les fichiers ttf.

Bon, maintenant que vous savez comment et où l'héberger, voici comment vous allez récupérer votre police (Windows 7/Vista). Dans le menu Démarrer, vous accéderez au Panneau de configuration. Dans ce dernier, vous aurez le volet «Polices» (dossier avec une lettre A qui sort). Le temps de chargement sera plus ou moins long dépendant du nombre de polices sur votre ordinateur. À cet endroit, vous avez une liste de toutes les polices d'écriture installées sur votre ordinateur. Allez chercher la police que vous venez d'installer. Vous n'aurez qu'à copier/coller la police dans votre dossier Dropbox, sous-dossier Public.


III. Installer votre police (CSS)

Vous aurez évidemment besoin d'un lien dont l’extension est .ttf. Il vous faudra donc le lien direct vers votre fichier hébergé. Voici le code qu'il vous faudra intégrer dans le CSS de votre forum (PA > Affichage > Couleurs > Feuille de style CSS):

Code:

@font-face {
font-family: nomdevotrepolice;
src: url('urldevotrepolice.ttf');
}

Ensuite, pour utiliser cette police, il vous suffira d'utiliser son nom à la place du nom de n'importe quelle police normale, comme ceci:

Code:

.title {
font-family: nomdevotrepolice;
}

En espérant que ça vous a plu et que ça vous sera utile! Si vous connaissez d'autres hébergeurs qui prennent le format .ttf, n'hésitez pas à partager. :)