The Apple OSX bevelled effect isn’t exactly original now but, nonetheless, there are times when the style suits your design needs, especially when wireframing OSX/iPhone applications.

I’ve found a neat little method of creating the bevel effect in Fireworks which you can reuse quite easily:

1. Select the object you want to apply the effect to. (Note it works best on darker objects).
2. Apply a drop shadow filter to the object (Filters > Shadow and Glow > Drop Shadow).
3. Set the Distance to 1, Opacity to 20%, Softness to 0, Angle to 270 and the Color as #FFFFFF.

That’s it! See the following example of how it looks.

For added convenience, why not set this as a favourite style?

1. Select the object you’ve just applied the filter to (it should be the only filter applied).
2. Click the + button next to Filters.
3. Select Options > Save As Style….
4. Name the style, something like “OSX Bevel“.
5. Now you can apply the bevelled effect to any object you select in Fireworks by clicking the + button and choosing “OSX Bevel“.

Hopefully some of the designers out there will find this little tip useful.

If you can think of a quicker or more convenient way of applying this effect in Fireworks or have an alternative approach for all the Photoshop users out there, leave a comment below.

Seeing as I was Yahoo! web developer for a year, you’d think I’d be “eating dog food” by pimping the YUI JavaScript library. Don’t get me wrong - it is a very powerful and comprehensive framework and definitely worth experimenting with at some point.

Unfortunately though, I had already been playing around with jQuery prior to my employment there so I was already sold on the minimalist, simple approach to jQuery, hence why it is my personal favourite.

Recently, I’ve been building quite a comprehensive web application at Premium Choice which relies heavily on JavaScript. There are many dependencies within the form whereby certain fields should only be shown when other options are selected.

The form adopts a step-by-step accordion wizard interface to simplify the process, therefore certain screens are hidden throughout the process. I was having issues trying to hide already hidden fields when changing options elsewhere. jQuery must be making the assumption that it is already hidden so you don’t need to hide it. However, I wanted to preserve that hidden state when the containing screen was eventually shown.

To get around this, you need to control the actual CSS rather than relying on the pre-defined jQuery $.show() and $.hide() functions, like so:

 if($(this).val()=='something') {
  // show the relating hidden field.
  $('#target_field').css('display', 'block');
} else {
  // hide the relating hidden field.
  $('#target_field').css('display', 'none');
}

It is very unlikely that this situation arises but, on the rare occasion when you encounter it, at least now you’ll know a way around it.