![]() 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 |