Hi! Let's talk today about CSS3 features, such as visibility, opacity and filter. We’ll use them in order to add a popup window to our game. I'm Anatol and you are watching the Good Parts of the FrontEnd development.
As you’ve already seen in the previous episodes, only numeric properties can be animated. Therefore, CSS property "visibility" has only two stages: visible & hidden. In order to make a fancy popup let's play with the opacity and blur properties. "Blur" is a part of filter property. The filter property provides for effects like color shifting or inverting on an element’s rendering before the element is displayed. Changing the filter property you can affect: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity and others. To apply the filter all you need is: to list them and specify their numeric value. The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. Using nothing more than these three features we can create really fancy popups.
Let's dive in the code. https://codepen.io/e1r0nd/pen/bWQePN
So, with a combination of different CSS properties you can implement a plenty of effects. Everything can be done automagicaly! Easy, isn't' it?
My code is available on GitHub https://github.com/e1r0nd/Find-a-Pair
Documentation is available in the Internet https://developer.mozilla.org/en-US/docs/Web/CSS
Follow the links if you’re eager to get more.
If you like this video give it "thumbs up". Thanks for watching and stay curious.
Subscribe to the channel: https://www.youtube.com/c/AnatolMerezhanyi?sub_confirmation=1
Watch other episodes: https://www.youtube.com/playlist?list=PLEZfD_aygfgK_ZXni36THMSassXtqDbeC
Follow on Twitter: https://twitter.com/e1r0nd_crg
http://www.looperman.com Mendum by Jakebur4, Belles Bells by Loupin, Video Game Forest by AcidParadox
http://www.orangefreesounds.com Arcade Town, Sci-Fi Sound, Police Radio Sound, Mechanical Button Sounds, Ding, Small Bell by Alexander
https://soundcloud.com/eric-skiff/come-and-find-me Come and Find Me by Eric Skiff