6

I'm in a pickle.

I have to make form controls (buttons, checkboxes, text inputs, etc.) on a semi transparent black background (85% alpha).

Here's what they look like so far:

Le checkboxes

Notice the difference between the top two and the bottom two. The difference is the bottom and right border is just light enough to give that cool inset look. The problem? All but one of those borders is the same color.

:(

Because it's on a transparent background, the lines appear to your eye as either lighter or darker based on the color behind it! So, that neat inset look will come and go based on what's under it. I always want the neat inset look to be there, how can I do it? Are there any blend mode tricks for this?

P.S. I forgot to mention that this will eventually get to be displayed in Flash, so I get to have a little fun with blend modes and stuff.

Edit: I made another image to better clarify the issue (by 'too dark' and 'too bright' I am still referring to the right and bottom borders).

Another Example

Improve this question
5
  • This reminds me of what it's like to paint a room in a pale colour when the previous colour is dark. The trick is to first paint it with white (or a very pale colour) and /then/ use the colour you want. You might find you need to add a div behind what you're showing, and set that to a non-transparent, consistent, colour.
    – Bernhard Hofmann
    Nov 12, 2010 at 11:35
  • Haha thanks for the real-world example. The problem is putting a layer of white paint would lose my cool transparent look.
    – Jonathan Dumaine
    Nov 15, 2010 at 22:09
  • This seems to me that you are looking for some sort of technical solution. Is that correct?
    – Charles Boyung
    Nov 16, 2010 at 15:56
  • @Charles Technical solution, magic solution. Something like that. If your technical solution is minimally cpu intensive in Flash than I'm all for it.
    – Jonathan Dumaine
    Nov 22, 2010 at 22:53
  • 2
    if you're looking for a technical solution, you should probably try StackOverflow, not here. This isn't really the place for technical questions.
    – Charles Boyung
    Nov 29, 2010 at 19:16

1 Answer 1

Reset to default
2

You can either use a screen or color dodge blending mode. Or, you could just use a pure white color but set the border area's transparency to to the percentage you want it to lighten. This will be the same as using a screen blending mode with a grey color of that luminosity.

Edit:
Perceived luminosity is based on the BG color the FG color is backdropped against—as you've seen in your images. Right now what is happening is that your checkbox highlights are rendered in the same color and shade no matter what the background is. So if the background is bright, it's only increasing the luminosity a little or none at all, but if the background is dark, then it's increasing the luminosity by a lot. This gives the highlight an unnatural/inconsistent look.

The fix is to make the highlights brighten the BG by X%, so that it will always be X% brighter than its adjacent pixels. The "perceived" luminosity will then be X%, regardless of the background (unless the background is too bright, then it won't be able to increase the brightness by the full X%).

Improve this answer
6
  • See, that's the problem. The "percentage I want to lighten it" varies based off the color behind it--which I can't control. So what I'm asking is if there's a way to get a fixed perceived luminosity on varying background colors with some blend mode hackery.
    – Jonathan Dumaine
    Nov 11, 2010 at 19:13
  • @Jonathan: Are you sure that's what you really want? Because that would look really weird IMO.
    – Lèse majesté
    Nov 14, 2010 at 0:18
  • Your edit is interesting. I did what you said in an example, but the results are the same--differing luminosities instead of an X% luminosity (check my edit).
    – Jonathan Dumaine
    Nov 15, 2010 at 22:15
  • @Jonathan: What blending mode are you using?
    – Lèse majesté
    Nov 16, 2010 at 2:47
  • Tried it with both normal and screen (which should both be the same with 0x4cffffff)
    – Jonathan Dumaine
    Dec 3, 2010 at 0:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.