Subscribe by Email

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.

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.