Alpha channel & Hex colors

Discussion in 'Web Design and Development' started by Grimace, Sep 26, 2006.

  1. Grimace macrumors 68040

    Grimace

    Joined:
    Feb 17, 2003
    Location:
    with Hamburglar.
    #1
    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?
     
  2. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
  3. Grimace thread starter macrumors 68040

    Grimace

    Joined:
    Feb 17, 2003
    Location:
    with Hamburglar.
    #3
    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:
     
  4. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #4
    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.
     
  5. Makosuke macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #5
    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.
     
  6. mnkeybsness macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #6
    at some point in time, more browsers than safari will support rgba values...

    for example, red with 50% opacity is rgba(255, 0, 0, 0.5)
     

Share This Page