Firefox 3.5: Shadow Effects

With the official arrival of Firefox 3.5 yesterday (I’ve been using the beta for awhile), one of the features I’m most excited about is the ability to add shadow effects to webpage elements using CSS. If you’ve installed FF 3.5, you can see the “box-shadow” effect in action on the header, top menubar, and footer of this blog. To view the tutorial I used to accomplish this, visit this post by Frederic Wenzel on hacks.mozilla.org.

Firefox 3.5 also adds the ability to shadow text with CSS. Here are the details on text shadowing from the Mozilla developer center. I tried this with the blog title in the header of this blog and it works great.

To give shadowing effects a try on/in the header a blogger blog (it’s really not that hard), go to Customize>Edit HTML. **Save a copy of your template first** so that you can restore your old settings if any problems arise (**this is always a good idea before tweaking your template**). Search your template (use CTRL-F in Firefox ) for the following line of code: #header-wrapper {. It should be part of a chunk of code that will look something like this:

#header-wrapper {
background:$titleBgColor;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
text-shadow: 1px 2px 5px #000;
-moz-box-shadow: 1px 1px 10px #000;
-webkit-box-shadow: 1px 1px 10px #000;
box-shadow: 1px 1px 10px #000;
}

The elements in red are the lines you need to add to get the shadowing effect on your header text (first line) and box element (lines 2-4). The parameters following the shadow element in each line of the code denote horizontal (X-axis) shadow offset, vertical (Y-axis) shadow offset, shadow blur radius, and shadow color (#000=black). You can adjust each of these pararmeters to suit your tastes. The reason for three box shadow elements is explained in this post by Frederic Wenzel on hacks.mozilla.org. You can easily add this code to other page elements by searching for the appropriate code in your template and adding the same 4 lines (e.g., search for #footer { if you want to shadow the footer). You can also shadow the text or page element independently by removing the text or box-shadow elements respectively (just delete the appropriate lines from the code shown in red wherever you add it).

If you don’t have FF 3.5 yet, you can donwload it here: http://www.mozilla.com/en-US/firefox/3.5/releasenotes/

Hope this helps!

Pete