Amazon: Running Shoe Deals - click here to view current selection.
Running Warehouse: Great prices on closeout shoes! View current selection.


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]

Track and Field Shoe Sale at Running Warehouse!

Running Warehouse Track Shoe ad
Running Warehouse Runblogger Sidebar

Save $$$ On Shoes Gear:
Running Warehouse: Great prices on closeout shoes! View current selection.
Amazon.com: 25% or more off clearance running shoes - click here to view current selection.
Connect With Me On:
Facebook - Runblogger | Twitter - @Runblogger | Instagram - @Runblogger


Recent Posts By Category: Running Shoe Reviews | Running Gear Reviews | Running Science
About Peter Larson

This post was authored by Peter Larson. Pete is a biology teacher, track/soccer coach, and dad (x3) with a passion for running, soccer, and science. If you'd like to learn a little bit more about who I am and what I do, click here, or visit petermlarson.com.

Shop Running Warehouse – Summer 2023

Speak Your Mind

 Notify me of followup comments via e-mail

You can click here to Subscribe without commenting

*