CSS

Recently I've been messing with the cool new features of CSS3 to a client project and I was inspired to see what sort of interface features could be done with it.

The nice things, like drop shadows, gradient background and curved corners, make things look great without having to reach to the image editor, but are hardly revolutionary. Any design that is well planned could already make use of these things and they've been around on the web for ages, though CSS3 certainly makes them far easier to implement.

What really got my attention were transitions.

I had decided to create the "glass" effect popularised by OSX and Vista and while following various guides and creating some graphics in the GNU Image Manipulation Package I spotted a pattern and decided to come up with a way to create the now popular glass effect in CSS, without using any graphics at all.

Using the gradient fill in GIMP and applying those colours to the CSS used to create the Nifty Corners effect, I managed to create some pure CSS Glass buttons. Hopefully I can explain how I did this below and show you how you can create the same effect for your own projects.