Umbrify v1.0

Features

• Wicked-easy light source selection
• Target elements with CSS selectors
• Depth, diffusion, spread and color controls
• Use multiple sets of drop/inset shadows
• Simple implementation
• Redraws shadows after window resize
• Works in Firefox 3.6+, Safari, Chrome, and IE9
• Tiny (only 4k)

---

Also by Studio Tom

Studio Tom - Art, Design, and Web Development Address Book vCard Reader

more to come soon...

---

um•bra

[uhm-bruh] – noun

1. shade; shadow.
2. the invariable or characteristic accompaniment or companion of a person or thing.

Origin: 1590–1600;  

Latin:  shade, shadow

---

Resources

jQuery

Pure, Dynamic Box-Shadow Awesomeness

Umbrify is a free jQuery/CSS3-based plug-in script designed to dynamically render a unique global-lighting effect. Simple controls allow you to easily pick your light source (or use the default top-center), change the automatically-generated shadows' color, diffusion, depth, etc., and add multiple sets of shadows. Implementation is a breeze. Retrofitting even a finished, dynamic site is as easy as dropping in the script and setting your preferences.

Here's how to get started:

• and decompress it
• Add the .js files to your scripts folder (or wherever...)
• Copy and paste this into the head of your HTML page
  (after stylesheets, and inserting the actual file path)
  <script type="text/javascript" src="[file path]/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="[file path]/umbrify.js"></script>
• Open umbrify.js in the editor of your choice, and set your controls (editable sections are indicated)

Donations are accepted, suggestions considered, and comments—well, you've seen what people write in forums... Enjoy!

Tom Virgin
tom@studio-tom.com