web-dev-qa-db-fra.com

Comment obtenir une couleur "perçue" cohérente sur un BG transparent?

Je suis dans un cornichon.

Je dois faire des contrôles de formulaire (boutons, cases à cocher, entrées de texte, etc.) sur un fond noir semi transparent (85% alpha).

Voici à quoi ils ressemblent jusqu'à présent:

Le checkboxes

Remarquez la différence entre les deux premiers et les deux derniers. La différence est que le bord inférieur et droit est juste assez léger pour donner ce look cool. Le problème? Toutes ces bordures sauf une sont de la même couleur.

:(

Parce que c'est sur un fond transparent, les lignes apparaissent à vos yeux comme plus claires ou plus foncées en fonction de la couleur derrière! Donc, ce look d'encart soigné va et vient en fonction de ce qui est en dessous. Je veux toujours que le look soigné soit là, comment puis-je le faire? Y a-t-il des astuces en mode de fusion pour cela?

P.S. J'ai oublié de mentionner que cela finira par s'afficher en Flash, donc je peux m'amuser un peu avec les modes de mélange et tout ça.

Edit: J'ai fait une autre image pour mieux clarifier le problème (par "trop sombre" et "trop clair" je fais toujours référence aux bordures droite et inférieure).

Another Example

6
Jonathan Dumaine

Vous pouvez utiliser un écran ou un mode de fusion de couleur esquivée. Ou, vous pouvez simplement utiliser une couleur blanc pur mais définir la transparence de la zone de la bordure sur le pourcentage que vous souhaitez éclaircir. Ce sera la même chose que d'utiliser un mode de fusion d'écran avec une couleur grise de cette luminosité.

Modifier:
La luminosité perçue est basée sur la couleur BG contre laquelle la couleur FG est en arrière-plan, comme vous l'avez vu dans vos images. En ce moment, ce qui se passe, c'est que les reflets de vos cases à cocher sont rendus dans la même couleur et la même nuance, quel que soit l'arrière-plan. Donc, si l'arrière-plan est clair, cela n'augmente que légèrement ou pas du tout la luminosité, mais si l'arrière-plan est sombre, cela augmente considérablement la luminosité. Cela donne au reflet un aspect non naturel/incohérent.

Le correctif consiste à éclaircir le BG de X% de manière à ce qu'il soit toujours X% plus lumineux que ses pixels adjacents. La luminosité "perçue" sera alors de X%, quel que soit l'arrière-plan (à moins que l'arrière-plan ne soit trop lumineux, il ne pourra pas augmenter la luminosité de X% complet).

2
Lèse majesté