Monday, February 4, 2013

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 :afterpseudo-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.