16 October 2007

Minisite 3: Opacity


[Above Image: comparison of Left: 70% opaque,Right:100% opaque]

I've been studying the code for the multi-frame gallery I got from CSSplay.co.uk and I've been trying to under what each line of code does by changing the values for each CSS property.

I've also taken it further by applying a opacity css property which allows me to make the background transparent. I found the technique on:

In the css code it looks like this:
[background-color:#000000; opacity:.7; filter: alpha(opacity=70); -moz-opacity:.7;]
Background color is what colour you want to be transparent. Opacity:.7 is the value of the opacity. You can also adjust the opacity seperately for IE and Firefox. This can be done by using the proprietary code: -moz-opacity:.7;]. The filter in this case works for both IE and firefox.

This method is a great way to allows me to change the transparencies using numerical values. I no longer have to make images of semitransparent backgrounds in photoshop. The disadvantage of making a transparent background is that it doesn't allow other users to change the opacity value for themselves.

Overall this is a nice visual feature and therefore I would like to use in my Minisite 3, specifically for the multi-photo frame viewer. This allows the user to also see the background brushed steel artwork.

No comments: