peekaboorpg

[peekaboorpg]

Manipuler les couleurs en CSS avec color-mix()

Quand on potasse le design de nos forums, on a souvent besoin de trouze mille couleurs pour faire quelque chose d'à peu près joli. Parfois, on aurait juste besoin de variantes "plus claire", "plus sombre", "semi-transparente" de notre couleur de base. En temps normal, on va donc devoir définir chacune de nos couleurs une par une, chacune son code hexadécimal péniblement pioché sur une palette.

Mais en CSS moderne, il existe maintenant color-mix(), une fonction qui est prise en charge par la plupart des navigateurs modernes.

La fonction prend trois valeurs, séparées par des virgules :

L'espace de couleurs : Je n'ai pas les connaissances en colorimétrie pour expliquer ça, mais c'est apparemment utilisé pour définir quelle formule mathématique est utilisée pour mélanger les couleurs. Il y a plusieurs valeurs disponibles, j'ai vu beaucoup de gens conseiller oklab, mais je ne saurais pas trop expliquer pourquoi. On écrira donc in oklab, pour dire qu'on utilise l'espace de couleurs oklab.

Une première couleur, dans n'importe quel format (rgb, hsl, hexadécimal, etc...), suivie ou non d'un pourcentage

Une deuxième couleur, dans n'importe quel format, suivie ou non d'un pourcentage

En ce qui concerne les pourcentages facultatifs :

Si on ne définit aucun pourcentage, par défaut, ça sera un mélange 50/50 entre les deux couleurs

Si on définit seulement le pourcentage d'une seule des couleurs, par exemple 30%, alors la somme des deux fera automatiquement 100%, donc par exemple 30/70

Si le total fait moins de 100%, le résultat final sera partiellement transparent.

Donc, si nous souhaitons utiliser la couleur #663399, mais juste légèrement transparente, par exemple pour la mettre par-dessus une image, on l'écrira comme ça :

color-mix(in srgb, #663399, transparent 25%)

Et vous pouvez parfaitement utiliser une propriété customisée (variable CSS) à la place des couleurs, ce qui vous facilitera d'autant plus le travail !

  --color-primary: #663399;   --color-primary-light: color-mix(in oklab, var(--color-primary) 60%, white);   --color-primary-black: color-mix(in oklab, var(--color-primary) 60%, black);

(Tumblr gère mal le code, comme d'habitude, donc je rajoute une image)

Pour rappel, les propriétés customisées CSS sont précédées de deux tirets -- et peuvent être utilisées avec var().

On peut faire des tas de choses avec cette fonction color-mix(), et je vous recommande d'aller jeter un coup d'œil aux vidéos de Kevin Powell pour vous faire une idée. Même si l'anglais ne vous parle pas, le visuel devrait vous aider à comprendre à quel point c'est cool !

Pour en savoir plus :

Vidéo de Kevin Powell - A deep dive into CSS color-mix()

Vidéo de Kevin Powell - Using currentColor with color-mix()

Article francophone du MDN sur color-mix()

Article anglophone (et plus complet) du MDN sur color-mix()

[peekaboorpg]

un petit truc a pris forme pour la prochaine màj de pab ✨🥺

[peekaboorpg]

► Ajout de +5 faceclaims.

► répertoire de faceclaims racisés (illustrés)

bonjour à tous.tes ! je sors enfin ce projet qui marque aussi le début de mon blog consacré aux rpgs à avatars illustrés : ce répertoire recense à ce jour 271 personnages racisés issus d'animes/manga, cartoons, films, jeux et autres œuvres illustrées. en espérant que ça vous aidera à trouver des faceclaims adaptés et à créer + de personnages racisés !

n'hésitez pas à passer dans ma askbox pour m'indiquer les personnages que j'aurais oubliés s'il y en a.

happy writing !

[peekaboorpg]

Scripts pour ajouter l'avatar et/ou la couleur de groupe sur les tags de pseudos

A nouveau un petit truc que j'ai fait pour PaB, mais qui vous sera peut-être utile !! C'est pour les mentions de pseudos dans les sujets :

Documentation

JS MENTIONS > https://pastebin.com/u/peekaboorpg/1/34Tg37yR

N.B. > J'ai fait 3 versions :

1 version avec juste l'avatar

1 version avec juste la couleur de groupe

1 version avec les deux

Enjoy ✨

[peekaboorpg]

avatars 400*640 lune, clair obscur: expedition 33

crédits : amy @peekaboorpg artworks : ruanzoe_

[peekaboorpg]

[peekaboorpg]

peachy cafe

[peekaboorpg]

I tried to do my best🥺

[peekaboorpg]

Abandoned and weathered half demolished buildings stand on an empty street, their walls marked by peeling paint and graffiti. A path cuts through rubble and grass, leading to a small hill topped by cypress trees and a building. The sky is dull and heavy with clouds.

[peekaboorpg]

Green light

[peekaboorpg]

Concept art I did for the indie rhythm adventure game Overpass By Michael Bean, back in 2017 or 2018

[peekaboorpg]

4WD on a quiet beach at night.

[peekaboorpg]

30 min landscape studies using photo references! Used photoshop ✨ been loving learning a new workflow and drawing with a cintiq!!

[peekaboorpg]

Red Moon Bar - the only bar in Goldmaple that serves drinks with human blood.

Location design for a story I’m working on :) can you guess what sort of people inhabit this place..

[peekaboorpg]

🎠🎠🎠

... I think I could have pushed the colors a bit more, but I run out of time lol, next time next time

Lemme know what u thinkk <3

[peekaboorpg]

My Paintings so far this year

[peekaboorpg]

Recently bought the DVD for the Animal Crossing movie and decided to screencap my favorite backgrounds from it