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

  • 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 Oct 30 '16 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 Oct 31 '16 at 4:31
  • Sadly one one can be accepted – joojaa Oct 31 '16 at 20:48
4

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

  • 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 Nov 4 '16 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

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

I solved the problem this way:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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