sample transparency w/ selection color?

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ivowel@gmail.com
    #1

    sample transparency w/ selection color?


    Dear Experts: I am trying to write a css style that makes text [a]
    invisible; [b] visible-when-selected (so that at least a visible block
    appears over the selected text---like black foreground over black
    background with 50% opacity to make it gray and shine through what is
    behind it). Similarly, I want to be able to shows links as blocks
    (like red on red with opacity 20%).

    I am trying firefox 1.5.0.9 and konqueror 3.5.5. I presume the latter
    is so non-compliant that I may as well not bother. Alas, I thought the
    former was pretty decent. yet, I can get my text to be invisible, but
    it does not become visible when selected. (cursor changes, so I know I
    am selecting. I can also change the opacity level to 0.2 to illustrate
    this.) I am enclosing a short example.

    Is there a standard way to make this work, preferably under both
    firefox and IE, at least latest versions? help appreciated. I have
    been pulling my hair out for 3 days now trying to make this work.

    sincerely, /ivo welch


    <html>
    <style type="text/css">
    a { color:red; background-color:blue; opacity:0.9; }
    p.invisible { font-size:18; opacity:0.0; foreground-color:blue;
    background-color:white; font-family:arial; }
    ::-moz-selection { background:red; color:red; opacity:0.5; }
    ::selection { background:red; color:red; opacity:0.5; }
    </style>

    <body bgcolor="cyan">
    <div style="width:50 1px; height:203px; background-color:yellow"</div>
    <!-- yellow is just an example; this would more usually be a n image
    file -->
    <p class="invisibl e" style="position :absolute; top:43px;
    left:72px">This is an example of some text</a>
    <p class="invisibl e" style="position :absolute; top:84px;
    left:72px">Will <a href="http://www.omnipage.co m">Omnipage</aever be
    able to parse this?</a>
    </body>
    </html>

    Tags: None
    • Ben C
      #2
      Re: sample transparency w/ selection color?

      On 2006-12-27, ivowel@gmail.co m <ivowel@gmail.c omwrote:
      >
      Dear Experts: I am trying to write a css style that makes text [a]
      invisible; [b] visible-when-selected (so that at least a visible block
      appears over the selected text---like black foreground over black
      background with 50% opacity to make it gray and shine through what is
      behind it). Similarly, I want to be able to shows links as blocks
      (like red on red with opacity 20%).
      >
      I am trying firefox 1.5.0.9 and konqueror 3.5.5. I presume the latter
      is so non-compliant that I may as well not bother.
      Its compliance is pretty good, but it doesn't support opacity which you
      need for this test.

      Surprisingly it does seem to support ::selection. Both that and opacity
      are from CSS 3. Most of us are still on CSS 2.1.
      Alas, I thought the former was pretty decent. yet, I can get my text
      to be invisible, but it does not become visible when selected.
      It goes to background and foreground colours both red, which it looks
      like it should (Firefox 1.5).
      (cursor changes, so I know I am selecting. I can also change the
      opacity level to 0.2 to illustrate this.) I am enclosing a short
      example.
      I had to fix a couple of things in your example: you should use </pto
      close <p>, not </a>, and you should put the <stylein a <headelement.

      If I add a::selection and a::-moz-selection to the styles, those are
      applied by Konqueror to the <awhen it's selected, so I can give it a
      sensible foreground colour and make the text visible, which I think is
      the effect you want. This doesn't work properly in Firefox.
      Is there a standard way to make this work, preferably under both
      firefox and IE, at least latest versions?
      All this is CSS 3 which is skating on thin ice. No standard exists for
      CSS 3. Even CSS 2.1 isn't a standard (only a "draft specification" or
      something), but in practice it's fairly well-supported and also a pretty
      thorough and unambiguous spec to work to.

      CSS 2.1 has no concept of "selection" , on my machine the selection is
      styled according to my desktop settings, not even browser configuration.

        Comment

        • ivowel@gmail.com
          #3
          Re: sample transparency w/ selection color?


          dear Ben: thank you for the advice. yes, my html code was pretty
          lousy. alas, if I understand you right, the current state of affairs
          means that I don't stand a chance to make this work for now in either
          firefox (missing selection support) or konqueror (missing transparency
          support). I have to find a machine with IE 7 next to try out if it
          could work there. sigh...I thought I would never want to use IE again,
          but if it has both opacity and selection support, this would work.

          Alternatively, I guess I will try placing the image atop the text next.
          maybe I will get luckier this way. don't see many other choices...

          regards

          /iaw


          Ben C wrote:
          On 2006-12-27, ivowel@gmail.co m <ivowel@gmail.c omwrote:

          Dear Experts: I am trying to write a css style that makes text [a]
          invisible; [b] visible-when-selected (so that at least a visible block
          appears over the selected text---like black foreground over black
          background with 50% opacity to make it gray and shine through what is
          behind it). Similarly, I want to be able to shows links as blocks
          (like red on red with opacity 20%).

          I am trying firefox 1.5.0.9 and konqueror 3.5.5. I presume the latter
          is so non-compliant that I may as well not bother.
          >
          Its compliance is pretty good, but it doesn't support opacity which you
          need for this test.
          >
          Surprisingly it does seem to support ::selection. Both that and opacity
          are from CSS 3. Most of us are still on CSS 2.1.
          >
          Alas, I thought the former was pretty decent. yet, I can get my text
          to be invisible, but it does not become visible when selected.
          >
          It goes to background and foreground colours both red, which it looks
          like it should (Firefox 1.5).
          >
          (cursor changes, so I know I am selecting. I can also change the
          opacity level to 0.2 to illustrate this.) I am enclosing a short
          example.
          >
          I had to fix a couple of things in your example: you should use </pto
          close <p>, not </a>, and you should put the <stylein a <headelement.
          >
          If I add a::selection and a::-moz-selection to the styles, those are
          applied by Konqueror to the <awhen it's selected, so I can give it a
          sensible foreground colour and make the text visible, which I think is
          the effect you want. This doesn't work properly in Firefox.
          >
          Is there a standard way to make this work, preferably under both
          firefox and IE, at least latest versions?
          >
          All this is CSS 3 which is skating on thin ice. No standard exists for
          CSS 3. Even CSS 2.1 isn't a standard (only a "draft specification" or
          something), but in practice it's fairly well-supported and also a pretty
          thorough and unambiguous spec to work to.
          >
          CSS 2.1 has no concept of "selection" , on my machine the selection is
          styled according to my desktop settings, not even browser configuration.

            Comment

            Previous template Next
            Working...