To be able to effectively handle the alpha transparency or opacity of a particular element purely using CSS/HTML was the dream of any web designer. Because, with alpha transparency or opacity they can make visually more beautiful and easily maintainable websites with less effort. Now with CSS3 we can achieve these using properties such as RGBa and Opacity.

What is RGBa?

In addition to RGB (Red Blue Green) CSS3 has introduced a new feature to color setting, which is called RGBA. RGBA stands for Red Blue Green Alpha. Here “A” in this property name stands for “Alpha”. This additional feature can be used to specify an opacity value for any color. The alpha channel is usually used as an opacity channel. If a pixel has 0% value in its alpha channel, it’s fully transparent (and, thus, invisible), whereas a value of 100% in the alpha channel gives a fully opaque pixel. We can use this for anything that can take the CSS color property.


Sample CSS Code:

1

P { background-color: rgba(255, 0, 0, 0.5); }

We can use RGBA now on all new-generation browsers including Firefox 3, Chrome, Safari, and Opera 10, but we won’t see the effect in Internet Explorer.

Live Preview (Screenshot for older browsers)

Read the rest of this entry »

Have you ever felt the need for holding an embedded image inside an HTML file, without referring to an external image file? Personally I felt like so many occasions, where the need for a completely self contained HTML page, with all its supporting images embedded within that page itself. This may seem pointless in normal situations, but it can prove very useful when we want to make a standalone page, that we can pass on to other people. We give them just one HTML file. They do not even need to unpack anything, they can simply open the file in their browser, and all the images and embedded objects are immediately displayed. They can do this even without an internet connection.

Below you can see two images first one is included in the traditional way by referring to an external file, and the later by using data URI.

          

Try right-clicking the above images and check the file location in the properties panel. You can see the difference.

With Data URI (Uniform Resource Identifiers) we can easily do this.

What is Data URI Scheme?

Data URI scheme defined in IETF standard RFC 2397, as an URI scheme that allows inclusion of small data items inline, as if they were being referenced to as an external resource. They tend to be far simpler than alternative inclusion methods, such as MIME with cid: or mid: As per the wording in the RFC, data: URIs are in fact URLs, although they do not actually locate anything. Read the rest of this entry »