I know ya’ll were just thinking to yourselves: man, I hope Chris posts some super nerdy article today with some nearly-useless technique that if I talked about in public would clinch the fact that I’m not getting laid anytime soon. Don’t worry, I got your back! Check out the CSS Secret Message Generator.
Using it is (I hope) fairly straightforward. You click some letters, then those are the letters which secretly reveal themselves when the text is selected.
There are a few interesting things worth touching on, so we’ll do that in this article.
The Big Idea
The empowering concept here is the fact that you can change the text selection color (and background-color) in modern browsers. WebKit and Chrome use ::selection { } and Mozilla uses ::-moz-selection { }.
In our example we wrap every single letter of a big block of text in a <span>. Then we have a little UI system for marking individual letters. All that does is toggle a specific class name on those spans. Non-marked spans have a color and background-color of white, which means they effectively disappear when selected. The marked spans change color. So when the whole block is highlighted, the secretly marked letters reveal themselves.
For the record, there is really not reason it’s laid out in a grid, other than it’s just kinda easier to click the letters and it looks more secret-message-y.
jQuery
Like about everything fancy we do around here, it uses jQuery. I’m not gonna do a code-dump. If you want to see the the whole thing, it’s only 85 lines fully commented.
I’ve done a couple of other grid-clicky things in the past and one thing I’ve always wanted to figure out (but never could) was a click-and-drag way to toggle cells. A way finally dawned on me…
I bound a “mousedown” event to the grid itself. When that fires, set some data to indicate that the mouse is currently down. Conversely, on “mouseup”, set that data to indicate the mouse is now up. Useless by itself, but then we can attach a “mouseenter” event to all the cells. If the mouse is “down” when that hover event happens, do the same toggling that would happen with a click. At the moment this only works for turning on cells (not mass-erasing), but it could probably be tweaked to do that too.
$("#grid")
// clicking on a cell toggles the selected state in the grid and the demo
.delegate("span", "click", function() {
// get the first class only (the position), otherwise would fail when it has that plus "selected"
attrTest = $(this).attr("class").split(" ")[0];
$(this).toggleClass("selected");
$("#secret-message ." + attrTest).toggleClass("selected");
})
// if the mouse is currently pressed, set some data so we can check for that
.bind("mousedown", function() {
$(this).data("mouseIsDown", true)
})
// when the mouse comes back up, change data to say so
.bind("mouseup", function() {
$(this).data("mouseIsDown", false)
})
// allows the "drawing by dragging"...
.delegate("span", "mouseenter", function() {
// which is only allowed while the mouse is pressed down
if ($("#grid").data("mouseIsDown")) {
attrTest = $(this).attr("class");
$(this).addClass("selected");
$("#secret-message ." + attrTest).toggleClass("selected");
}
});
WebKit doesn’t allow “none” backgrounds for text selection?
For the grid, because of the click-and-drag ability, I wanted to turn off highlighting in that area entirely (it’s just annoying while you are trying to “draw”). I set the text selection color the standard way, for both rendering engines. Firefox respects it, Opera respects it, but neither of the big WebKit browsers will.
#grid-area ::-moz-selection { background: none; } /* Works */
#grid-area ::selection { background: none; } /* Doesn't Work */
This may be some kind of bad-usability-prevention thing on WebKit’s part, but it seems more like a bug to me. If I specifically write CSS to eliminate background coloring on text selection, that’s what I want.
That’s really cool! Maybe simplify it for a CAPTHCA? Reveal a forgotten password?
I realized how deep my Geekdom runs when I saw this and got excited…
me too -.-
me three!! You are not alone.
OMG… yea.. im 100% geek.
http://geeksuite.net check that out too!
Awesome work man :)
It seems completely useless to me, although someone might find it usefull…
Funny. Can’t really think of a real world use case, but funny nonetheless.
As for the WebKit selection background, background:transparent; should work fine. It does for me anyway.
that was my thought. it’s never occurred to me to set a background to “none”
Verified:
background: transparent; works fine!
if you examine the state of the cell you’re on, on mousedown, you can set a toggle ‘direction’; so you can change whether you’re setting cells on drag, or whether you’re unsetting cells on drag. I just did something very similar to your toggle a few weeks ago (for a dwarf fortress thing.) I can provide some code if you want. :) ( Mine evolved a bit further to provide for line and rectangle drawing with rubberbanding, which suited my purposes. )
Sweet!
I’m assuming it can be used (without the selection part) to hide email-addresses from bots/spiders/crawlers.
background: transparent works in safari and firefox for text selection… not sure about opera or chrome.
Wow, awesome dude. Really nice CSS generator :)
Don’t let anyone ever tell you you’re a geek! I literally squealed with joy. Hell, I just had a fight with my partner, and used this to write him a message as an apology.
…I might be a geek. Maybe.
I don’t really get what it does. I click the letters on the right and they go black, but nothing else happens…
It’s working. Mu-hah-hah-ha.
This would be really cool for hidden ASCII art.
I didn’t understand at first…
But I’ll admit, I’m getting geeky over this one.
super code
this is so horrifying :)
Chris, I think you just gave thousands of geeks all over the world a way to propose to their girlfriends!
Oh wait — they don’t have girlfriends… never mind. :)
I have a girlfriend … honest!
It’s looks cool…
Defo a bit crazy but like people who push boundaries even if sometimes it is just for the sake of it.
awesome idea man!
@Louis: I even got married :-P
Similar concept also at:
http://blog.ph-creative.com/demos/hidden-message.html
http://blog.ph-creative.com/post/CSS-Trick-Hidden-Messages.aspx
Damn, I guess I’m not getting laid tonight…
Check this out in actual use on a faux-website for a movie.
http://www.naturebirthgracemovie.com/
Roll over “mother” in the first paragraph, The letters that turn red spell out the tagline, “Love undying”.
OMG this is so amazing :)
That’s really cool and I’ve already thought of some really cool applications for that.
I’ve found a small bug in the demo though. On the Click ‘n Drag square if you drag the mouse, leave the square, release the mouse and the come back into the square – the letters keep being highlighted inspite you don’t hold the mouse button.
This is either from the way Webkit handles mousedown event or the way you disable the selection mode.