Opacity in Web Design

Transparency is the effect created when a color block, text or image is “made thinner” or unsaturated so that the color is diluted and what is behind it shows through. It can push your design to the next level, without being too dramatic For some cases transparency subtly adds to the quality and character of the design, and in other cases it can be a major design element. You can use the opacity property with RGBa colors to create sophisticated transparency features in your designs, such as the transparent drop-down navigation list shown in this figure.  Using RGBa for a color value in CSS, you can set a transparency level on any color.

You can play with tones and lighting of the transparent elements in your design and get the wanted effect. CSS3 has a specific property that controls the transparency of an element, aptly named “opacity”. It takes as its value a number from zero to one, representing the degree to which the element is opaque. This has the distinct advantage over opacity in that it doesn’t have any effect on descendants. Transparency can also be used to help text pop off a background that may not showcase it as well. Adding opacity to an element is simple; like this you can add it in your style sheet:

.opacity{
opacity: 0.6;
}

The World Wide Web Consortium (W3C) establishes web coding standards like the CSS opacity, but for a variety of reasons not every browser supports every property that the W3C defines. For example, no version of Internet Explorer (IE) will properly render the opacity property (included the newly release IE8) and Opera had issues with this property before version 9.0.  For IE browser you can use:

.opacity{
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
Filter: alpha(opacity=50);
}

When using a transparency for images, colored boxes or text, it is vitally important to consider the readability of the words. When “Saving for web” from Photoshop, you have two choices for PNG’s: PNG-8 and PNG-24. PNG-8 is like a GIF in that you can have transparency in pixels, but a pixel is either fully transparent or fully opaque, no in-between. PNG-24’s, while far bigger in file size, support full alpha-transparency. Overlaying of text on background ability have the print design the ability of giving fading of text effect in the background and thereby handling the feature of transparency of images.

 

 

But in contrast the web design lacked this powerful ability before the introduction of features in CSS3 which was handled in CSS3 by its powerful feature of opacity. Transparency of an element changes when the user places their mouse over that element. This stated feature could be used on menu items, to give the user of your web pages a feeling of emphasis and interactivity

Pros

• Easy to implement
• Cross-browser support, (IE requires ‘filter’)
• No HTTP request

Cons

• Affecting the entire element as shown

 

If you working with transparency in web design, transparency of the element is a common trend, but it can immediately provide a sense of sleekness and style to any webpage.

For more reading about technology news in singapore and seo to online marketing do view more about other pages.