When Populous 3: The Beginning was still new and awesome, I got inspired by every little part of it. Even the main menu had a nice touch; your mouse emits light and the text in the menu casted shadows which adjusted their positions based on the position of your mouse. Gave the menu a sense of depth.

So, now it´s 2010 and we have the techniques to remake this effect using CSS3 thanks to the box-shadow and text-shadow properties!

1. Understanding box-shadow and text-shadow

These new CSS3 properties allow you to create blurred duplicates of the element you add this property to. The syntax for box-shadow goes like this:

1
2

/* box-shadow: Xoffset Yoffset Radius Color; */
box-shadow: 1px 1px 2px #000000;

Why doesn’t this work for me!?

Don’t worry! Not all browsers officially support this property since CSS3 is still not publicly released. Thankfully there are alternative CSS properties for a few browsers:

1
2
3

-moz-box-shadow: 1px 1px 2px #000000;  /* Mozilla Firefox */
-webkit-box-shadow: 1px 1px 2px #000000;  /* Webkit-based browsers (Apple Safari, Google Chrome) */
box-shadow: 1px 1px 2px #000000;  /* Official property declaration */

It’s exactly the same for text-shadow:
The syntax for box-shadow goes like this:

1
2

/* text-shadow: Xoffset Yoffset Radius Color; */
text-shadow: 1px 1px 2px #000000;

It even works with border-radius, giving you a smooth blur behind a smooth element!

2. Including jQuery and mk-shadow.js

You’ll need jQuery (a popular javascript framework) to use mk-shadow.js. It’s easy to include in your page and is hosted by Google. Put this piece of code between the head tags of your page:

1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

For the sake of ease, I created a JS file you just have to include in your page between the head tags using something like:

1

<script src="js/mk-shadow.js" type="text/javascript"></script>

Basically, what mk-shadow.js does is read the page you included the script in and create shadows for all elements with the class mk-shadow and text shadows for elements with the class mk-shadow-text.

3. Adjusting mk-shadow.js

You may adjust the script itself by editing the few variables in the top of the .js file:

1
2
3
4
5
6
7
8
9
10
11
12
13

var updateTime = '50';                   // shadows' update time in ms
 
// BOX SHADOW SETTINGS
var boxShadowRadius  = '10';             // how many pixels the shadow is blurred
var boxShadowColor   = '#000000';        // color of the shadow
var boxShadowMultiplierX = '1';          // multiplier for the shadow's horizontal position
var boxShadowMultiplierY = '1';          // multiplier for the shadow's vertical position
 
// TEXT SHADOW SETTINGS
var textShadowRadius  = '5';             // how many pixels the box shadow is blurred
var textShadowColor   = '#000000';       // color of the box shadow
var textShadowMultiplierX = '1';         // multiplier for the shadow's horizontal position
var textShadowMultiplierY = '1';         // multiplier for the shadow's vertical position

4. Applying to elements

It’s very easy to add this effect to any element using the classes mk-shadow for box shadows and mk-shadow-text for text shadows:

1
2

<div class="mk-shadow">Testing dynamic box-shadow</div>
<span class="mk-shadow-text">Testing dynamic text-shadow</span>

5. Working example

Here you can see a working example using mk-shadow.js. Another one with a light image that follows your mouse to strengthen the effect.

6. Compatibility

Tested and working with:

• Mozilla Firefox 3.6.4
• Apple Safari 5.0
• Google Chrome 5.0.375.70
• Opera 10.54

7. Download mk-shadow.js

Download mk-shadow.js