You’re probably aware of Facebook’s pride image overlay effect which allows you to add a gay pride flag overlay on your Facebook profile image. Today we are going to be recreating this incredibly simple effect, three different ways. First we will do it the Facebook way, followed by a couple of other approaches.
To demonstrate the effect I have created three Codepen’s so you can see the effect in action and fittingly used a picture of Donald Trump and his son to demonstrate the pride effect.
1. The Facebook way using CSS filters and opacity
The way Facebook approaches the effect (during the creation process) is through the clever use of opacity and if you’re using a supported browser, CSS filter effects. As you would expect, each bar is merely a DIV with a height of 100% divided by the total number of bars (in this case it is six). The live preview you are seeing is not necessarily what the final effect will look like because CSS is being used to give you an instant preview, the final effect looks much nicer as it is done server-side via an image processing library.
In unsupported browsers, Facebook simply just don’t use any CSS filter effect, relying on the opacity on the image container to dull it down enough so the rainbow bars shine through. This means anyone using an unsupported browser will not see the true effect (at least not during the creation process) until the final version is saved and the processed image is returned.
See the Pen mJXjGV by Dwayne Charrington (@DigitalSea) on CodePen.
2. CSS blend modes
Unknown to some, the CSS specification has support for blend modes like; multiply, hard-light, soft-light and so on. The kind of effects you are probably aware of in Photoshop and perhaps the kind of effects your overzealous designers have asked you to painstakingly implement at some point or another.
Because the blend modes require a background image at present, we will be using an image that Wikipedia has of the gay pride flag which we will overlay on-top of our image and use the blend effect. We will be using multiple background images to achieve our effect without multiple elements.
The end result here isn’t as nice as the other two options, I will admit I didn’t spend a lot of time playing around with different effect combinations. You can experiment around with the different blending modes to achieve different effects by reading up on background blend modes here.
See the Pen xGYJMN by Dwayne Charrington (@DigitalSea) on CodePen.
3. Vertical stacked CSS rainbow gradient
Now lets recreate the effect using CSS linear gradients. Through some trickery, we can actually have harsh colour stops for each coloured bar. It takes a little extra messing around (as you can see looking at the CSS) but the effect looks pretty damn good and is the most cross-browser friendly compared to the other two.
In the below Codepen example we have the gradient example, and also different combinations using opacity, background blend modes and CSS filters to show how different effects can be used together.
See the Pen LVQJYE by Dwayne Charrington (@DigitalSea) on CodePen.
Conclusion
CSS is awesome and the gay pride image overlay is a simple and nice gesture towards the community. Hopefully you’ve learned something or perhaps have some ideas on how you can apply the above effects to other aspects of your designs and websites.
