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:
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:
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.
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.
See online demo and code
The following style is used in the example:
<style> .shadow-demo { padding: 0 } .shadow-demo li { display: inline-block } .shadow-demo li>figure { display: inline-block; text-align: center; width: 120px; height: 120px; border: 1px solid transparent; border-radius: 20px; margin: 5px; overflow: hidden } .shadow-demo li:nth-child(1) figure { background-color: #FF2828 } .shadow-demo li:nth-child(2) figure { background-color: #D1A3A3 } .shadow-demo li:nth-child(3) figure { background-color: #C4C4C4 } .shadow-demo li:nth-child(4) figure { background-color: #B8DCDC } .shadow-demo li:nth-child(5) figure { background-color: #B0B0FF } .shadow-demo li:nth-child(6) figure { background-color: #FFB9DC } .shadow-demo span { color: #FFB7B7; font-family: serif; font-size: 91px; line-height: 1.2; font-weight: 700; 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>