Alacrify Ltd

Having Fun and Being Creative - CSS3 and Google Fonts

Published on: 4th July 2011
By Alacrify



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.

CSS3 and Google Fonts Examples

 

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.

 

New Website For Osmington Village Hall

We’re pleased to announce that we have just launched a NEW website for Osmington Village Hall. Osmington Village Hall came to us needing a brand new website as the old one had been taken offline. We built the website from the ground up taking a fresh new approach alongside Osmington Village Hall.

Relaunch Of Weymouth And Portland Info Website

We’re excited to announce that we have relaunched the Weymouth and Portland Information website. The website is an internal project of ours and one that’s needed attention for a while. The main aim of the redesign was to make the website responsive and easier for users to navigate around.

New Website For R-em Therapies

We have just launched a new website for Emma at R-EM Therapies. R-EM Therapies is a new client of Alacrify’s that we’ve thoroughly enjoyed working with. R-EM came to us needing a new website as the old site was starting to show its age. The old site also wasn’t responsive and was also unsecure which negatively impacted the site's search engine rankings as well as being hard for users to access on their mobiles and tablets.

New Website For Ecs Special Projects

We have just launched a new website for ECS Special Projects. This is another website of ours that we originally built many years ago. The old site stood the test of time and still performed very well in Google searches, but the time had come for the look and feel to be updated in line with more contemporary design approaches.