Solving CSS opacity issues

I know this site’s general waffley banter may not make it clear, but I am a Graphic Designer, and I tend to focus on the web.  This post deals with an issue that hounds web designers trying to deal with transparency within web pages.

The problem is this:

When making elements of a web page semi-transparent, a web designer uses code like the below to make an element semi-transparent:

<div style="opacity:0.5; background:white; width:100px; height:100px;">
  Some text
</div>

Different browsers use slightly different code for opacity, but the above is one way.  The problem is that whilst this will make a black division of 100 pixels square with a 50% transparency, it will also make the text within it inherit the transparency.  You may think the solution is this:

<div style="opacity:0.5; background:white; width:100px; height:100px;">
  <span style="opacity:1;">Some text</span>
</div>

…and you’d be wrong.  This will make the text 100% of the 50% inherited from the earlier command.  So that’s not good.

Another solution is to make the div in one bit of code, and then use positioning and floats to float the content over it, but this is quite a lot more complicated and can lead to loads of messing about making code cross browser compatible and so on.

Not perfect, but I use 2 fixes for this:

PNG fix

As is well known PNG (Portable Network Graphic) files have a built in transparency ability that can be useful in website design.  Firefox and the Mozilla browser support PNG transparency for the last few versions at least, and the latest two versions of IE also support it.  For the next 2 versions of IE down, you can use the Javascript Unit PNG Fix or similar, which does the job nicely by applying IE specific commands to all included png files.  If you want to avoid Javascript, you could include these yourself, have a look at this article on A List Apart.

Why is this relevant?  Well, it’s pretty simple, in cases where you want to make a box on screen have a semi-transparent background but not text, you can create a 1 pixel by 1 pixel PNG file of the relevant transparency and colour and add this as a background to that element.  And problem solved, the transparency works already on all up-to-date major browsers, and can be made to work on that last 4 versions of them all too.  As the ALA article points out, it even works on the Sega Dreamcast built in browser.

JS is sometimes your friend

If you want to make different things different transparencies, and not just affect backgrounds, you may need to bow to Javascript.  Whilst you could write this code yourself, making it cross browser is again an unnecessary hurdle that others have overcome for you already.  All major JS effects libraries have something along these lines, but I’m going to stick with my favourite, JQuery, in which this is a major piece of cake.

Imagine you have an element, as before and you want it (but only it, and not it’s child elements) to be semi-transparent.  Having included the JQuery library all ready (You can even include the version hosted on GoogleCode, if you want to be stingy with your bandwidth.) all you need do is this:

JQuery is so called because it operates on a system of queries like a database might, these queries match elements on the page, rather than entries in a db, but the idea is similar.  If you want to select a div with the id “bob” then the query you enter is “div#bob” and if you want to match all italic text then the query would be “em” you see?  These queries are contained within a direction that looks like this:

$(QUERY)

and then directions are performed on them thereafter by using functions upon them, like this:

$(QUERY).ACTION

This isn’t a JQuery tutorial, but there are plenty out there, and it’s really easy, so much so that it can make returning to JS a challenge.  Instead of explaining how it all works, I’m going to explain how you would make an element with class “opacity50″ be 50% transparent:

$(document).ready(function() { //Checks the page has loaded before doing anything

$(“.opacity50″).fadeTo(0,0.5);

});

Looking at the middle line of those three, this is what it does:

$(“.opacity50″) 

Selects everything with the class “opacity50″.

.fadeTo(0,0.5); 

Fades selected items to 50%, expressed as 0.5 here.  The first zero is how long to take to do this, I’ve put ‘0′ as in instant, but you could put any amount of milliseconds, and watch elements fade to 50% over time.

So that’s it.  My solutions to inherited opacity in CSS.  Hope it helps.

No related posts.