Making Text 3D

As I do frequently, I check out a lot of posts from various tech blogs to see what I can learn. I came across this post when I was searching for knowledge, and I realized (as I do frequently), that I could use this in about 847 places. That usually works out to only ever getting used once or twice, but the inspiration is there. And the root of any useful bit of code is inspiration. So, I decided to make a quick little jquery plugin to be able to make any bit of arbitrary text three-dimensional.

So, the CSS to do this is this:

h1 {
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
}

Obviously, this reduces well down to a single line of jQuery.

$(this).css({ 'text-shadow': '0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15)'});

And as that is all that our plugin is going to be doing, let’s wrap it in the proper constructs to make it pluginized.

(function($) {
    $.fn.threed = function() {
        $(this).css({ 'text-shadow': '0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15)'});
    };
})(jQuery);

And then all we have to do to make text on our page 3D is to make one simple call after we’ve loaded jQuery.

$("p").threed();

Yeah, that’s it. We have to call it ‘threed’ instead of ’3d’ because we can’t start a function name with a number.

I’ve put a demo up. Download the source, the minified, or the whole enchilada.