Wednesday, June 08, 2011

Quick Tip: Using Transparent PNGs For a Number of Effects

Hi.
Recently I am working on my new project for a client and the design required using a semi-transparent background for the drop down menus, from which you can see through the objects behind it. :) Since CSS prior to CSS3 doesn't offer a background color with opacity and there might be solutions which can get complex. A simple solution is to use a semi-transparent PNG (Portable Network Graphics) image as a background and set background properties like repeat and position as you need and you have a great looking drop-down menu background which is semi-transparent or with the opacity you have set.

you can either use Adobe Fireworks or Photoshop to create a PNG with opacity. I'll be postign tutorials but not sure of the timeline right now as projects have caught me up. The link to the semi-transparent drop down menu is  http://samnelson.biz/inland/

Take a look and let me know your comments.

No comments:

Post a Comment

Please post your thoughts :)