CSS modal dialogs tutorial

A tutorial about creating set of CSS modal dialogs, with nice effects (transitions and animations).

Creating great CSS modal dialogs

There are infinite possibilities for transitioning the appearance of a dialog box and we wanted to provide some ideas of how to show dialog boxes and provide some inspiration.

The idea is to have a trigger button (or any element) which will make a modal window appear on click using a simple transition (or animation).

Modern browsers only! This only works as intended in browsers that support the respective CSS properties.

CSS modal dialogs
CSS modal dialogs

Effects included:

– Slide in
– Fade in & Scale
– Newspaper
– Fall
– Side fall
– Sticky up
– 3D Flip, 3D Sign and 3D Rotation
– Super scaled
– Blur
– Slip from top

and more.

Demo:

http://tympanus.net/Development/ModalWindowEffects

GitHub:

https://github.com/codrops/ModalWindowEffects

Full tutorial:

http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects

Enjoy!

Share:Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn2Pin on Pinterest1