4

There is a file manager in my application. Hovering the files shows a 3-dot icon at the top-right corner. The problem is, that it is difficult to make it visible enough on different backgrounds, since the icons and thumbnails can be of different color.

I came up with adding dark background for 3-dots and making 3-dots white. So now it's visible on any background, but I honestly don't really like the solution.

What are other ways to make 3-dot icon visible on different backgrounds?

enter image description here

Improve this question
3
  • I would likely say to create a 3 dots image in a defined color with 50% opacity or something like that, but it's not easy to find a solution...Personally I like the one you provided at the moment, and I think it's a good solution
    – Pierpaolo Bagherini
    Commented Oct 30, 2016 at 22:19
  • Your solution looks fine to me. Maybe try out the design with the ellipsis in black and the background in white. A dark border around the square, or a subtle drop shadow would help it standout more on light backgrounds
    – iamcastelli
    Commented Oct 31, 2016 at 4:31
  • Sadly one one can be accepted
    – joojaa
    Commented Oct 31, 2016 at 20:48

3 Answers 3

Reset to default
5

Maybe if you add a border / stroke might work. enter image description here

Improve this answer
1
  • Agreed - it's what we do on food packaging when we cannot control the final background (multiple products, different images, retailer input) e.g. white dots black key line - on a light backdrop the key line will save it and on a dark backdrop key line will disappear and the white dots will work.
    – Applefanboy
    Commented Nov 4, 2016 at 12:51
2

How about inverting the underlying image by the shape? This would have the advantage of working with many colors

enter image description here

Or perhaps for some very complicated imagery you could inverse the blurred image, inverse average and so on.:

enter image description here

Improve this answer
3
  • Do you have a method for creating that 'inverse + average' example?
    – Jory L
    Commented Oct 31, 2016 at 15:55
  • Sure what platform do you use @JoryO ?
    – joojaa
    Commented Oct 31, 2016 at 16:22
  • @joojaa 'Inverse+Blur' method is really interesting. I'd like to play around with it. How can it be implemented?
    – rpavl
    Commented Oct 31, 2016 at 20:56
0

I solved the problem this way:

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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