homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS Spoiler tag

WebmasterWorld Senior Member 10+ Year Member

Msg#: 4537418 posted 1:21 pm on Jan 19, 2013 (gmt 0)

Is there any way to blur text so indicate it's a spoiler, using CSS, that will display the same across major browsers?
This is what I'm using:

.spoiler {
display: inline-block;
text-decoration: none;
color: transparent;
text-shadow: 0px 0px 5px #000000;
text-shadow: 0px 0px 0px #000000;

It looks right in FF, but in IE and on my mobile phone all I get is blank white spaces, which only displays the text on highlighting.

What I'm not sure is if CSS is the right solution. It ought to be, but it's just so inconsistent in its implementation.



WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4537418 posted 9:30 pm on Jan 19, 2013 (gmt 0)

The first thing that jumped out at me was {color: transparent;}. In CSS2 this wasn't allowed (only backgrounds could be transparent) even though it works in most browsers and is fine in 3. See what happens if you comment-out this line.

The second thing to jump out was :hover. Techically this group of pseudo-classes only work with interactive elements-- things like <a> that do something when you click on them. This doesn't seem to have changed between 2 and 3. What kind of element will the "spoiler" class be attached to?

Of course there's the javascript option, but then you lose the users with scripting turned off.

:: detour to w3c ::

Oh joy, CSS3 has added a "currentColor" keyword. This will be a big help. (Sorry. Nothing to do with your question, but had to spread the word. Now, if only someone could find the single page that links to all current CSS3 drafts...)


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4537418 posted 10:44 pm on Jan 19, 2013 (gmt 0)

Microsoft only added text-shadow starting with IE10. IE is always years behind any other browser.


WebmasterWorld Senior Member 10+ Year Member

Msg#: 4537418 posted 12:06 pm on Jan 20, 2013 (gmt 0)

Thanks Lucy and Dr Howard. I'm thinking of putting it in a <span>. I tried the anchor tag and commenting out the [color: transparent], but no joy on both counts.

I guess that leaves Javascript, or detecting the browser and serving up something different according to what's being used. Either way, yuck.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved