You can do that, however you have to weigh the pros and cons of doing it as aesthetically pleasing as displayed on the site you’ve linked to.
You could use any of the following methods to accomplish the semi-transparent background with CSS:
- through the opacity property
- by using a semi-transparent PNG image
- by using rgba (CSS3)
Using a semi-transparent image is certainly easy, however it’s not flexible as you lose lots of control on how to manipulate its appearance. Furthermore, you need to use propietary filters or some scripting to make it work in IE6.
Using the [FONT=Courier New]RGBA[/FONT] colour model is pretty darn awesome.
Take this example:
/* you could also write #000 or black */
/* last value indicates transparency level */
All browsers will accept the first declaration. Modern browsers will take the second one. That’s the beauty of the cascade.
The drawback is that not too many browsers support it as it’s CSS3. Those who don’t will have the full background colour value.
The third way to go about it is by using opacity,also a CSS3 property, and Opera has a great how-to on it.
Some more reading on the topic:
Next you’ll have to decide whether to use an image replacement technique for your navigation text. There are no truly flexible means to do this. You can use some dynamic techniques with tools such as Cufon (JS) or [URL=“http://novemberborn.net/sifr3”]sIFR (JS & Flash), but you could also use static images and apply one of the bazillion [URL=“http://www.hongkiat.com/blog/dynamic-image-replacement-practical-techniques-and-tools/”]dynamic solutions and [URL=“http://css-tricks.com/css-image-replacement/”]static methods out there. Even Paul has one [URL=“http://www.pmob.co.uk/temp/navimagereplace.htm”]here.
The other way to go about it is using the @font-face property. It’s what I’d recommend because it’s a CSS method that doesn’t require scripting of any kind. However, you need to make sure that you use a “legal” font. You can get some nice ones here, [URL=“http://www.theleagueofmoveabletype.com/”]here (my favourite) or [URL=“http://www.fontspring.com/”]here. [URL=“http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master”]Jonathan Snook has a nice write-up on how to properly apply this technique. Tim Brown’s got a [URL=“http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/”]great article on it, too.
And finally, you could use one of those newer font services such as [URL=“http://typekit.com/”]Typekit or [URL=“http://fontdeck.com/”]Fontdeck. This method can be a resource-hog, so I’d read up on the pros and cons for using these types of services. [URL=“http://www.zeldman.com/2010/03/22/my-lovehate-affair-with-typekit/”]for and against using this approach.
Some cool animation effects with jQuery: