Linkedin: Posted on
November 5, 2016 | Revised August 21,2020

CSS3- Web Animations and Modal Windows

CSS has come a long way from being a more consistent way to style webpages. I recently completed a Code school course entitled Adventures in Web Animation. One of the items the course demonstrated was animating the modal window. I enjoy trying out what I have learned and seeing how I can modify the samples. The modal window is a cousin of the “bad boy,” the pop-up window. It is often used for logging into web sites and collecting user data, although use for mobile phones has been discouraged. One way to create them is by using Javascript method. Frameworks like Bootstrap and Foundation include modal windows that are easy to add. But you can also create a modal window with CSS using target attribute and opacity settings. It then occurred to me that modal windows don’t have to be rectangles anymore.

Sample One»

See the Pen CSS Modal Window by Carol Hicks (@C_Hicks) on CodePen.

Sample Two»