Making lists of logo images less awful

Author: Daniel Alcorn

One of the most common design challenges I come across as a designer/developer is the Client/Supporter/Partner list of logos.

These innocent lists of logos are perceived to be a simple addition to a design layout but often present a number of headaches

Logo Shapes

Logos, by their very nature, tend to be a unique visual representation of the organisation they are portraying; some are tall and thin, others short and fat, some are text heavy and illegible when resized. Because of this, they can be pesky little blighters when trying to usher them into equal width and height rows.

Politics

As most people who work in any size organisation can testify, politics will come into play when dealing with a list of logos, Size, order, legibility, additional descriptions, accompanying links to websites etc. Any one of these things can be requested, and all of them will throw up additional design considerations that will affect the design. They also tend to be extremely difficult to output in an automatically generated list.

Image Quality

Another consideration when dealing with lists of logos is the quality of the imagery. It’s difficult to design a layout which uses sophisticated subtle greys across transparent svg’s if, when received, they are multicoloured bitmaps which range from 80 to 8000 pixels.

All of these together make developing an automated system that displays logos perfectly every time, across all devices and browsers, a fairly elusive outcome.

Enter mix-blend-mode

mix-blend-mode: multiply;

Recently we’ve discovered a css trick which reduces one of the headaches which so often rears it’s head when creating these lists.

Often we need to work with logos which have white backgrounds. If these are displayed on a background which isn’t white, it means we need to request another version without the white, or remove the white ourselves. By using mix-blend-mode we can quickly remove the white backgrounds without any manipulation to the image.

So from this:

Screen Shot 2016-03-01 at 16.19.39

To this:

Screen Shot 2016-03-01 at 16.19.20

 

The Benefits

  • It’s a neat little trick which only requires one line of css
  • It claws back any time taken to manipulate and remove background colours from images
  • It means the background colours can be easily adjusted behind the logos without manipulating the images themselves

 

The Considerations

Although this greatly speeds up creating lists such as these, there are a few considerations which will require some extra tweaking:

  • It currently works with the most popular browsers (excluding all versions of IE). However, the fallback option will simply be the image with the white background included
  • As this is a css property, it would apply to all images within an element. If we need to target individual images to use a different blend mode (eg, remove black instead of white from a background), then we’d need to add specific classes to target the relevant images.

 

Other Uses

There are a number of other values we can use with mix-blend-mode which pretty much replicate the options in Adobe Creative Suite. This opens up a lot of options for colour overlays across designs

screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. And also normal which reset it.

So, to remove a black background we can use

mix-blend-mode: screen;

And that’s it. I was fairly chuffed when I found this snippet so hope it helps you as well.

 

Much credit must go to Chris Coyier and the always excellent write ups on CSS Tricks