TextDepth: 3D-text with only HTML and CSS!
This demo uses a jQuery plug-in to create a 3D effect on the text.
Download file:
Enter text below to create dynamic 3D text :P
This demo uses a jQuery plug-in to create a 3D effect on the text.
Download file:
Enter text below to create dynamic 3D text :P
This plugin creates a 3D text with a css layered illusion.
What it does is that it creates copies of the text in the selected div, colors it with either the default color (#c7c7c7), or the color selected when the plug-in is initiated.
The default depth of this text is 3, the default depth of the text to the left (the big vertical header), is 7.
Plugin use:
$('.foo').textDepth({
wrapper: "body",
shade_color: "#6f6f6f",
depth: 7,
direction: "downRight",
extra_classes: "sidebarText"
});
The above would apply 3D effects to an element that is attached to the body with a shadow going in the down right direction. We also add a class to the shadow called sidebarText.
| Option | Default | Comment |
|---|---|---|
| depth | 3 | The size/depth of the shadow |
| wrapper | "body" | The wrapper to which the shade will be attached (should be the wrapper of the element) |
| shade_color | "#c7c7c7" | The color of the shading |
| gradient | true | If true, the shading will fade out. |
| extra_classes | "" | These classes will be added to the shading elements. Separated by space(" ") |
| direction | "downRight" | The direction of the fading. There are 8 directions (in string form):
|