Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem: Making Text Transparent

    I'm on a social networking site that allows you to use HTML/CSS in your profiles(but not javascript), I'm looking to have my profile look empty but have a div that starts in the top left corner, and covers the entire page, I've no problem making this div. However, I want text to be in it that div that can only be viewed when highlighted(I want to be all ninja like)

    I cant simply set the text to the same color as the background of the site because the profile will have different things on it(like a profile picture, navigational links, etc) which i want my text to cover but still be invisible.

    I dont really care about the functionality of any of the navigational links(the site has the option to simply make the page appear blank, and remove them, but like i said, i want to be a ninja and have my text regular sized but transparent)

  • #2
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've successfully make the text transparent using:
    Code:
    <table style="opacity:0.01;-moz-opacity:0.01;filter:alpha(opacity=1);">
    <tr><td><font size="150px">IM REALLY A NINJA</font></td></tr></table>
    however, this makes it so that when you highlight it, instead of getting a white highlight with black text(site has a black background and white text) the highlight is also invisible


    is there any way to get a "regular highlight" when highlighting the text?

  • #3
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    something JS would likely be required to fix which doesn't help you , i've never heard of a way of modifying text highlighting through just css.

    unless i misunderstand - why can't you just style specific text to be the same colour as the background?
    Last edited by met; 11-21-2009 at 11:08 AM.

  • #4
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Like i said, I'll be laying it over top of everything else on the page which includes my profile picture


    The picture is obviously not a solid color, and therefore it'd be impossible to style the text(even letter by letter) to make it transparent on the page.

  • #5
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    I'm not sure if I'm interpreting your requirements exactly but here goes:

    You have a div with content in it, and you want to add text that is invisible until the area has focus or is hovered over.

    So why not use an absolutely positioned anchor (href="#") inside the div and place your text in that then give the link and visted states a negative margin of -999px but not the hover, focus and active states.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #6
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your input donkey, thats not exactly what i want to try and do, but if all else fails i'll probably do that.


    To try and clarify what i want, if you highlight this text on this page(like you were going to copy it with CTRL+C or something) you will see that the text turns white and it has a blue background.

    I want the text to be invisible

    I've successfully accomplished making it invisible using

    Code:
    <table style="opacity:0.01;-moz-opacity:0.01;filter:alpha(opacity=1);">
    <tr><td><font size="150px">This font appears transparent because of the opacity</font></td></tr></table>

    The issue lies with when you highlight the transparent text, the blue background is also transparent and will not show up

    I'm looking for an HTML or CSS code that i can place on the page that will change the colors that it makes text/background to something visible(even the original colors will work) when someone clicks and drags over the text

  • #7
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    361
    Thanks
    9
    Thanked 53 Times in 52 Posts
    Do not know whether there is any browsers which support CSS pseudo :clickanddrag but I know very well about :hover...

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Phinney View Post
    i want to be a ninja and have my text regular sized but transparent)
    Per CSS3 Color, you can use color: transparent to make the color of text transparent. I think there's still poor support for that, but that would be the correct way to do it. It's supported in Mozilla Firefox 3.5.5, at least.

    Quote Originally Posted by Phinney View Post
    I've successfully accomplished making it invisible using

    Code:
    <table style="opacity:0.01;-moz-opacity:0.01;filter:alpha(opacity=1);">
    <tr><td><font size="150px">This font appears transparent because of the opacity</font></td></tr></table>
    You're making the entire element and all of its background content invisible that way though. If you're going to do that, I would, at least, get specific and target the font element.

    Also note that -moz-opacity is obsolete; I believe the CSS3 opacity property has been supported since Mozilla Firefox 1.0 was released.

    I think filter: alpha(opacity=1) is also technically scripting. It triggers a script warning for me in WIE8 anyway. It should also preferably be -ms-filter: "alpha(opacity=1)" although that's only supported in WIE8.

    Additionally, 150px is an invalid value for size (which takes an integer value), that one-cell table is used incorrectly, and font elements shouldn't be used. Also seems a bit odd to use four elements where one would suffice.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the size 150 is in pixels, which does make the font size bigger on the site,(instead of just using the numbers 1-7) kinda like in CSS where you can define how big a div is based on pixel size.

    It works on the site, so i dont really need to change that.

    i noticed the -moz-opacity is useless and have removed it.

    As for the filter:alpha(oacity=0.01) thing, that is allowed, and required on the site because simply putting just "opacity:0.01;" will not make it work in Internet Explorer.

    I have also tried writting CSS for the font to simply make it invisible by taking the the two codes that make the table invisible and putting it into CSS with the class ".text" and using <span class="text"> around the text i want to be invisible and it didnt work.

    It would appear that without javascript im pretty much SOL for this

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Phinney View Post
    the size 150 is in pixels, which does make the font size bigger on the site,(instead of just using the numbers 1-7) kinda like in CSS where you can define how big a div is based on pixel size.

    It works on the site, so i dont really need to change that.
    I was just saying that this was wrong according to the HTML 4.01 spec. If you want to set the font size I would recommend using CSS instead. I believe you can map the numbers to values via CSS as well: font[size="7"] { font-size: 150px; } (although you shouldn't use this element in the first place; p would have been a better choice).

    Quote Originally Posted by Phinney View Post
    I have also tried writting CSS for the font to simply make it invisible by taking the the two codes that make the table invisible and putting it into CSS with the class ".text" and using <span class="text"> around the text i want to be invisible and it didnt work.
    I tried your original code and it didn't work in Fx3.5 or WIE8. I created a demo (shown below) and your technique doesn't appear to work since you can't see the selected text.

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.01//EN">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Demo</title>
    <style type="text/css" media="all">
    	p { color: transparent; }
    	li + li p { opacity: 0.01; -ms-filter: "alpha(opacity=1)"; }
    </style>
    <ol>
    	<li><p>This is some invisible text via <code>color: transparent;</code>.</p></li>
    	<li><p>This is some invisible text via <code>opacity: 0.01; -ms-filter: "alpha(opacity=1)";</code>.</p></li>
    </ol>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #11
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thats kind of the point, i dont want people to see it...unless they highlight it...


    to recap:


    I cant just make the font the same color as the background, because there will be a picture behind it aswell

    The text has to be invisible, but i cannot simply use "display:hidden" in CSS because that would make it simply not appear on the page.

    When you Highlight the text, i want it to show up the same as if you were to highlight normal text.

    I cannot use Javascript





    I tested your method by simply placing the whole thing into the page, all it does is make the text black, which when layered over something that isnt black, makes it so you see the text
    Last edited by Phinney; 11-23-2009 at 10:30 AM.

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Phinney View Post
    thats kind of the point, i dont want people to see it...unless they highlight it...
    When I said that it didn't work, I meant that when I highlighted the text in Fx3.5 and WIE8 the text was still invisible when using your opacity-based method. Apparently, I missed the part where you, yourself, mentioned that your code doesn't work.

    Quote Originally Posted by Phinney View Post
    I tested your method by simply placing the whole thing into the page, all it does is make the text black, which when layered over something that isnt black, makes it so you see the text
    The code was not meant to be pasted in its entirety into another page (if that's what you did).

    Try making a separate HTML file and pasting my code into it. * You'll see that the first example does what you want in browsers where supported (such as Fx3.5, Opera 10.1, and Google Chrome 4) and doesn't in the second example. I was under the impression that your idea worked when I wrote it and I was demonstrating that it didn't with the second part of the demo, but, as mentioned above, I now realize my mistake in that regard.

    * It appears there's an error in my code; the first selector should be li:first-child p. The error is that both p elements have color: transparent applied; only the first element should have this applied.

    Below is some revised code. I was playing around with the selection pseudo-element to see if I could make the opacity-based method work, but apparently that's not workable.

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.01//EN">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Demo</title>
    <style type="text/css" media="all">
    	* { margin: 0; }
    	html { background: white; color: black; font: 18px sans-serif; }
    	li { margin: 1em; border: 1px dashed silver; }
    	li:first-child p { color: transparent; }
    	li + li p { opacity: 0.01; -ms-filter: "alpha(opacity=1)"; }
    	p::-moz-selection { color: black; background: lime; opacity: 1; }
    	p::selection { color: black; background: lime; opacity: 1; }
    	code::-moz-selection { color: red; background: black; opacity: 1; }
    	code::selection { background: black; color: red; opacity: 1; }
    </style>
    <ol>
    	<li><p>This is some invisible text via <code>color: transparent;</code>.</p></li>
    	<li><p>This is some invisible text via <code>opacity: 0.01; -ms-filter: "alpha(opacity=1)";</code>.</p></li>
    </ol>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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