Since the last post on CSS was popular here is another simple CSS trick that I found useful in the past.
Let’s say we want to find the difference between these two images:
You can do this by simply inverting the colors and then stacking them together at 50% opacity. This can be achieved with a single CSS filter:
-webkit-filter: invert(100%) opacity(50%);
What you should get back is a gray image except for places where the two images differ. This works because inverting will flip the color (
255 - c) and opacity will blend the two colors equally (
c1 + c2 / 2). So the resulting color is
((255 - c1) + c2) / 2 which is just
rgb(127.5, 127.5, 127.5) whenever the overlapping pixel colors
c2 are the same.
Read rest of this post…