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.īecause 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. Unknown to some, the CSS specification has support for blend modes like multiply, hard-light, soft-light and so on. See the Pen mJXjGV by Dwayne Charrington ( on CodePen. 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. 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. 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. 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 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. The Facebook way using CSS filters and opacity 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. First we will do it the Facebook way, followed by a couple of other approaches. Today we are going to be recreating this incredibly simple effect, three different ways. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |