sample transparency w/ selection color?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

ivowel@gmail.com - 27 Dec 2006 02:27 GMT

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:501px; height:203px; background-color:yellow"> </div>

<p class="invisible" style="position:absolute; top:43px;
left:72px">This is an example of some text</a>
<p class="invisible" style="position:absolute; top:84px;
left:72px">Will <a href="http://www.omnipage.com">Omnipage</a> ever be
able to parse this?</a>
</body>
</html>

Reply to this Message

Ben C - 27 Dec 2006 10:56 GMT

> 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
[quoted text clipped - 5 lines]
> 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 </p> to
close <p>, not </a>, and you should put the <style> in a <head> element.

If I add a::selection and a::-moz-selection to the styles, those are
applied by Konqueror to the <a> when 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.

Reply to this Message

ivowel@gmail.com - 28 Dec 2006 00:53 GMT

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

> > 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
[quoted text clipped - 40 lines]
> CSS 2.1 has no concept of "selection", on my machine the selection is
> styled according to my desktop settings, not even browser configuration.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / December 2006

sample transparency w/ selection color?