Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Grimace

macrumors 68040
Original poster
Feb 17, 2003
3,572
250
with Hamburglar.
Hey all, a quick easy one:

I want to use the crimson color #990000 but have it be a bit more transparent. Is there any way to add an alpha channel to the color coding in HTML?
 
thanks! One more question so I don't start a new thread:

Why does text look so crappy on a window machine -- even firefox -- compared to on any mac browser? Blocky, choppy text -- but it's just the standard font. :confused:
 
Because windows doesn't yet have system wide font smoothing.

There is an option to turn this on (clear type or something like that) but it is of by default.

This will change when Vista is released, speaking of which, when is Vista released?

It is horrible to look at and one of the main reasons I appreciate Mac OS X so much.
 
Actually, you can make an element partially transparent using CSS; here's a page that came up on Google in a quick search:

http://www.mandarindesign.com/opacity.html

It is (of course) not supported in IE, though, so it's of limited use. Of course, IE doesn't support the alpha channel in PNG images, either, so you're in the same boat either way.

One tricky thing about using CSS, however: When you make an element (say, a DIV) partially transparent, ALL of its contents inherit the same transparency, and you CANNOT raise the opacity of a contained item above the transparency of the containing object.

That is, if you put text in a DIV and make the DIV 50% opaque (that is, 50% transparent), then the text also becomes transparent. If you set the text explicitly to 100% opacity (not transparent at all)... it ends up at 50%, because it can't be "more opaque" than the containing object. If you were to set the contained text at 50%, then it would end up half of half, or 25% opaque (75% transparent).

This sounds confusing, but the upshot is there's no easy way to make a DIV with a non-image background partially transparent without having the contained text look ghostly, too. An oversight in the way the spec was designed, if you ask me, but that's how it is.

You can get around this by using positioning to overlap things--that is, absolutely position text on top of an "empty" object that is transparent, so the text is fully opaque and appears to be contained within the object, but that's frankly pretty ugly, and it's a whole heck of a lot easier to just make a small square of solid color PNG with a partially-transparent alpha channel.

I'm doing precisely that with the box at the top of the page on this site:

http://animeworld.com/

It's just a 10X10 grey PNG with about 50% transparent on the alpha channel set to the DIV background and tiled. It looks opaque in IE, but I don't care, since it's not ugly at all. (Except for IE5 on Mac--in which it's totally transparent for some reason, but that's not hideous, either, and that browser is pretty rare these days anyway.) I'd initially experimented with CSS transparency, but having the text partially transparent wasn't acceptable.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.