How to Create a CSS3 3D Text Plugin for jQuery

We’re going to make life a little easier with a jQuery plugin. It will do the hard work and generate long-winded CSS3 code such as:

text-shadow:
	-1px 1px 0 #ddd,
	-2px 2px 0 #c8c8c8,
	-3px 3px 0 #ccc,
	-4px 4px 0 #b8b8b8,
	-4px 4px 0 #bbb,
	0px 1px 1px rgba(0,0,0,.4),
	0px 2px 2px rgba(0,0,0,.3),
	-1px 3px 3px rgba(0,0,0,.2),
	-1px 5px 5px rgba(0,0,0,.1),
	-2px 8px 8px rgba(0,0,0,.1),
	-2px 13px 13px rgba(0,0,0,.1)
	;

 

How to Use the Plugin

jQuery and the plugin should be included on your page — ideally just before the closing </body> tag, e.g.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="jquery.text3d.js"></script>

To apply a default 3D effect, set a class of “text3d” to any HTML element, e.g.

<p class="text3d">3D Text</p>

Alternatively, you can specify custom 3D effects for any number of elements in JavaScript, e.g.

<script>
$("#custom").text3d({
	depth: 6,
	angle: 135,
	color: "#aaa",
	lighten: -0.1,
	shadowDepth: 30,
	shadowAngle: 45,
	shadowOpacity: 0.2
});
</script>

Where:

• depth is the number of pixels for the 3D extrusion
• angle is the 3D extrude angle, i.e. 90 is vertically downward
• color is the 3D extrusion color
• lighten is the difference in color between the top and bottom of the extrusion, e.g. -0.1 means the color will darken by 10%
• shadowDepth is the approximate number of pixels the shadow extends from the text
• shadowAngle is the angle at which the shadow falls
• shadowOpacity is the initial opacity between 0 (no shadow) and 1 (dark black). Note that multiple shadows overlay one another so you’ll rarely need a number greater than 0.4.

The jQuery Plugin Code

Our JavaScript template will be familiar to anyone who has written or used a jQuery plugin:

(function($) {

	// jQuery plugin definition
	$.fn.text3d = function(opts) {
	
		// default configuration
		var config = $.extend({}, {
			depth: 5,
			angle: 100,
			color: "#ddd",
			lighten: -0.15,
			shadowDepth: 10,
			shadowAngle: 80,
			shadowOpacity: 0.3
		}, opts);
		
		// to radians
		config.angle = config.angle * Math.PI / 180;
		config.shadowAngle = config.shadowAngle * Math.PI / 180;
		
		// ... main code ...
		
		// initialization
		this.each(function() {
			TextShadow(this);
		});

		return this;
	};

})(jQuery);

The config object is defined with a set of default properties which can be overridden. angle and shadowAngle assume degrees so these are converted to radians. Each HTML element within the jQuery selector is passed to a TextShadow() function…

// create text shadow
function TextShadow(e) {

	var s = "", i, f, x, y, c;
	
	// 3D effect
	for (i = 1; i <= config.depth; i++) {
		x = Math.round(Math.cos(config.angle) * i);
		y = Math.round(Math.sin(config.angle) * i);
		c = ColorLuminance(config.color, (i-1)/(config.depth-1)*config.lighten);
		s += x+"px "+y+"px 0 "+c+",";
	}
	
	// shadow
	for (f = 1, i = 1; f <= config.shadowDepth; i++) {
		f = f+i;
		x = Math.round(Math.cos(config.shadowAngle) * f);
		y = Math.round(Math.sin(config.shadowAngle) * f);
		c = config.shadowOpacity - ((config.shadowOpacity - 0.1) * i/config.shadowDepth);
		s += x+"px "+y+"px "+f+"px rgba(0,0,0,"+c+"),";
	}
	
	e.style.textShadow = s.substr(0, s.length-1);		
}

The function builds a text-shadow string using the defined parameters and applies it to the current element. Note that the 3D extrusion colors are generated using a ColorLuminance() function.

Finally, the following code is included at the end of our plugin file to apply the default 3D effect to all elements with the “text3d” class.

Source Link: http://www.sitepoint.com/css3-3d-text-jquery-plugin/