Kode for All – by Don Burks
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.
I pushed it one step further and made this one:
(function($) {
$.fn.threed = function(a,c,c2) {
var shad=”;
var stringc=(c).toString(16);
var stringc2=(c2).toString(16);
var r=parseInt((stringc[0]+stringc[1]),16),g=parseInt((stringc[2]+stringc[3]),16),b=parseInt((stringc[4]+stringc[5]),16);
var r2=parseInt((stringc2[0]+stringc2[1]),16),g2=parseInt((stringc2[2]+stringc2[3]),16),b2=parseInt((stringc2[4]+stringc2[5]),16);
var rstep= ((r2-r)/a);
var gstep= ((g2-g)/a);
var bstep= ((b2-b)/a);
for(var i=0;i0 && i<a){shad+=', ';}
shad+="0 "+i+"px 0 rgb("+Math.floor(r+rstep*i)+","+Math.floor(g+gstep*i)+","+Math.floor(b+bstep*i)+")";
}
shad+=', 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)';
$(this).css({'text-shadow': shad});
};
})(jQuery);
You can define the depth the starting and ending color like this:
$('.foo').threed(5,0×333333,0×999999);
The big shadow is still the same.