Re: Making Site Opaque -- This Strategy Feasible?

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Prisoner at War
    #1

    Re: Making Site Opaque -- This Strategy Feasible?

    On Apr 26, 5:19 pm, Ben C <spams...@spam. eggswrote:
    >
    >
    <SNIP>
    >
    You can also use the CSS 3 opacity property on a div with a background
    colour. Although opacity is CSS 3 it's pretty widely supported.
    >
    If you do it with opacity, just something like this:
    >
    function step()
    {
    opacity += tick;
    if (opacity >= 1.0)
    {
    opacity = 1.0;
    clearInterval(t imer);
    }
    veil.style.opac ity = opacity;
    >
    }
    >
    var veil = document.getEle mentById("veil" );
    var opacity = 0.0;
    var tick = 32.0 / (2.0 * 1000); // two second fade
    var timer = setInterval(ste p, 32);
    >
    I haven't tested this so it's probably full of errors, but you get the
    idea.
    >
    Just put some text on top of the veil. If you use opacity bear in mind
    that it affects an element and all its descendents, so you'll be able to
    see through the text as well. If you want the text opaque but on a
    semi-opaque background the text will have to be in a non-descendent
    element (probably a sibling, and they're probably both absolutely
    positioned).
    >
    CSS 3 also lets you set rgba background colours which enable you to have
    a semi-opaque background (using the "a" or alpha component) with an
    opaque foreground without needing to create an extra element, but I'm
    not sure that's so widely supported.
    Super!! It will take me a while to digest your idea, though...and in
    the meantime, may I ask: how about utilizing any CSS 2.x methods?
    And, first of all, really -- is your script or pseudo-code there
    JavaScript or CSS or both?? Sorry, I'm really not sure where one
    stops and the other begins...they'r e so hand-in-hand, after all!

    Thanks again!!
    Tags: None
    • Nik Coughlin
      #2
      Re: Making Site Opaque -- This Strategy Feasible?

      "Prisoner at War" <prisoner_at_wa r@yahoo.comwrot e in message
      news:cc08e79b-4e1e-4ae5-a370-3e54cafa7c3b@p2 5g2000hsf.googl egroups.com...
      On Apr 26, 5:19 pm, Ben C <spams...@spam. eggswrote:
      >>
      >You can also use the CSS 3 opacity property on a div with a background
      >colour. Although opacity is CSS 3 it's pretty widely supported.
      >>
      >If you do it with opacity, just something like this:
      >>
      >function step()
      >{
      > opacity += tick;
      > if (opacity >= 1.0)
      > {
      > opacity = 1.0;
      > clearInterval(t imer);
      > }
      > veil.style.opac ity = opacity;
      >>
      >}
      >>
      >var veil = document.getEle mentById("veil" );
      >var opacity = 0.0;
      >var tick = 32.0 / (2.0 * 1000); // two second fade
      >var timer = setInterval(ste p, 32);
      >>
      >I haven't tested this so it's probably full of errors, but you get the
      >idea.
      >>
      >Just put some text on top of the veil. If you use opacity bear in mind
      >that it affects an element and all its descendents, so you'll be able to
      >see through the text as well. If you want the text opaque but on a
      >semi-opaque background the text will have to be in a non-descendent
      >element (probably a sibling, and they're probably both absolutely
      >positioned).
      >>
      >CSS 3 also lets you set rgba background colours which enable you to have
      >a semi-opaque background (using the "a" or alpha component) with an
      >opaque foreground without needing to create an extra element, but I'm
      >not sure that's so widely supported.
      >
      Super!! It will take me a while to digest your idea, though...and in
      the meantime, may I ask: how about utilizing any CSS 2.x methods?
      And, first of all, really -- is your script or pseudo-code there
      JavaScript or CSS or both?? Sorry, I'm really not sure where one
      stops and the other begins...they'r e so hand-in-hand, after all!
      That code above is JavaScript but it works by changing the style (CSS)
      property of an object representing the HTML element with id="veil".

      It doesn't matter that it's CSS 3. All the major browsers support opacity.
      IE of course implements it differently, although I think newer versions get
      it right, but don't quote me on that. One way of handling both (could be
      improved somewhat but works):

      function setOpacity( id, opacity ) {
      var targetStyle = document.getEle mentById( id ).style;
      targetStyle.opa city = (opacity / 100);
      targetStyle.fil ter = "alpha(opacity= " + opacity + ")";
      }

        Comment

        • Ben C
          #3
          Re: Making Site Opaque -- This Strategy Feasible?

          On 2008-04-26, Nik Coughlin <nrkn.com@gmail .comwrote:
          "Prisoner at War" <prisoner_at_wa r@yahoo.comwrot e in message
          [...]
          It doesn't matter that it's CSS 3. All the major browsers support opacity.
          IE of course implements it differently, although I think newer versions get
          it right, but don't quote me on that.
          Opera gets it slightly wrong too, but it doesn't show until you start
          nesting opacity contexts.

          Here is an obscure example:
          http://www.tidraso.co.uk/misc/opacityContexts.html


          Firefox gets it right (according to the CSS 3 draft), Opera doesn't.

            Comment

            • Holger Jeromin
              #4
              Re: Making Site Opaque -- This Strategy Feasible?

              Ben C schrieb am 27.04.2008 12:23:
              On 2008-04-26, Nik Coughlin <nrkn.com@gmail .comwrote:
              >"Prisoner at War" <prisoner_at_wa r@yahoo.comwrot e in message
              [...]
              >It doesn't matter that it's CSS 3. All the major browsers support opacity.
              >IE of course implements it differently, although I think newer versions get
              >it right, but don't quote me on that.
              >
              Opera gets it slightly wrong too, but it doesn't show until you start
              nesting opacity contexts.
              >
              Here is an obscure example:
              http://www.tidraso.co.uk/misc/opacityContexts.html

              >
              Firefox gets it right (according to the CSS 3 draft), Opera doesn't.
              FF2 does it here exactly the same way like opera 9.2 and 9.5 beta.

              --
              Mit freundlichen Grüßen
              Holger Jeromin

                Comment

                • Ben C
                  #5
                  Re: Making Site Opaque -- This Strategy Feasible?

                  On 2008-04-28, Holger Jeromin <news03_2008@ka tur.dewrote:
                  Ben C schrieb am 27.04.2008 12:23:
                  >On 2008-04-26, Nik Coughlin <nrkn.com@gmail .comwrote:
                  >>"Prisoner at War" <prisoner_at_wa r@yahoo.comwrot e in message
                  >[...]
                  >>It doesn't matter that it's CSS 3. All the major browsers support opacity.
                  >>IE of course implements it differently, although I think newer versions get
                  >>it right, but don't quote me on that.
                  >>
                  >Opera gets it slightly wrong too, but it doesn't show until you start
                  >nesting opacity contexts.
                  >>
                  >Here is an obscure example:
                  >http://www.tidraso.co.uk/misc/opacityContexts.html
                  >>
                  >Firefox gets it right (according to the CSS 3 draft), Opera doesn't.
                  >
                  FF2 does it here exactly the same way like opera 9.2 and 9.5 beta.
                  Are you sure? I have Opera 9.25 on GNU/Linux and it gets it wrong.

                  You need to look quite closely. Here is an illustration based on a
                  screenshot of Opera:

                  http://www.tidraso.co.uk/misc/opacityContexts.png


                  I have labelled three of the rectangles F, G and H.

                  G should not be visible through H although F should be. This is because
                  CSS 3 says "Conceptual ly, after the element (including its children) is
                  rendered into an RGBA offscreen image, the opacity setting specifies how
                  to blend the offscreen rendering into the current composite rendering".
                  (http://www.w3.org/TR/css3-color/#transparency)

                  So it should look as though H were first rendered on top of G in an
                  offscreen image. In that rendering operation, bits of G will be obscured
                  completely by H. Then the result is blended on top of F, meaning in the
                  final result you should be able to see F through H but not G through H.

                  Opera looks like it's just given each element an alpha value equal to
                  the product of its ancestors' opacities and blended the whole lot
                  together.

                    Comment

                    • Holger Jeromin
                      #6
                      Re: Making Site Opaque -- This Strategy Feasible?

                      Ben C schrieb am 28.04.2008 09:44:
                      On 2008-04-28, Holger Jeromin <news03_2008@ka tur.dewrote:
                      >Ben C schrieb am 27.04.2008 12:23:
                      >>On 2008-04-26, Nik Coughlin <nrkn.com@gmail .comwrote:
                      >>>"Prisoner at War" <prisoner_at_wa r@yahoo.comwrot e in message
                      >>[...]
                      >>>It doesn't matter that it's CSS 3. All the major browsers support opacity.
                      >>>IE of course implements it differently, although I think newer versions get
                      >>>it right, but don't quote me on that.
                      >>Opera gets it slightly wrong too, but it doesn't show until you start
                      >>nesting opacity contexts.
                      >>Here is an obscure example:
                      >>http://www.tidraso.co.uk/misc/opacityContexts.html
                      >>Firefox gets it right (according to the CSS 3 draft), Opera doesn't.
                      >FF2 does it here exactly the same way like opera 9.2 and 9.5 beta.
                      Are you sure? I have Opera 9.25 on GNU/Linux and it gets it wrong.
                      You need to look quite closely. Here is an illustration based on a
                      screenshot of Opera:
                      >
                      http://www.tidraso.co.uk/misc/opacityContexts.png

                      >
                      I have labelled three of the rectangles F, G and H.
                      >
                      G should not be visible through H although F should be. This is because
                      CSS 3 says "Conceptual ly, after the element (including its children) is
                      rendered into an RGBA offscreen image, the opacity setting specifies how
                      to blend the offscreen rendering into the current composite rendering".
                      (http://www.w3.org/TR/css3-color/#transparency)
                      >
                      So it should look as though H were first rendered on top of G in an
                      offscreen image. In that rendering operation, bits of G will be obscured
                      completely by H. Then the result is blended on top of F, meaning in the
                      final result you should be able to see F through H but not G through H.
                      >
                      Opera looks like it's just given each element an alpha value equal to
                      the product of its ancestors' opacities and blended the whole lot
                      together.
                      Sorry, you were right. I did not recognised this little piece :-) :-)

                      --
                      Mit freundlichen Grüßen
                      Holger Jeromin

                        Comment

                        Previous template Next
                        Working...