[thelist] CSS transparency question

[Jay Turley]

Wow, Barney, you're taking my CSS to a whole new level. Thanks for those
specifications; that looks like it will solve my problem.

On Thu, Sep 10, 2009 at 12:24 AM, Barney Carroll
<barney.carroll at gmail.com>wrote:

> All the contents of seethrough will appear 90% opaque according to these
> styles. You're telling one of the children to appear completely opaque, but
> it already is by default (and so is its sibling) — they're just inside a
> slightly transparent container.
>
> What you need to do is:
>
> .seethrough * {
>   opacity: 0.9;
>   -moz-opacity: 0.9;
>   filter: alpha(opacity=90);
> }
>
> .seethrough * *,
> .opaque {
>    opacity: 1.0;
>   -moz-opacity: 1.0;
>   filter: alpha(opacity=100);
> }
>
> This will give the transparent properties to all the immediate children of
> the container, with the second rule meaning that all the
> further descendants, and anything with the opaque class applied, will keep
> full opacity. No need to change the HTML using this method.
>
> Barney Carroll
>
> barney.carroll at gmail.com
> 07594 506 381
>
>
> 2009/9/10 Jenni Beard <jenni at theweblotus.com>
>
> > Can you upload at least a screenshot to better illustrate what you're
> > doing?
> >
> > Jenni
> >
> > -----Original Message-----
> > From: thelist-bounces at lists.evolt.org
> > [mailto:thelist-bounces at lists.evolt.org] On Behalf Of Jay Turley
> > Sent: Wednesday, September 09, 2009 7:04 PM
> > To: thelist at lists.evolt.org
> > Subject: [thelist] CSS transparency question
> >
> > Hi all-
> >
> > I have a design I am having trouble implementing (and sorry, no URL, so
> > this
> > will have to be a conceptual question). There is a toolbar which floats
> > over
> > an image, and the toolbar is slightly transparent, enough to reveal what
> is
> > underneath it. The designer wants a portion of the toolbar to be opaque.
> >
> > The html is essentially:
> >
> > <div class="content">
> >    <p>Image stuff resides in this area.</p>
> >    <div id="toolbar" class="seethrough">
> >         <div class="opaque">
> >            <p>This content should be opaque.</p>
> >        </div>         <div>
> >            <p>This content inherits transparency.</p>
> >        </div>
> >    </div>
> > </div>
> >
> > The pertinent CSS looks like:
> >
> > .seethrough {
> >    opacity: 0.9;
> >    -moz-opacity: 0.9;
> >    filter: alpha(opacity=90);
> > }
> >
> > I naively tried this:
> >
> > .opaque {
> >     opacity: 1.0;
> >    -moz-opacity: 1.0;
> >    filter: alpha(opacity=100);
> > }
> >
> > but it didn't work.
> >
> > Any ideas on how this can be done?
> >
> > Thanks!
> >
> > -Jay
> > --
> >
> > * * Please support the community that supports you.  * *
> > http://evolt.org/help_support_evolt/
> >
> > For unsubscribe and other options, including the Tip Harvester
> > and archives of thelist go to: http://lists.evolt.org
> > Workers of the Web, evolt !
> >
> > --
> >
> > * * Please support the community that supports you.  * *
> > http://evolt.org/help_support_evolt/
> >
> > For unsubscribe and other options, including the Tip Harvester
> > and archives of thelist go to: http://lists.evolt.org
> > Workers of the Web, evolt !
> >
> --
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>