Five Tips on Using Transparent Images in Web Design

Posted on October 19, 2011 by

When trying to achieve transparency on your website, you should arm yourself with the knowledge of manipulating images. It’s important to understand about the basics and push the browser support limitation. You should also observe websites that already use transparency effectively, only then you can get creative when incorporating transparency in your website. You can use proven methods of imitating transparency that are intended to overcome browser limitation issues. While you should appreciate past solution, it is the right time to look beyond faux methodology and work with PNG format, because transparent PNG graphics are already well supported by most major browsers.

Ultimately, you should use creative methods when employing transparency on the Website. These are a few tips on implementing transparency in your website:

  1. Overcome limitations of older browsers:
  2. Some browsers already offer full support on transparency. However, many users are still using IE6 that comes with Windows XP, although IE9 is already available since early 2011. Because IE6 has poor support for alpha transparency, you need to work with scripting-based solutions and IE specific code. There are numerous articles in the Internet that can help you overcome limitations of older browsers.

  3. Use faux transparency method:
  4. The method uses images that can imitate transparency. You can create such images with common image editing software such as Adobe Photoshop. Remember that images used in this method don’t have encoded data. These images are simply solid images that look transparent. When designing a website with transparent elements, you should prepare the images properly and ‘Save for Web’. The exported graphics are solid and you can use them when you code up your Website. When used properly, the result appears transparent to end users. This method is often used to sidestep browser support issues for transparent encoded PNG images. Consequently, you don’t need additional JavaScript or browser hacks.

  5. Use transparent PNG background:
  6. After learning more about Web transparency, you’ll find out that there are good reasons to use PNG graphics for website design. The image format supports full a wide color spectrum and alpha transparency. PNG files can optimize better than other image formats, including GIF. Microsoft adds PNG supports in its browser since Internet Explorer 7 and you should adopt the of PNG images in your workflow. To cater to some users that still use IE6 and other older browsers, you can use a number of JavaScript-based solutions.

  7. Use flexible width:
  8. Sometimes, when users resize the browser, the images overlap; it may happen if transparent images are placed on the opposite ends of the browser window. To fix this issue and create an interesting effect, you need to use flexible width.

  9. Perform experiments:
  10. JavaScript and Ajax are scripting technologies that can open up your creativity when using transparent elements in the Web design. Draggable elements are also a good opportunity to employ transparent images that can overlay the Web design.

About: This Article was Contributed by Raja. He is a Web Hosting industry watcher and writes regularly on Dedicated Hosting Reviews and Reseller Hosting Reviews.

Author :

  • admin