CSS Modal Box without Javascript or Images
Using CSS3 techniques a modal box can be created without JavaScript or images. With a bit of animation, transition and transform, it can be made that little bit more special. Here we have CSS Modal by Paul Hayes.
The modal animation is hardware accelerated on Safari and iOS, which gives notable performance improvements. The animations are available in Chrome but will feel more sluggish. Firefox will see the opacity transition but not the bounce or minimise animation as it doesn’t yet support @keyframe.
However, it won’t work in IE8 and below, there’s no pointer-event support and opacity is poorly implemented. IE9 supports :target but no pointer-events. Some IE specific styles could easily switch the opacity toggle to a display or visibility one.
Requirements: Chrome or Firefox Browser
Demo: http://www.paulrhayes.com/experiments/modal/
License: License Free
Related Posts :
Two years ago, we have built a Javascript Progress Bar. Now, would you like a Pure CSS Progress ...
Pure CSS GUI icons is an experiment that uses pseudo-elements to create 84 simple GUI icons ...
// Galen Gidman has made a set of 30 CSS3 Progress Bars – each it’s own color. ...
Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaS ...
Having been inspired to get ‘Hardboiled’, Tom Kenny has started playing around with a few c ...
