Create A 3D Text Effect Using jQuery And CSS Shadows - dropFont

One of the best ways to improve your typography and attract more attention to your content is by using drop shadows. Drop shadows are mostly used in print design but they are just as useful on the web. 

During this tutorial, I'll show you how to create a simple, configurable, and animated 3D text effect with a simple API. We'll use CSS shadow property and a little bit of jQuery to create the illusion of 3D text by giving it depth and a realistic drop shadow.

The cool thing about this is that there're no images involved; everything is done by CSS, which makes it even better. It  also works in older browsers like Internet Explorer.

How to use it:

1. Download and inert the dropFont.js after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dropFont.js"></script>

2. Initialize the plugin on the text and specify the shadow offset:

<h1>jQueryScript!</h1>

$(function(){
  $("h1").dropFont(20);
});

3. Apply a smooth animation to the drop shadow:

var i = 1;
var dropHeight = 20;
function animateDrop() {
  setTimeout(function() {
    $("h1").dropFont(i);
    i++;
    if (i < dropHeight)
      animateDrop();
  }, 25)
}
animateDrop();

4. Set the color of the shadow:

:root {
  --drop-color: #E572B2;
}

---

This awesome jQuery plugin is developed by w0o0o. For more Advanced Usages, please check the demo page or visit the official website.