SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Opacity on Opacity

    Lets say I have a div with an opacity of 20%. This means that only 20% of the div is visible.

    The design goal I want is to have the div appear 20% visible, so it's background color blends in nicely with its parent's background (it's a gradient), but I also want the text within the 20% opacity div to appear as 100% opacity.

    So basically I want the content within the div to appear 100% and then I want the div's background color to only be 20% visible. I am aware that it would be better to achieve this effect by using a transparent PNG image or have the same gradient of the parent div be darkened or lightened and then copied to the opacity div.

    But my website is going to have a selection of themes and I really want to avoid having to create two sets of gradients as well I don't want to use a transparent PNG image due to IE's browser shortcomings (I am aware that PNG images can be fixed using an IE hack, but I want to avoid putting extra useless HTML into my page).

    OK, so as of now I have one div with 20% opacity (in mozilla, IE, W3C and KHTML).

    Alright, since opacity is inherited, is there a way to make child elements appear "normal" as 100% opacity, even if they are nested within a parent element with 20% opacity?

    One solution would simply be to have two layers: one with the 20% opacity at z-index:1 and the other one (with the solid color) as z-index:2, both being at the same position.

    But is there another way to do it?
    I can't believe I ate the whole thing

  2. #2
    SitePoint Enthusiast AvengeX's Avatar
    Join Date
    Oct 2005
    Location
    London, UK
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tag soup. Put a <p> or <span> inside it with 120&#37; opacity. It could work!

    Or, you could do something *really* clever and find the inverted colour of the opacity's colour, then set that to the colour of the text inside the box. When they blend, they should go black.

  3. #3
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried having a nested element with an opacity above 100% (or above 1.0 for mozilla and W3C); It didn't work.

    Also having text with a complementary text color within the tag, but the thing is that even though it could stand out, 80% of the text color is faded out.
    I can't believe I ate the whole thing

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!-- Created: 2007-06-28
    http://forums.devshed.com/css-help-116/divs-in-overflows-456096.html
    
    2007-07-12
    http://www.sitepoint.com/forums/showthread.php?t=490807   -->
    <title></title>
    <style type="text/css">
    #wrapper {
      width: 760px;
      margin: 0 auto;
      position: relative;
      z-index: 2; /* needed for Opera 6 */
    }
    #content {
      position: relative;
      z-index: 20;
    }
    #contentbg {
      position: absolute;
      z-index: 1;
      width: 100&#37;;
      left: 0;
      top: 0;
      bottom: 0;
      background: #f6e38c;
      filter:alpha(opacity=30); /* IE5.5+ */
      -moz-opacity:0.3; /* Gecko browsers including Netscape 6+ and Firefox */
      -khtml-opacity: 0.3; /* Safari 1.1-1.3 */
      opacity: 0.3; /* Netscape 7.2+, Firefox, Safari 2+, Opera 9 */
      min-height: 1px; /* to trigger hasLayout in IE7 */
    }
    /* hide from IE5/Mac \*/
    * html #content {height: 1px;}
    * html #wrapper {overflow-y: hidden;}
    * html #contentbg {
      height: 100em;
    }
    /* end hide */
    </style>
    </head>
    <body>
    
    <div id="wrapper">
    <div id="content">
    
    <p>This technique works in IE7, Firefox, Safari, Opera 9+. (Opera 7.x and 8.x don't support the opacity property.) The workaround for IE5-6/Win works as long as you don't set a height on #wrapper.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec scelerisque 
    purus vitae wisi accumsan fringilla. Aliquam nibh elit, imperdiet eu, 
    scelerisque at, condimentum eget, leo. Nam dolor. Etiam rutrum. Nullam nulla 
    nibh, sollicitudin in, dictum ut, ullamcorper id, mauris. Aenean ultricies, 
    erat quis aliquet pellentesque, sapien nulla posuere nunc, sed tincidunt wisi 
    wisi id quam. Donec magna ante, pellentesque eu, posuere sed, ultrices sed, 
    velit. Sed id velit. Quisque sollicitudin lacus a ante. Etiam aliquam. Nulla 
    vitae lectus. Mauris ante neque, blandit id, vehicula nec, iaculis vitae, wisi. 
    Mauris quis elit sed quam interdum sollicitudin. Curabitur congue egestas 
    velit. Nulla feugiat placerat felis. Praesent felis tellus, rutrum et, faucibus 
    eget, sagittis non, ligula. Fusce porta, lorem at convallis vehicula, arcu eros 
    egestas tellus, in bibendum ante metus vel nisl. Sed erat nulla, vulputate vel, 
    fermentum et, feugiat nec, eros. Pellentesque augue tortor, rutrum eu, mattis 
    id, ornare vitae, sapien.</p>
    
    <p>Fusce convallis, odio eu commodo ornare, risus wisi scelerisque lectus, non 
    feugiat sem turpis sit amet velit. Donec a mauris vitae diam mollis dapibus. 
    Donec dignissim ultrices tellus. Curabitur sagittis dictum turpis. Integer 
    accumsan wisi. Proin sodales pellentesque nibh. Nunc ultrices, libero sit amet 
    aliquet egestas, dui wisi vehicula purus, ac ornare pede erat eu arcu. Nunc nec 
    lacus posuere enim sodales luctus. Praesent vitae neque. In wisi nibh, sodales 
    blandit, egestas eu, ultrices at, est. Suspendisse ullamcorper tincidunt 
    sapien. Aliquam ac nisl vitae eros cursus aliquam.</p>
    </div>
    <div id="contentbg">
    </div>
    </div>
    
    </body>
    </html>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I ended up doing that. One solid color div with no background on top of the opacity layer; It was the only solution.
    I can't believe I ate the whole thing


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •