CSS transparency without images

A transparency effect using only CSS, but unfortunately it has some drawbacks. View the source for how it's done.

*** start HTML here, paste this into the body of your document if you want to try this ***

High opacity

I wasn't sure what to do with this, so it was doing nothing on my website - then google found it... so here it is: an example of transparency in CSS.

As you can see it's not really doing much, you can set the transparency for a block level element and all the children. You cannot separate the foreground and the background with this effect.

It does work in MSIE 6 (and probably 5+), in Mozilla and in Opera.

Half opacity

The effect, especially when used as I did here, makes my computer crawl... so there is definitely a perfomance penalty here. Dont over-use this effect.

In many cases you'll be better off with alpha transparency in PNG images.

If you're interested you can check the other tools on my site, or check my weblog (beware, it's mostly in dutch).

Low opacity

Nullam sit amet arcu. Mauris ornare augue ac turpis molestie interdum. Aliquam eget quam sed urna nonummy posuere. Sed sagittis. Vivamus fringilla elementum sem.s

Vivamus metus velit, fringilla at, aliquet ac, condimentum ac, est.

In sagittis urna eget enim. Aenean diam nulla, scelerisque nec, hendrerit vel, sollicitudin id, massa. Sed nec nisl. Pellentesque orci.

Normal opacity

Nullam sit amet arcu. Mauris ornare augue ac turpis molestie interdum. Aliquam eget quam sed urna nonummy posuere. Sed sagittis. Vivamus fringilla elementum sem.s

Vivamus metus velit, fringilla at, aliquet ac, condimentum ac, est. Donec eu nulla. Nullam rhoncus sapien in diam. Morbi tempor ipsum sit amet orci. In sagittis urna eget enim. Aenean diam nulla, scelerisque nec, hendrerit vel, sollicitudin id, massa. Sed nec nisl. Pellentesque orci.

Transparent blue

Nullam sit amet arcu. Mauris ornare augue ac turpis molestie interdum. Aliquam eget quam sed urna nonummy posuere. Sed sagittis. Vivamus fringilla elementum sem.s

Transparent red

Nullam sit amet arcu. Mauris ornare augue ac turpis molestie interdum. Aliquam eget quam sed urna nonummy posuere. Sed sagittis. Vivamus fringilla elementum sem.s

*** end HTML here ***

If you want to see what's up: the relevant CSS is repeated here.

*** start CSS here, paste this into the head of your document if you want to try this ***

/* CSS Document */
#specialstyle div {
	margin: 5px;
	padding: 5px;
	border: 1px solid #000;
	width: 25em;
	background: #fff;
	color: #000;
	float: left;
	clear: right;
}

#specialstyle #light {
	background: #fff;
	opacity: 0.75;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
}

#specialstyle #half {
	background: #fff;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
}

#specialstyle #dark {
	background: #fff;
	opacity: 0.25;
	filter: alpha(opacity=25);
	-moz-opacity: 0.25;
}

#specialstyle #blue {
	background: #22a;
	opacity: 0.65;
	filter: alpha(opacity=65);
	-moz-opacity: 0.65;
}

#specialstyle #red {
	background: #a22;
	opacity: 0.65;
	filter: alpha(opacity=65);
	-moz-opacity: 0.65;
}

#specialstyle #light:hover,
#specialstyle #half:hover,
#specialstyle #dark:hover,
#specialstyle #blue:hover,
#specialstyle #red:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
}

*** end CSS here ***

jadwigo.nl