Grow your CSS skills. Land your dream job.

Make a “Secret Message” with CSS Positioning and Transparency

Published by Chris Coyier

Reader Brian left a comment recently with what I thought was a really cool idea:

I was thinking it might be neat to have a floating div with the random letters of half a secret message, with the other half of the letters in a background image or something so you’d have to scroll down to exactly the right point in order to reveal the full message.

Here is how I went about it. This technique uses just simple transparent images and CSS positioning.

Photoshop together your final message.
I included a little "scroll down" message so people would know what to do in my example.
completemessage.png

Split apart the letters that will be "fixed" on the screen.
I used a simple layer mask to cover half the letters. Remember to turn off the white background layer and then export this a GIF or PNG so you get the transparency.
fixedletters.png

Here is what the layer mask looked like for mine.
layermask.png

Export the other letters.
Now you should be able to just reverse your layer mask (select it and press Command-I in Photoshop) and get the opposite letters separated. Again, turn off the background layer and export as a GIF or PNG.
scroll-letters.gif

Create the DIV's in your HTML
There are probably a couple different ways to do this, this is just how I thought to do it at first. You could probably give unique ID's to straight up img elements and accomplish the same thing.

<div id="fixed-letters">
</div>

<div id="scroll-letters">
</div>

The fixed letters get fixed positioning, and the letters that scroll get relative positioning.
Here is the CSS:

#fixed-letters {
	position: fixed;
	top: 200px;
	left: 100px;
	background: url(images/fixed-letters.gif) white no-repeat;
	width: 500px;
	height: 125px;
}

#scroll-letters {
	position: relative;
	top: 1200px;
	left: 100px;
	background: url(images/scroll-letters.gif) top center no-repeat;
	width: 500px;
	height: 825px;
}

Here is what it does:
secretmessageinaction.gif

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]
(Photoshop file included)

Comments

  1. As Ne As
    Permalink to comment#

    Yes, that’s pretty cool. But actually what is the real point of this in a practical use?

  2. Is there a use for this in down-to-business, suit-and-tie, nine-to-five web design? Maybe not. Does that mean it’s completely useless? Absolutely not.

    It’s just a quickie little tip for your bag o’ css tricks.

    You could use this same technique with images of animals and have it scroll through crazy animal combinations.

    You could make a whole matrix of text so you could have to scroll around really carefully to find the secret message.

    You could have a movie spoiler page that used this technique to line up letters that made the spoiler.

    Heck, you make a whole trail of little web clues that reveal themselves in different ways and use it to propose to your girlfriend!

    Point is, sometimes these little techniques I post aren’t a new way to do rounded corners or to do CSS image replaces for SEO purposes, or any other “practical” use. They are just for fun and to give you ideas to stay creative.

  3. Yeah agree. Kewl but a bit pointless but its a good idea and I am sure someone will someday use it.

    In defense to Chris, we need to know of these silly and at time pointless ideas as you just never know what a client will ask for next!

  4. Permalink to comment#

    No real point in this, but it still doesn’t stop it from being cool. I’m sure someone will find a marketing gimmick use for this someday.

  5. Permalink to comment#

    I have to admit, that is pretty cool!

  6. Permalink to comment#

    that is a very cool trick I don’t think I’m going to use it with text but with picture probably.
    if I use it you can wait for a link.

  7. @orm: Cool! I can’t wait to see it. I also thought doing a whole paragraph of text with it would be cool.

  8. Boppes

    Maybe it could be used as a new captcha technique. Scroll down to see the password, type the word in the fieldset et voila -> you’re not a robot.

  9. I remember Mad Magazine used to have these a picture on the back that could be folded in to create a funny picture. Something similar could be done with this creative CSS web trick.

  10. Aneesha
    Permalink to comment#

    this is cool

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