Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question

closed as off topic by 3nafish, rk., Matt Obee, Charles Wesley, Koen Lageveen May 21 '13 at 11:51

Questions on User Experience Stack Exchange are expected to relate to user experience within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

    
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 '10 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 '10 at 22:09
    
This seems to me that you are looking for some sort of technical solution. Is that correct? –  Charles Boyung Nov 16 '10 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 '10 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 '10 at 19:16

1 Answer 1

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%).

share|improve this answer
    
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 '10 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 '10 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 '10 at 22:15
    
@Jonathan: What blending mode are you using? –  Lèse majesté Nov 16 '10 at 2:47
    
Tried it with both normal and screen (which should both be the same with 0x4cffffff) –  Jonathan Dumaine Dec 3 '10 at 0:34

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