What Will I Learn?
How to Add Opacity to Web Page Elements
Requirements
Aptana Studio 3 - Download link &
Github
Difficulty
- Basic
Tutorial Contents
- The Opacity of Web Page Elements
- Using Style to Change Opacity
- The Microsoft Internet Explorer Method of Setting Opacity
- The W3C Recommended Opacity Setting
- Combined Opacity
Tutorial: Adding Opacity to Web Page Elements
Web page elements, such as images, are always solid. Unless, of course, the web site designer changes the opacity of the object, giving it transparency.
The opacity, or opaqueness, of an object is a measure of how opaque it is, or how much it reduces the passage of light:
A fully opaque object will not allow any light to pass through it; An object with 50% opaqueness will block half of the light; An object with no opacity will be transparent.
Now, opacity does not just apply to objects such as wall and windows, it also applies to the elements of a web page.
The Opacity of Web Page Elements
If a web site designer adds an element (such as an image) to a web page then, by default, the element will be fully opaque. That's to say that it will not be transparent at all. For example:
< img src="image1.png" >
This will show a solid image. The secret to changing the opacity of the images is, of course, in the image's style.
Using Style to Change Opacity
Before changing the opacity of the image it is worth noting that web browsers such as Firefox follow the W3C recommendation for style sheets. Microsoft Internet Explorer does not. There are, therefore, 2 ways to define the style according to the user's choice of web browser.
The Microsoft Internet Explorer Method of Setting Opacity
Microsoft Internet Explorer uses a style filter to set the opacity of an element:
filter:alpha(opacity=30);
The opacity range is from 0 (transparent) to 100 (opaque).
The W3C Recommended Opacity Setting
Mozilla Firefox use the style's opacity property:
opacity:0.3;
This time the range is from 0.0 (transparent) to 1.0 (opaque).
Combined Opacity
Obviously the web page designer has no control over their users' choice of web browser. Some people prefer the security and functionality of Firefox, whilst other are happy to use the web browser that comes with their computer. Regardless of their personal choices the developer must cater for all browsers. That is done by creating a new class in a style sheet:
.see_through { opacity:0.3; filter:alpha(opacity=30); }
And this class can then be applied to an image (for example):
< img src="image1.png" class=see_through >
If this is viewed in any web browser then instead of appearing as a solid object, the image will be much paler and see-though and the be used in such effects as:
- Web page watermarks
- Transitions between displayed images by using Javascript to progressively increase the opacity of one image whilst decreasing the opacity of another
- Labels for images
Giving the web site designer a much greater scope in the way that they can display information in a web page.
Posted on Utopian.io - Rewarding Open Source Contributors