Hatching the pigeon: Journeys in CSS3 #1
When building our new e-mail marketing tool, Electric Pigeon, I wanted to test myself by seeing if I could make a visually pleasing design built using the smallest number of images. Using a combination of the CSS3 box-shadow, text-shadow, background gradients, rgba colours and border-radius properties, along with an embedded font from Google Web Fonts, I'm pretty happy with the result.
That's not to say I didn't encounter some 'interesting' challenges, some of which I hope to detail in this (or series of) blog posts. Hopefully some of the things here will help some of you who are thinking about dipping your toes into the world of CSS3 but aren't that confident with it yet.
Web fonts, @font-face and Google to the rescue
Being able to break free of Arial, Verdana et al. is a beautiful thing, and with the support for @font-face now being almost universal, (even in IE6!) everyone is jumping on the custom font bandwagon.
It's not as simple as just chucking a .ttf from your fonts folder though, different browsers need different font files, and there are also licensing restrictions to be aware of. So if you're new to this game, I would suggest using the excellent Google Web Fonts service. All you have to do is pick your font, decide whether or not you want additional variations/weights, and stick a <link> tag in the head of your HTML. Then you just reference the font name in your normal font-family CSS tag and et voila, custom fonts on your website! The fonts are all hosted on the Google CDN so they'll load nice and fast wherever your visitors are coming from. For more choice in typefaces, I suggest you have a look at TypeKit or Fontdeck, who both offer a paid for alternative.
For some more information there is a good starter article from June 2010 at A List Apart.
On Electric Pigeon, we used the lovely Josefin Sans typeface, so in the <head> section the code is:
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
and in the CSS:
h1, h2, h3 { font-family: 'Josefin Sans Std Light','Century Gothic',Helvetica,sans-serif; }
Easy!
Something you should be aware of is that web fonts render slightly differently depending on your operating system, so make sure you test thoroughly across the browsers/OSs. For Electric Pigeon, we had to include some custom CSS for Windows based computers to handle the increased rendered width of the font. There are various ways to do this, but we settled on using this simple PHP in the header:
<?php if (stripos($_SERVER['HTTP_USER_AGENT'], 'win') !== FALSE) { ?>
<link rel='stylesheet' href='site_css/windows.css' type='text/css' media='all' />
<?php } ?>
Radialise, Gradientise and Shadowise your buttons
Ok so perhaps I just made up 3 new words, but you get the idea. With CSS3 you can create some lovely looking buttons using nothing but CSS.
This is now time to talk about the elephant in the room, Internet Explorer. At Electric Putty, we work on a concept of 'graceful degradation', and most importantly, we say no to this question: http://dowebsitesneedtolookexactlythesameineverybrowser.com/. Below is what the our green buttons look like on IE8 vs Firefox.
As you can see, IE8 has no drop shadow, no rounded corners and a linear gradient compared to Firefox. While this may be a dealbreaker for some, I believe that it's still a green button, it still serves it's purpose, and that, as Lee Munroe says in this article, Internet Explorer Users Don't Care About Rounded Corners. Time to get less precious about design 'flair' and start thinking about these things as a bonus for people who actually use a proper browser! Anyway, onto making the button.
The CSS
.greenButton {
border: 2px solid #719425;
padding: 17px 30px;
display: inline-block;
font-size: 1.8em;
font-weight: normal;
font-family: 'Century Gothic', Helvetica, sans-serif;
color: #FFF;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
cursor: pointer;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
background: #90BB38;
background: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.49, rgb(139,182,54)),
color-stop(0.49, rgb(155,200,59)));
background: -moz-linear-gradient(center bottom,
rgb(139,182,54) 49%,
rgb(155,200,59) 49%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9BC93B', endColorstr='#8CB636',GradientType=0 );
}
.greenButton:hover {
text-decoration: none;
text-shadow: 0 0 5px rgba(255,255,255,0.9);
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
filter: none;
}
The HTML
<a href="pricing.php" class="greenButton">Find out more</a>
Lots of code there, most of you will be familiar with, so let's concentrate on the CSS3 sections only.
Border-radius
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
Unfortunately, you have to include 3 rules to do 1 thing with a lot of CSS3 declarations. In the future, as the browsers standardise their rules to the CSS3 spec, this won't be an issue, but at the moment, you need to cover your bases. -moz-border-radius is for Firefox (note: this is only for Firefox 3, Firefox 4 uses border-radius), -webkit-border-radius is for older versions of Chrome and Safari so arguably can be dropped depending on how brave you feel, and then of course, border-radius is the official syntax. All the usual CSS shorthand is possible with this property, i.e. 2px 3px 5px 6px will apply in this order: top left, top right, bottom right and bottom left. 5px 10px would give you 5px borders on the top, 10px borders on the bottom and so on.
Box-shadow
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
Again, welcome to the world of triple declarations. I'm only using 4 of the possible 5 (6 if you count inset) values for these shadows, and I'm also using a rgba value for the shadow colour. The values are as follows, horizontal offset (1px to the right), vertical offset (1px from the bottom), shadow blur (4px) and finally the colour (black (r:0 g:0 b:0), at 20% (0.2) opacity).
Background gradient
background: #90BB38;
background: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.49, rgb(139,182,54)),
color-stop(0.49, rgb(155,200,59)));
background: -moz-linear-gradient(center bottom,
rgb(139,182,54) 49%,
rgb(155,200,59) 49%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9BC93B', endColorstr='#8CB636',GradientType=0 );
This is where I could go into great detail about the various values and browser specific properties and nuances of CSS3 gradients (and the IE filters which can also create gradients), but I'm not going to that, I'm going to point you to where I go when I want a linear gradient: ColorZilla's Ultimate CSS Gradient Generator tool. Looks and acts like Photoshop, gives you fallback and an IE preview, it's great and gets the job done quick smart. There are many tools like this but this is my favourite of the ones I've tried. If you want to read more about the gradient property, CSS3Files has some great explanations for it, and many of the other CSS3 properties.
Hover state
text-shadow: 0 0 5px rgba(255,255,255,0.9);
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
filter: none;
For the hover, I've removed the gradient, (note: filter: none; for IE) and added a glow to the text using text-shadow. Text-shadow has virtually the same syntax as box-shadow, and here I've set it's position to 0 0 with a 5px blur, and the colour being white with 90% opacity.
What next?
The next article in this series will cover some more box-shadow fun, radial gradients and a few hiccups we encountered on the way (Thanks IE7!). Hope you found this article interesting. If you have any thoughts I'd love to hear from you.
no comments