Text Shadow 1.0

Created Friday 17th of October 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)

Please have a look at the "Other Resources" for bug reports or further help on jQuery. Do not post bug reports or feature requests as comments to unrelated articles. If bug reporting on bugtracker.a-framework.org fails, e-mail me.

What it Does

Frankly a rather crappy text-shadow plug-in (can one be done well? :) but nevertheless it does the job in some cases.

How to Use

jQuery('h2').textShadow(); would give every h2 a shadow.

Example

I should have a shadow.

Example Code

HTML

<div id="jquery-text-shadow-example">
<
p>I should have a shadow.</p>
</
div>

JS

jQuery('#jquery-text-shadow-example p').textShadow();

Source Code

jQuery.fn.textShadow = function () {
    return 
this.each(function () {
        var 
el = $(this);

        
el.html('<span class="jquery-text-shadow-text">' el.html() + '</span>').css('position''relative');
        
jQuery('<span class="jquery-text-shadow">' el.text() + '</span>').appendTo(el);
    });
};

Download

Plug-in

Requires

Random jQuery Plug-ins

  • Form to Link

    Run this plug-in on a form or an input[type=submit] and it will insert a link after the element you run it on which, on click, will submit said form.

    Details

  • Center

    This little pluggy centers an element on the screen using either fixed or absolute positioning. Can be used to display messages, pop up images etc.

    Details

  • Pixastic Editor

    This app/plug-in inserts a (completely stylable) toolbar next to any image in your document that allows the user to apply different Pixastic-effects ...

    Details

More Plug-ins

Recent Comments

  1. Andreas on "SleekPHP User Handling"

    Thank you for showing interest :) Were the docs en...

  2. ciptard on "SleekPHP User Handling"

    Ok, thank you

  3. Andreas on "SleekPHP User Handling"

    I might write a "getting started" article for Slee...