CSS 3 long shadow text by using jQuery: 3 demos

The CSS 3 shadow and jQuery

The CSS 3 shadow property can be used for creating shadows of text in your web pages. In CSS 3 text-shadow property, you have to specify the horizontal and vertical shadows along with optional blur and color options. For example:

CSS text shadow

See online demo and code

In this tutorial, a jQuery plug-in is used for creating long text shadows. See the following demos online along with how you may set up this plug-in for using in your web projects.

A demo of creating long text shadow

In this demo, a letter “S” is used for creating a long shadow by using the jquery.longShadow plug-in. For that, a few CSS properties are used along with setting option for the long shadow in the jQuery code. Have a look which is followed by how you may set up this:

jQuery shadow long

 

See online demo and code

First of all, get the jQuery long shadow plug-in from GitHub website here. Download the package and get the jquery.longShadow.js file or view source the demo page.

You need to place jQuery and plug-in JS file above the </body> section.

<script src=”http://code.jquery.com/jquery-1.12.1.min.js”></script>

<script src=”js/longShadow/jquery.longShadow.js”></script>

After placing these file, write the jQuery code with options for shadow. In the demo, I used colorShadow, sizeShadow and directionShadow options with the following values:

 

 

So, you may specify the shadow size with an integer value. Similarly, color can be HEX, a color name or an RGB value. The direction of shadow is also flexible, use different combinations or simple direction.

Get the complete code in the demo page.

A demo of using different directions and colors

For showing you how you may use different colors and directions, in this demo, a word is used which is contained in <span> tags.  Each letter of the word “SHADOW” is given a different shadow color and direction. For example, bottom-left, bottom-right, top-right, top etc. Along with this, each letter is given a different shadow size.

jQuery shadow direct

See online demo and code

Following is the markup used:

 

The <style> section:

 

The jQuery code:

 

 

A demo with better presentation

In above example, I used the word “shadow” roughly just to explain how different directions and shadow size works. In this example, the word is presented in a better way by using this nice plug-in for long shadows.

Query shadow demo

See online demo and code

The following style is used in the example:

 

The markup section:

 

The JavaScript: