Applied Magic - a CSS glass container

A beautiful CSS flask

The development of The Lab for the Mozilla Game On competition is proceeding. Probably I won't be able to have a complete and polished game ready before the deadline, but at least it will be a decent and good-looking prototype!

In the game there is this element that you see to the right - a glass container that should resemble a test tube or a flask.

Believe it or not, there is no image there, it's all done with CSS.

And it's a single tag!

To do it, I'm taking advantage of the :before and :after pseudo-elements.

Let me show you the different components:

The headless flask

The top of the flask

The tag behind the flask

The flask is made with the following effects:

• The glass effect is created using an inset box-shadow
• The rounded border at the bottom left and right angles is done by setting the border-radius property
• The shadow is a dark gray border-bottom
• The top of the flask seems to grow larger because the border left and right are set, but transparent (and also a non-negative border-top needs to be set)
• To finish, box-sizing: border-box keeps the margins to all the sides of the parent container

The top of the flask is the :before pseudo element. Most of the magic is already explained in the previous list: basically the top of the flask reproduces the same glass effect with the inset box-shadow and a border-radius to the opposite corners to give a nice rounded look to the object.

The tag is the :after pseudo-element. It's supposed to stay behind the flask, this it the reason why it has reduced opacity and the turned text, created through a CSS3 rotation applied to the transform property.

That's it!