[CSS] The Fancy Modal
The Fancy Modal
That modal is okay — it gets the job done and once you know it, the pieces can be put together in less than 5 minutes. We wanted to do a little more for Notable, so we cooked up a fancier style using a few other CSS tricks like -webkit-gradient and -webkit-transform.
Modal-2 in Stronger, Better, Faster Design with CSS3
This modal is a little flashier and more akin to a desktop app in terms of interaction: it slides down from the top and gets a little more chroming than the simple modal. We accomplish this through a couple of cool tricks.
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);
-moz-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);
-moz-border-radius: 0 0 6px 6px;
-moz-transform: translateY(-570px);
}
via Stronger, Better, Faster Design with CSS3 – Smashing Magazine.