Grow your CSS skills. Land your dream job.

CSS Secret Message Generator

Published by Chris Coyier

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.

Comments

  1. Permalink to comment#

    That’s really cool! Maybe simplify it for a CAPTHCA? Reveal a forgotten password?

  2. I realized how deep my Geekdom runs when I saw this and got excited…

  3. Awesome work man :)

  4. Permalink to comment#

    It seems completely useless to me, although someone might find it usefull…

  5. 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.

  6. 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. )

  7. Jesper
    Permalink to comment#

    Sweet!

    I’m assuming it can be used (without the selection part) to hide email-addresses from bots/spiders/crawlers.

  8. blue642
    Permalink to comment#

    background: transparent works in safari and firefox for text selection… not sure about opera or chrome.

  9. Wow, awesome dude. Really nice CSS generator :)

  10. 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.

  11. SimpleJack
    Permalink to comment#

    I don’t really get what it does. I click the letters on the right and they go black, but nothing else happens…

  12. This would be really cool for hidden ASCII art.

  13. I didn’t understand at first…
    But I’ll admit, I’m getting geeky over this one.

  14. super code

  15. lush
    Permalink to comment#

    this is so horrifying :)

  16. 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. :)

  17. Oliver
    Permalink to comment#

    I have a girlfriend … honest!

  18. It’s looks cool…

  19. Defo a bit crazy but like people who push boundaries even if sometimes it is just for the sake of it.

  20. Tuxonic
    Permalink to comment#

    awesome idea man!

    @Louis: I even got married :-P

  21. Chris
    Permalink to comment#

    Damn, I guess I’m not getting laid tonight…

  22. 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”.

  23. Permalink to comment#

    OMG this is so amazing :)

  24. 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.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".