CSS3 3D Text Plugin for jQuery
3D text in CSS3 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) ;
note: Is this wise?
Our jQuery plugin uses JavaScript to apply a CSS3 style. You’d normally avoid doing that since it’s be slower and, without JavaScript, the user won’t see the effect.
However, the 3D is unlikely to be essential and the plugin will save a significant number of development hours. If you still feel dirty, copy the generated text-shadow property from Firebug into your static CSS file. Head over to the plugin demonstration page to view examples and download below the code.
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: Demo | Download