css filters

Using RGBA to Prevent the CSS Opacity Inheritance from Parent to Child Elements

This article is a follow up of another article of mine dealing with the same problem which was written two years earlier. Now, in the light of the increased support for CSS3 the solution I will offer is already fully supported by all major browsers. The new solution deals with RGBA CSS3 backgrounds for Mozilla FireFox, Google Chrome, Opera and Apple Safari and the Microsoft-proprietary DXImage gradient filters for Internet Explorer and may give you some new design ideas. Make sure you check the test page which I have created for this article.

1. Create an empty <div class=”outer”>…</div>, and assign the following CSS to it:

.outer
{
   position: absolute;
   top: 24px;
   left: 24px;
   border: solid 1px #000;
   padding: 24px;
   background: rgba(64, 64, 64, 0.5); /* R, G, B, A */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040); /* AA, RR, GG, BB */
}

The RGBA background property requires the setting of four values for red (0-255), green (0-255), blue (0-255) and alpha transparency (0-1). Currently it is fully supported by FireFox, Opera, Chrome and Safari. Internet Explorer 9 is planned to support it. As a fallback for older versions of these browsers you may specify:

background: rgb(64, 64, 64);

… Before the rgba property, but keep in mind that Internet Explorer actually supports the RGB module and you will need to remove the background for that browser before or after the filter roperty by targetting all of its versions with the \9 hack:

background: none\9;

Now, let’s add support for RGBA for Internet Explorer 5.5-9. We are going to use the vendor-specific CSS extension gradient filter:

filter: progid:DXImageTransform.Microsoft.gradient();

It’s startColorstr and endColorstr properties allow the setting of both alpha channel and RGB color in hex format:

startColorstr=#AARRGGBB, endColorstr=#AARRGGBB

… Where the permitted values range from 00 to ff. In order to create a solid background we will use identical values for both the start- and end color strings:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

… Where 7f represents 127, i.e. 50% opacity, and 404040 is the background color of the element (whose RGB representation is 64, 64, 64 as in background: rgba(64, 64, 64, 0.5)).

2. In the <div class=”outer”>…</div> nest a new <div class=”inner”>Lorem ipsum dolor sit amet.</div> and associate it with the following CSS, for example:

.inner
  {
   padding: 12px;
   width: 120px;
   background: #fff;
   border: solid 1px #404040;
  }

Hit F5 to reload the page and you will see that the opacity from div.outer is not inherited by div.inner. Cool, isn’t it? Here’s a link to the online demo. Keep in mind that the absolute position I have set on the demo page is for display purpose only – to prove the semi-transparency of the div.outer.

Find more experiments here.

Related Posts

CSS Hack for Safari and Google Chrome: Redux

As body:nth-of-type(1) and body:first-of-type are supported by FireFox 3.5x, the hack that I wrote about in this post cannot be used anymore. You may try the following one, which targets only Google Chrome and Safari:

@media screen and (-webkit-min-device-pixel-ratio:0)
{
 div
 {
  color: red; /* The text will appear red only in Safari and Google Chrome */
 }
}

10 Dirty CSS Tips and Tricks

Here is a collection of 10 CSS tips, tricks in blogposts I have written during the last year that you may find useful:

01. Better Image Scaling and Resampling in Internet Explorer
02. Setting Opacity and Other Filters in Internet Explorer 8
03. The 32 External CSS Files Limitation of Internet Explorer and More
04. Unobtrusive CSS Loading Indicator for Images
05. CSS: Filtering and Distinguishing Google Chrome and Safari
06. Controlling the CSS Opacity Rate of Child Elements in Transparent Parents in Internet Explorer
07. $style – Get Any CSS Property Value of an Object
08. Emulating border-color: transparent in Internet Explorer 6
09. An Exotic CSS Hack for Internet Explorer
10. CSS Watermark
11. Using CSS to Style Radiobuttons and Checkboxes in Safari and Chrome

Visit http://acidmartin.wemakesites.net – the home of Acid.JS – The AJAX Tools and Widgets Library

CSS: Filtering and Distinguishing Google Chrome and Safari

 As body:nth-of-type(1) and body:first-of-type are supported by FireFox 3.5x, the hack that I wrote about in this post cannot be used anymore. You may try the following one, which targets only Google Chrome and Safari.

Personally, I avoid using CSS hacks, and when writing client code I always assume that anything can be done the “legal” way.

However, in most cases a hack is useful and needed, so here are two hacks (which are, in fact a valid CSS) that can be used to target and distinguish Google Chrome and Safari:

/* Google Chrome hack */
body:nth-of-type(1) .elementOrClassName
{
/* properties go here */
}

/* Safari hack */
body:first-of-type .elementOrClassName
{
/* properties go here */
}

Controlling the CSS Opacity Rate of Child Elements in Transparent Parents in Internet Explorer

This article is rather old. Please, read the updated version for a cross-browser solution.

The alpha transparency filter applied on parent elements is inherited by their children, which is not always the desired behavior and can create unwanted design effects.

However, due to a browser bug in Internet Explorer, there is a cool hack that allows not only to reset the alpha transparency of the parent element in its children, but also to control the opacity ratio of its children transparency.

And this rocks! And is done with CSS position: relative of the child elements.

CASE 1: Resetting the Transparency of the Child Elements:

HTML:

<div class="parent">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras purus pede, aliquam vel, eleifend in, mollis sit amet, ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tempor. Ut pretium. Donec libero turpis, viverra ac, pharetra vel, rutrum ut, pede. Proin vulputate diam a libero. Donec nec turpis. Integer purus. Proin ipsum risus, tempus scelerisque, tempus et, commodo quis, diam. Cras pulvinar urna ac erat. Aliquam pulvinar gravida justo.</p>
</div>
</div>


CSS:

<style type="text/css">
.parent
{
width: 640px;
height: 480px;
border: solid 1px #333;
background: #ccc;
filter: alpha(opacity=30);
}

.child
{
width: 600px;
height: 440px;
border: solid 1px #333;
background: #ccc;
margin: 20px;
position: relative;
}
</style>

To reset the opacity rate of the children elements we simply add position: relative to them.

CASE 2: Setting a Different Transparency of the Child Elements:

Reuse the above code, just add the new filter value to the .child class, i.e:

<style type="text/css">
.child
{
width: 600px;
height: 440px;
border: solid 1px #333;
background: #ccc;
margin: 20px;
position: relative;
filter: alpha(opacity=80);

}
</style>

Enjoy!

Visit http://acidmartin.wemakesites.net – the home of Acid.JS – The AJAX Tools and Widgets Library