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:

 

   $('#shadow-bottom').longShadow({

       colorShadow: '#FFFF84',

       sizeShadow: 40,

       directionShadow: 'bottom-left'

   });

 

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:

                     <span class= "shadow-demo" id="shadow-bottom">S</span>

                    <span class= "shadow-demo" id="shadow-bottom2">H</span>

                    <span class= "shadow-demo" id="shadow-bottom3">A</span>

                    <span class= "shadow-demo" id="shadow-bottom4">D</span>

                    <span class= "shadow-demo" id="shadow-bottom5">O</span>

                    <span class= "shadow-demo" id="shadow-bottom6">W</span>

 

The <style> section:

.shadow-demo {

  color: #7D7D00;

  font-family: Verdana;

  font-size: 105px;

  margin:5px;

}

 

The jQuery code:

 

  $('#shadow-bottom').longShadow({

    colorShadow: '#FFFF84',

    sizeShadow: 40,

    directionShadow: 'bottom-left'

});

$('#shadow-bottom2').longShadow({

  colorShadow: '#E88EB7',

  sizeShadow: 30,

  directionShadow: 'bottom-right'

});

$('#shadow-bottom3').longShadow({

 colorShadow: '#FFCB97',

 sizeShadow: 30,

 directionShadow: 'top-right'

});

$('#shadow-bottom4').longShadow({

   colorShadow: '#FFE6E6',

   sizeShadow: 45,

   directionShadow: 'top'

});

$('#shadow-bottom5').longShadow({

 colorShadow: '#CAFFCA',

 sizeShadow: 20,

 directionShadow: 'left'

});

$('#shadow-bottom6').longShadow({

 colorShadow: '#FFFF84',

 sizeShadow: 90,

 directionShadow: 'right'

});

 

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:

<style>

.shadow-demo { padding: 0 }

&nbsp;

.shadow-demo li { display: inline-block }

&nbsp;

.shadow-demo li>figure {

&nbsp; display: inline-block;

&nbsp; text-align: center;

&nbsp; width: 120px;

&nbsp; height: 120px;

&nbsp; border: 1px solid transparent;

&nbsp; border-radius: 20px;

&nbsp; margin: 5px;

&nbsp; overflow: hidden

}

&nbsp;

.shadow-demo li:nth-child(1) figure { background-color: #FF2828 }

&nbsp;

.shadow-demo li:nth-child(2) figure { background-color: #D1A3A3 }

&nbsp;

.shadow-demo li:nth-child(3) figure { background-color: #C4C4C4 }

&nbsp;

.shadow-demo li:nth-child(4) figure { background-color: #B8DCDC }

&nbsp;

.shadow-demo li:nth-child(5) figure { background-color: #B0B0FF }

&nbsp;

.shadow-demo li:nth-child(6) figure { background-color: #FFB9DC }

&nbsp;

.shadow-demo span {

&nbsp; color: #FFB7B7;

&nbsp; font-family: serif;

&nbsp; font-size: 91px;

&nbsp; line-height: 1.2;

&nbsp; font-weight: 700;

&nbsp; text-transform: uppercase

}

</style>

 

The markup section:

                                                      <ul class="shadow-demo">

                                                                <li>

                                                                                <figure><span id="shadow1">S</span></figure>

                                                                </li>

                                                                <li>

                                                                                <figure><span id="shadow2">H</span></figure>

                                                                </li>

                                                                <li>

                                                                                <figure><span id="shadow3">A</span></figure>

                                                                </li>

                                                                <li>

                                                                                <figure><span id="shadow4">D</span></figure>

                                                                </li>

                                                                <li>

                                                                                <figure><span id="shadow5">O</span></figure>

                                                                </li>                      

                                                           <li>

                                                                                <figure><span id="shadow6">W</span></figure>

                                                                </li>                                                                                                                                                                                                                                                                      

                                                       </ul>

 

The JavaScript:

<script>

$(function() {

 $('#shadow1').longShadow({

    colorShadow: '#9D0000',

    directionShadow: 'bottom-left',

    sizeShadow: 50

});

$('#shadow2').longShadow({

 colorShadow: '#804040',

 sizeShadow: 30,

 directionShadow: 'bottom-right'

});

 $('#shadow3').longShadow({

 colorShadow: '#4F4F4F',

 sizeShadow: 10,

 directionShadow: 'top-left'

});

$('#shadow4').longShadow({

  colorShadow: '#408080',

  sizeShadow: 20,

  directionShadow: 'bottom'

});

$('#shadow5').longShadow({

   colorShadow: '#000066',

   sizeShadow: 20,

   directionShadow: 'top-left'

});                          

$('#shadow6').longShadow({

  colorShadow: '#4F0027',

  sizeShadow: 10,

  directionShadow: 'top-right'

  });                                                                                                                                                                                                                          

});

</script>