Firefox 3.5: Shadow Effects

Mozilla FirefoxImage via Wikipedia

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

Reblog this post [with Zemanta]
About Peter Larson

This post was authored by Peter Larson. Pete is a recovering academic who currently works as an exercise physiologist, running coach, and writer. He's also a father of three and a fanatical runner with a bit of a shoe obsession. In addition to writing and editing this site, he is co-author of the book Tread Lightly, and writes a personal blog called The Blogologist. Follow Pete on Twitter, Facebook, Google+, and via email.

Speak Your Mind

*

**Featured Running Gear Sale: Shoebuy - 20% Off Skechers Performance shoes and 20% OFF all technical running shoes with code 20APRIL (through 5/1)

Have a question about running shoes? Need helping choosing your next pair? Get help in the Runblogger Forum.

SAVE $$$ ON RUNNING SHOES AND GEAR
If you'd like to support the work done here on Runblogger, please consider making your next running shoe or gear purchase from one of the retailers below - you'll likely save a bit of $$$, and I'll get a small commission to help keep the site running and the blog posts flowing. Thank you for your support!

Running Warehouse - 10% Off With Code RUNBLOG10 (some exclusions apply)
TriVillage - 18% Off With Code RBTri18 (some exclusions apply)
Clever Training - 10% Off With Code RunBlogXJT (some exclusions apply)
Sportsshoes.com - UK-based but ships globally