I’ve been seeing a lot of dialogue boxes recently, so I thought I’d take a shot at it. I quite like the ‘zoom in’ popup dialogues, which appear to start from a single point and zoom forward. We’ll be attempting to make that in this tutorial with just CSS.
To accomplish this task, we’re going to be using 3D Transforms. In general I wouldn’t suggest using these, but they worked quite nicely for this demo. To create the ‘clickable’ effect, we will be utilising form method and the pseudo class :checked
. IE8 and below does not support the :checked
property, so you might want to utilize a library like Selectivizr.
Writing the HTML
We’re going to be using a checkbox input to accomplish the clickable effect, so we need to enclose everything in a form. This is perhaps unsemantic, but since this is CSS only, it’s the avenue I’ve decided to choose.
<form action="#" method="get"> <div class="container"> <label for="activate">Click me to see!</label> <input type="checkbox" name="activate" id="activate" /> <div class="type-1">Hey! I'm a dialogue box</div> </div> </form>
Let me summarize how this is going to work if you didn’t read the form method article. Basically, when the user clicks the label text, it will check the checkbox. We will then use a sibling selector to display the div
when the checkbox is checked. We’re also going to be using transitions to accomplish the zoom out effect.
It’s probably worth mentioning at this point that support for the zoom out effect is not absolute, since transitions are not fully supported by all browsers. However, in those that don’t support transitions but support :checked
, either naturally or by using Selectivizr, the dialogue box will just appear. This is acceptable, since usability is not really affected.
Writing the CSS
As I mentioned before, I dislike using 3D Transforms. The markup required because of vendor prefixes is unacceptable large. However, to accomplish this effect, I decided this was the easiest way to do things. Simply put, we’re going to set opacity to zero, and scale the dialogue box down to 0.1 of its actual size. Then when the user clicks (or checks) the label, the dialogue will be scaled back up, opacity increased to one, all over a smooth transition. The initial class, for those reasons, is quite long.
.container .type-1 { -moz-perspective: 1000; -webkit-perspective: 1000; -ms-perspective: 1000; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; width: 300px; height: 25px; background: #343434; border: 7px solid #fff; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5), 0px 0px 20px rgba(0,0,0,0.2); border-radius: 10px; opacity: 0; padding: 10px; color: #fff; font-weight: bold; font-size: 22px; font-family: Arial, sans-serif; position: absolute; left: -10px; top: -80px; /* Always on top */ z-index: 9999999; } /* A little triangle, to give context */ .container .type-1:after { width: 0; height: 0; content: ""; color: #fff; border: 14px solid; border-color: white transparent transparent transparent; position: absolute; /* You may need to change the positioning if you restyle the dialogue */ bottom: -33px; left: 50%; }
After that it was just a caseof hiding the input, and changing the scale/opacity on click of the label/checkbox.
.container input { display: none; } .container input:checked + .type-1 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); }
And finally, just some positioning and text styling.
.container { width: 320px; margin: 0px auto; position: relative; top: 100px; text-decoration: none; } .container label { position: relative; border-bottom: 2px solid #000; margin: 0px auto; color: #000; cursor: pointer; font: 40px 'Istok Web', sans-serif; opacity: 0.7; }
And that’s it folks! Check out the demo to see another example or download the files if you want to mess around yourself.
Comments
great post,
I like it, thankyou
happy blogging
Awesome Effect. Might use in one of my projects :). Thanks :D
wow! this is cool.. :)
Ohh, CSS3 is real powerful and wonderful technology, but we all know that IE7-8 and sometimes IE9 can’t give us an opportunity to use a beautiful CSS3 solution like this example, and many other.
Thanx for example!
Hi,
Maybe a “transform-origin: 0% 50%;” for the second popup?
The demo doesn’t appear to work on the iPhone…
It’s very useful stuff, thanks for the great post & source. Keep it up.
Ohh! its Nice code. Thanks for sharing. :D
“In general I wouldn’t suggest using these [3D Transforms]” – What reasons do you have?
“a checkbox input to accomplish the clickable effect, so we need to enclose everything in a form.” – No, that’s not the case. No data to submit, no form. I’ve just left a comment at http://www.inserthtml.com/2012/04/css-click-states/#comment-1043
“This is perhaps unsemantic” – What’s really unsemantic (read: bad) is a class name like “type-1”.
“The markup required because of vendor prefixes is unacceptable large” – You meant the CSS code, not the markup (HTML code).
I can definitely see using this in one of my future projects. Thanks for sharing.
so nice, I like that :)