Having Fun and Being Creative - CSS3 and Google Fonts

4th July 2011

Having Fun and Being Creative - CSS3 and Google Fonts

Over the past couple of weeks we've been putting a bit of CSS3 sparkle into some of our new website designs.

In particular we've been playing with shadows and rounded box corners to provide pages with some more texture and depth.

Cute CSS3 Effects

Some of the cutest effects in CSS3 would take hours to acheive through using conventional images and text. Glowing boxes, boxes that appear embossed, or float above the rest of the page content, or boxes that appear to be carved into the page surface are now just a couple of lines of code away.

Similarly the text shadow features allow for indented and raised text effects to be created without lots of images.

This little page element that we've dropped into the news/blog section of this website mixes all three approaches; text-shadow, inset box shadow and standard box shadows.

Hopefully the effect is subtle! But gives the page texture and brightness where otherwise the fonts would be flat and maybe a little static...

the code for the main box style is

-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.20), rgba(0,0,0,0.12) 0px 0px 10px inset;   

-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.20), rgba(0,0,0,0.12) 0px 0px 10px inset;

the code for the indented text effect is

text-shadow: #fff 1px 1px 0px;

Googe Fonts

We've also used one of Google's fonts on the page too. Instead of a traditional Arial (which looked fine anyway) we opted for a replacement font called Arimo. Again it gives the page a more "designed" feel rather than a standard "websafe" character.

These replacement fonts are fab. From only 5 or 6 a few months ago there are 185 as of today, of all types, from handwritten to monotype and all stops in between. Not all of them scale very well, and so can only be used at relatively large sizes (for headings for example), but there are many lovely typefaces to choose from.

You can view the full set (and get the code to add them to your site) here: http://www.google.com/webfonts/v2#HomePlace:home

ps. of course it goes without saying that not all browsers currently support these approaches, but with Firefox 4+, Google Chrome 12 and IE9 the effects work fine.