Design Great Products Faster
Drop-In Modals
For those using WebKit based browsers (Safari and Chrome), CSS3 effects and properties can help you create fast, simple modals by using transforms, animation, and some subtle design cues.
Note: Demo works best in Safari 4 or Chrome 5. In Firefox, you will not see the animation or
gradients, but you will see the transforms.
This is a simple modal.
It appears based on one line of javascript and can be dismissed using the OK button below. Pretty simple, right?
div#simpleModal {width: 560px;position: absolute; top: 40px; left: 170px;padding: 20px;border: solid 1px #bbb;background: #fff;-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);-webkit-transition: -opacity 0.0s ease-out;}div#simpleModal.shown {opacity: 1.0;z-index: 100;-webkit-transition-duration: 0.25s;}
This is a fancier modal.
Using generated gradients, text-shadows, and box-shadows we can create this drop-down modal. You can dismiss it with the OK button below.
div#fancyModal {display: block; width: 560px;position: absolute; top: -310px; left: 170px;padding: 90px 20px 20px 20px;border: solid 1px #999;background: -webkit-gradient(linear, left top, left bottom, from(rgb(255,255,255)), to(rgb(230,230,230)));-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);-webkit-border-bottom-left-radius: 6px;-webkit-border-bottom-right-radius: 6px;-webkit-transition: -webkit-transform 0.25s ease-out;-webkit-transform: translateY(-570px);}
Simple Modals
The simple modal style we show here is very basic, but effective. The modal itself is set to opacity: 0.0 and when we click the button it changes to opacity: 1.0. A -webkit-transition: opacity 0.25s linear on the shown state causes the fade in effect, so we only need javascript to change the state of the modal — not the animation.
Fancy Modal
This modal is shown and hidden in a similar manner. Instead of using opacity, we've used -webkit-transform: translateY(-570px) to push the modal off the top of the screen. Then a -webkit-transition: -webkit-transform 0.25s ease-in animates the change in translation to pull it down onto the screen.
We use a few properties like transforms, transitions and box shadows. Currently only Safari 4 supports transitions, but Firefox 3.5 supports transforms using the -moz-transform property and also supports -moz-box-shadow.
Copyright ZURB, freely available for distribution under the MIT license.