![]() ![]() Now lets recreate the effect using CSS linear gradients. See the Pen xGYJMN by Dwayne Charrington ( on CodePen. You can experiment around with the different blending modes to achieve different effects by reading up on background blend modes here. 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. We will be using multiple background images to achieve our effect without multiple elements. 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 can imagine what happend some time later I tied it on the app and even here: overlay was shown too small.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. A few previews later now the picture was shown way to big and left!!! I made it smaller AGAIN XD and everything was fine again. So I did the work all over again and made it bigger, put it on the right place again… everything fine. The overlay appeared to small and right sided. Closed the site and opened it again many times but it was still wrong. Without any reason the next preview showed the overlay in a wrong size and position o.o !?!?! Than I continued working (didn’t touch the part anymore) und many times afer the preview it was still as it was supposed to be. Hey guys, would you please help me with an overlay?Ī positioned it and everything looked perfect in the preview. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |