Newbie Question: How do I code & design transparent webpages?

Discussion in 'HTML & Website Design' started by buywiser, Jan 21, 2011.

  1. #1
    Hi,

    Instead of buying a web template: I bought a navigation bar script & want to build my website around it.

    I would like to create webpages in the same style-looks as the transparent boxes in my navigation bar.
    How do I create transparent pages with content? where do I start? Should I inspect the actual CSS code to find hints to create them?


    Please HELP me!!!

    http://codecanyon.net/item/css-ultimate-menus/123107

    [​IMG]



    [​IMG]
     
    Last edited: Jan 21, 2011
    buywiser, Jan 21, 2011 IP
  2. davmillar

    davmillar Peon

    Messages:
    12
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    There are three ways to replicate that look:
    1. Use partially transparent PNG images for the background of containers like DIVs.
    2. Use CSS opacity to set the opacity of containers and objects (but this will make the text/contents partially transparent too).
    3. Use CSS rgba() to use colors that have an alpha value. For example, rgba(0,0,0,0.5) is 50% opaque black, 0.75 would be 75% opaque, and so on. The color can be used for background colors, border colors, text colors, CSS3 gradient colors, etc, but older browsers will now support it.

    My best advice is seeing which technique of the 3 (if any, maybe different) is used with the framework you have set up already and mimick it with the rest of your UI.

    ETA: Looks like based on your link it's done with images, so that may be a good starting point. If you'd prefer the other techniques, try searching for "CSS3 glass buttons" or something similar.
     
    Last edited: Jan 21, 2011
    davmillar, Jan 21, 2011 IP