WEB Few questions, can CSS do this (or is it already doing it)

Discussion in 'OT Technology' started by ?uest Love, Apr 17, 2008.

  1. ?uest Love

    ?uest Love New Member

    Joined:
    Nov 1, 2006
    Messages:
    7,009
    Likes Received:
    0
    See this site:

    http://www.antidote.co.uk/

    1 - How can I create those floating, transparent areas where information is being displayed? Is it through CSS? If so any links to some info or code I need to use including transparency, positioning, etc. I'm mediocre at CSS but this all seems foreign to me on this site.

    2 - How can I possibly have the background image resize automatically as I resize my browser window? I checked their code and it looks like they are using Javascript but I'm not sure. Any thoughts? Otherwise, I think I can just stick with a static background image.

    Your help is greatly appreciated.
     
  2. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    That was done in flash and they're using JavaScript to implement it. The effect you see can be duplicated in CSS and you can resize the background according to your browser window using JavaScript.

    That entire site, however, like I said, was created in flash.
     
  3. ?uest Love

    ?uest Love New Member

    Joined:
    Nov 1, 2006
    Messages:
    7,009
    Likes Received:
    0
    But no go on the transparent floaters by just using CSS? I guess I can just try to make it static then. Not sure if it will work though.
     
  4. gobbles

    gobbles .

    Joined:
    May 6, 2006
    Messages:
    422
    Likes Received:
    0
    Use a partially transparent .png as the div's background image.

    Or, if you want to cater towards browsers using CSS3, you could do this:

    background: rgba([0-255],[0-255],[0-255],[0-1]);
     
  5. projectalpha

    projectalpha 二號 Stunna

    Joined:
    Aug 4, 2001
    Messages:
    17,671
    Likes Received:
    0
    Location:
    Bay Area, California
    use opacity, filter: alpha(opacity=), and -moz-opacity
     
  6. c.a

    c.a New Member

    Joined:
    Jan 24, 2006
    Messages:
    1,117
    Likes Received:
    0
  7. ?uest Love

    ?uest Love New Member

    Joined:
    Nov 1, 2006
    Messages:
    7,009
    Likes Received:
    0
    thanks everyone! i'm not sure if the image opacity woudl help but there is an article on "Creating a transparent box with text on a background image" which should work. thanks again.
     

Share This Page