Monday, February 4, 2013

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!

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!