Figmint designs goodly designs for the average tasteful chap

Opacity

Opacity is the transparency of something; whether you can see through it or not. If an object or element is opaque, it has 100% opacity, and if it's solid, so you can't see anything through it. 0% opacity is, well, invisible.

100% Opacity50% Opacity0% Opacity

Opacity can be used to make webpages very snazzy. I've used them to do all sorts of most excellent effects with invisible page elements that appeear when you hover in just the right place, and they're a lot of fun.

Traditional Opacity

Example.

A more practical application for opacity is background opacity. A lot of people like the appearance of a text box that's partially transparent. This tends to be popular when the text box is set over an image. Having that see-through background keeps the image tied in to the text space, while making the text a lot more legible than it'd be, were it written right on the picture.

Now, the most popular method of CSS opacity involves making the entire text box partially transparent. That means not just the background color--the text it includes as well. It produces a nice effect, but the legibility can be a little compromised.

Here you can have a look at (and snatch) the code you'd use for this effect. 

selector{
opacity: .5;
filter: alpha(opacity=50);
...
}

These two lines will work in most browsers. The first line is for Safari, Chrome, Opera, Firefox and others, and the second for Internet Explorer 5 to 7. To ensure that your opacity works in IE 7 and 8, add the following two lines in the given order.

selector{
...
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); 
...
}

Now, there is this funky glitch with IE, and it's that the opacity won't work unless you also position the element of the page (select/text box/part of page). Use the visibility, position, top, left, width, or height property in addition to filter, and you should be good.

The code examples above show 50% opacity, half transparent. You'll notice the IE opacity scale is pretty much the percent opacity you want without the percent sign, and for other browsers opacity value is a decimal. Based on this, 0% opacity and 100% opacity would be written like so:

opacity: 0;
filter: alpha(opacity=0);

opacity: 1;
filter: alpha(opacity=100);

As you might have noticed, this method of opacity is very well supported, across most browsers without much of a problem. This makes it a pretty good way to use opacity. However like I said, the effect I tend to use the most is background opacity, and there are other ways to achieve it.

Background Opacity in CSS3

Example.

You may have heard about CSS3. Basically, languages like CSS are released in versions with new fancy features. CSS3 is the newest version of CSS, and since it's so new, some browsers don't support it yet. Because of this you wouldn't want to use a new feature exclusive to CSS3 as a central part of a layout, but background opacity isn't usually that noticeable, and so if you're feeling daring you might want to give CSS3 a go. Note that neopets does not support CSS3 at the moment and they'll censor it if you include it in code.

Anyhow, the CSS3 property I'm talking about is a sort of revised version of the normal background. The value is where it gets fancy, as you can see below.

background: rgba(255, 0, 0, 0.5);

You probably just went, "WHOAH, what does that mean?", if you've never seen it before. Well turns out colors can be written in more than one way. Normally you might see hex codes (#000000), but there's also the RGB version, which provides a value for the red, green, and blue components of a color. If you use a color picker, you can probably fiddle with it and get it to give you colors in RGB instead of Hex. For more information on colors and coding, go here.

Note that 255, 0, 0 is red. 0, 0, 0 is black, and 255, 255, 255 is white.

You might notice the "a" up there, right after "rgb". That stands for alpha, which has to do with opacity. Within the parentheses, the color is written (here it's "255, 0, 0,") and then it's followed by a decimal value, which, you guessed it, is the opacity. Right here we've got fifty percent opacity of course.

Now if you think for a second, I'm sure you can infer how this is different from the css opacity methods we were talking about a moment ago. Notice the word "background"? Yup, so this opacity only applies to the background of the page element we're working on. Text on top of this background will be just as opaque and legible as normal.

Nifty as this is, like I said, its not supported on all browsers or on neopets. But do not despair yet...

Transparent PNGs as Backgrounds

Example.

Well, one thing I enjoy about coding is that there are plenty of opportunities to get clever. I'll share with you one way to do background opacity without CSS3. This should work on IE7 and beyond. If you use something older than that, quick, download a new version, or better yet, chrome, or safari, or firefox, or heck, even Opera, and join the crowd of self-respecting human beings.


If you just did that, *highfive* you are amazing. Thank you for being awesome.

Back to this knowledge-acquisition stuff. Ah, so I was going to let you in on my handy trick.

Well, you know pngs? They're a kind of image that are very crisp and special because they allow transparency. Variation in opacity. So say you want a 50% opacity black background, make a little png image that's black with 50% opacity, upload it to the internet, and set it to the background image. If you've never set a background image before, here's the code:

background: url('puttheurlhere.jpg');

Make sure you don't set the background to no-repeat or something like that. You want it tile the background (repeat over and over). And it's as simple as that.

For your convenience, I've made some simple png background images that you can use. They are only black and white, and the opacities are in increments of 10 (100%, 90%, 80%...10%, 0%). Feel free to use them, but I encourage you to make your own if you plan on using them a lot.

If you wish, change black in the url below to white and replace 20 with your desired opacity value. 

http://i107.photobucket.com/albums/m315/kubummer/figmint/bgopacities/black20.png
For a 40% opacity white background color, my code will look like this: 
selector{
background-image:url('http://i107.photobucket.com/albums/m315/kubummer/figmint/bgopacities/white40.png');
}

Review

Figmint © Frisby. Please enjoy and respect my work. Terms of Use.
eXTReMe Tracker