If you are a web developer, or any kind of code wrangler, please take a minute out of your day to read what follows. I don’t usually write article of a political nature, but as a web developer this really hits close to home and I would never want this to happen to me.

Imagine you create software for a client. You do a good job, you are proud of your work, and you put your name and contact info in the heading of the code’s comments. I’ve done it many times with both code that I have been paid for as well as stuff I open-source and share with the community. If you are a web developer (or any type of developer for that matter) you probably have done the same thing. Who would have thought you could be sentenced to death for it?

This is the story of a man named Saeed Malekpour, a man from Iran who lived in Canada until recently. He apparently created software that can be used to upload photos to a website. When he went back to Iran in 2008 to visit his sick father, he was arrested because that software he created was used on a pornographic website. The Iranian government also accused Saeed with designing pornographic websites and “insulting Islam” (the government tortured him and extract a forced confession of these crimes, according to a letter Saeed wrote in prison). This week, Saeed was sentenced to death. Even if these accusations were true (which I don’t think they are), why on Earth would that be considered a capital crime?

I look at his situation, and I think of all the software I have ever written and released on to clients or open sourced on this blog. After I release the software, I have no say on what people do with it. I look at Saeed’s situation, and think that if I was Iranian, this could be me. If you are a computer programmer of any description, imagine this being you.

Saeed doesn’t have a lot of time, so I ask anyone who reads my blog, especially those in the web development community, please help this cause by visiting this page or filling out this online petition to Canadian Prime Minister Stephen Harper. You can also publicize the official Campaign for Release of Saeed Malekpour to whatever social network(s) you belong to. Doing so may raise awareness on this issue and hopefully help Saeed off of death row and back home where he belongs.

Further Reading

• Iran Executions: Saeed Malekpour with an radio interview of Saeed Malekpour’s wife Fatima on CBC’s The Current
• Protests spread as GTA man faces execution in Iran – by Olivia Ward, Toronto Star.
• Toronto-area man faces death in Iran prison, from CBC News
• Iran confirms death sentence for ‘porn site’ web programmer by Saeed Kamali Dehghan, The Guardian
• Web Developer Sentenced To Death In Iran posted on Slashdot

Progress Bars can be used to show users how long it will be until a high-traffic page, like a photo gallery, fully loads. Click on the image to see one in action. (Photos courtesy of Do Not Forsake Me Oh My Darling)

Caching Images.

Before we do anything, we need to know how to cache images. Developers have been using the DOM Level 0 Image() object to cache images since almost the beginning of JavaScript’s history. Basically it involves creating a new Image() object, and then setting the src to be URL of the image.

var im = new Image();
im.src = "http://www.useragentman.com/images/zoltFront.jpg";

Back in the 1990′s, this technique was used a lot to cache images involved in animation of hover states. A good example of this is on the old Netcom Canada website circa 1997 (available today thanks to the magic of The Way Back Machine). If you mouseover any of the navigation links in the header, you’ll see the image button change in appearance. In order for this animation to happen as soon as the user hovers over the links, the page must cache all the hover-state images, so that the user doesn’t see any flicker on-hover as the image is loading. Modern developers would use CSS sprites to do this, but back in the day, this was the only way to go.

But how can one use this technique to update a progress bar? The Image() object has a load event, so we can use that to increment a progress bar. To simplify this process, I have created a very simple JavaScript library, imageCache.js, that will cache an array of image URLs and fire off two events: one when each image is loaded, and one where the whole array is loaded. Image caching is as simple as this:

var s=["images/1.jpg", "images/2.jpg", "images/3.jpg"];
imageCache.pushArray(s, loadImageEvent, loadAllEvent);

loadImageEvent is a callback that is called every time an image is loaded, and loadAllEvent is called when all of the images are loaded.

Download imageCache.js from GitHub.

Using <progress> to Show When Each Image Has Loaded

In the image gallery example at the beginning of this article, we have 28 images that we want to load into cache before showing the content of the page. We also want a progress bar to show these images loading. In order to do this, we need to make two containers: one that holds the progress bar and one that holds the content:

<-- The Progress Bar Container -->
<div id="progressContainer">
    Loading: <br />
    <progress id="loader" max="28" value="0">
       <strong>Loaded <span id="value">0</span>/28</strong>
    </progress>
</div>

<-- The Content Container -->
<div id="content">
   <!-- this should contain the content for the rest of the site -->
</div>

You would then create a JavaScript snippit that would pre-cache all the images. What follows is an example that uses jQuery to do this, but since the imageCache.js library itself doesn’t need jQuery, feel free to use any framework you like (or lack of framework if you are “Teh Hardcorez“):

var dnfmomd = new function () {
   var me = this;

   var $loader,
       currentImage = 0;

   me.init = function () {

      var s = [];

      for (var i=1; i<=28; i++) {
         s.push('images/dnfmomd/' + i + '.jpg');
      }
      $loader = $('#loader');

      $loader.max = s.length;
      imageCache.pushArray(s, loadImageEvent, loadAllEvent);

   }

   function loadImageEvent() {
      val = parseInt($loader.attr('value'));
      val++;
      $loader.attr('value', val);
   }

   function loadAllEvent() {
      $('body').addClass('loaded');
      showImage(1, true);
   }

   ....

}

/*
 *  Use $(window).load() instead of $(document).ready() because we wan't to start caching images
 *  as soon as the progress bar images are loaded.
 */

$(window).load(dnfmomd.init)

Note that progress bar’s value is increased every time an image is loaded, and when all the images are loaded, we add the loaded class to the body. This will result in the progress bar disappearing and the content becoming visible, due to this CSS in the page:

  #content {
     display: none;
  }

  body.loaded #content {
     display: block;
  }

  body.loaded #progressContainer {
     display: none !important;
  }

Can We Show Other Things Loading in the Progress Bar Besides Images?

It is possible to show CSS and JavaScript in the progress bar using yepnope.js. It is a little bit more involved, but very doable (I have done it before), and I leave it as an exercise to the reader to do it. Post it below, and I’ll give you full geek-cred. If no one does it, I will probably take some time and publish an example in a few weeks, but I thought it would be neat to offer up a little challenge. :-)

Note:

The stylesheet for the polyfill was not included correctly when this post was first published, and as a result, the examples below were not showing up correctly on IE7-8 and Safari 5.1+. The problem has been corrected.

Screenshots of HTML5 progress bars with different styles applied. Details given below.

The HTML: Simple

The HTML for a Progress bar is dead simple:

<progress max="100" value="60">
  <strong>Progress: 60% done.</strong>
</progress>

Note that the HTML inside the <progress> tag is the fallback for browsers that do not support it. That, unfortunately, includes all versions of IE and Safari so far, as well older versions of Firefox (5.x and lower) and Opera (10.x and lower). Although the fallback is acceptable, we can go a step further and use Lea Verou’s excellent <progress> tag polyfill, which adds pretty much full-support for all of these browsers except for Safari 5 and lower (so you should always put in the fallback HTML just to be on the safe side). Let’s take a look at these screenshots to see what how <progress> looks across the browserverse:

	Windows 7	Windows XP	Mac OS X	Ubuntu Linux
Firefox
Chrome
IE7+ (polyfill)		N/A
Safari 5.1+ (polyfill)				N/A
Opera

Note that:

• Firefox and Chrome will render the progress bar the same way that the host operating system would … except for Chrome for Linux, which uses it’s own custom style (thanks to Mounir Lamouri for correcting me on this exception).
• The color of the Opera progress value is always green (more on this later).
• The browsers that use the polyfill all render the progress bar with a nice bluish gradient effect

A progress bar can also have an “indeterminate” state, which happens when there is no value attribute.

<progress max="100">
  <strong>Progress: 60% done.</strong>
</progress>

This effect is used to show that the state of progress is currently unknown (e.g. how long it will take for a web server to initiate the download of a file if is generating it on the fly). How this looks varies from browser to browser as well.

	Windows 7	Windows XP	Mac OS X	Ubuntu Linux
Firefox
Chrome
IE7+ (polyfill)		N/A
Safari 5.1+ (polyfill)				N/A
Opera

Note that:

• Opera is the only browser that doesn’t distinguish between a progress bar with an indeterminate state and one with a value of zero.
• All of the other browsers (including the ones that use the polyfill) animate the indeterminate states. (I have opted to not show all the animations here to avoid readers getting seizures … I hear that would be a bad thing).

But I Want To Style Them My Way!

If you are particular in how you want your <progress> tags to look, the good news is that you can pretty much style them any way you want. You must, however, be aware about the browser quirks that can trip you up … and it isn’t all IE’s fault this time! Follow this three-to-four-step process, and you’ll be styling progress bars in your sleep in no time:

Step 1: Turn off default styling

The first step is to turn off the default styling in all browsers:

progress,          /* All HTML5 progress enabled browsers */
progress[role]     /* polyfill */
{

	/* Turns off styling - not usually needed, but good to know. */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;

	/* gets rid of default border in Firefox and Opera. */
	border: none;

	/* Needs to be in here for Safari polyfill so background images work as expected. */
	background-size: auto;

	/* Dimensions */
	width: 400px;
	height: 60px;

}

/* Polyfill */
progress[role]:after {
	background-image: none; /* removes default background from polyfill */
}

/* Ensure fallback text doesn't appear in polyfill */
progress[role] strong {
	display: none;
}

Simple stuff: remove the border and add a specific width and height. I added the second rule to remove the background image inserted by the polyfill’s stylesheet, but if you wanted, you can modify the polyfill’s stylesheet directly (or leave it out completely if you elect not to use the polyfill). The final rule is to ensure the polyfill doesn’t display the fallback content — it assumes that is always wrapped in a <strong> tag, so this may be something you should keep in mind when setting the default content (if you don’t like using a <strong> tag as a wrapper for your fallback content, use whatever tag you like).

Note that the appearance property (and its vendor-specific brethren) are there to turn off the default operating-system styling on the progress bar — it doesn’t seem like it is really necessary, but I put it here for reference in case it becomes mandatory in the future.

Step 2: The Progress Bar Background.

Now let’s change the background color of the progress bar to a light red.

progress,                          /* Firefox  */
progress[role][aria-valuenow] {    /* Polyfill */
   background: #ffeeee !important; /* !important is needed by the polyfill */
}

/* Chrome */
progress::-webkit-progress-bar {
    background: #ffeeee;
}

Notice that with Firefox and the polyfilled browsers, all you need to do is change the background of just the progress tag itself, while in Chrome (and I assume future versions of Safari) it is necessary to use the -webkit-progress-bar pseudo-element. Note that even though the code inside these rules are the same, you cannot put all of these selectors in one rule: doing so breaks Firefox and Opera (so much for degrading gracefully).

Step 3: The Progress Bar Value

Now let’s change the color of progress bar value to black. The CSS is a wee bit longer than it really should be:

/* Firefox */
progress::-moz-progress-bar {
    background: black;
}

/* Chrome */
progress::-webkit-progress-value {
    background: black;
}

/* Polyfill */
progress[aria-valuenow]:before  {
    background: black;
}

Yes, three rules to rule them all! Again, putting them all together in one selector breaks every browser on the planet (including the polyfilled ones), so we have to write three separate rules with the same CSS properties in them! <sarcasm>Yaaayyy!!!!</sarcasm>

Note that there is no way that I know of to style the progress bar value in Opera 11.52 and lower. It just stays the same green no matter what you do. :-( If anyone is reading this and knows otherwise, I would be indebted to you to let me know how.

Step 4: The Indeterminate Value

This part is optional, and I would only put these rules in if I know I’ll need a style for the indeterminate value (not all applications need it):

/* Firefox */
progress:not([value])::-moz-progress-bar {
  background-image:  url(../images/indeter.gif);
}

/* Chrome */
progress:not([value])::-webkit-progress-bar {
  background-image:  url(../images/indeter.gif);
}

/* Polyfill - IE */
progress[role]{
	background-image: url(../images/indeter.gif) !important;
}

/* Polyfill - Safari */
progress:not([value])  {
	background-image: url(../images/indeter.gif) !important;
	background-size: auto;  /* Needs to be in here for Safari */
}

It even works in Opera! Note that the background-size must be set to auto in order to override the default style in the polyfill. :-)

See the above CSS in action in a “clean room” page

That’s Too Basic! I Want Fancy-Pants™ Progress Bars

So, now that you know the basics, let’s take a look at some more complicated and interesting progress bars:

Two Image Effect

This progress bar uses two versions of the same image (one grey-scale, one color) to differentiate between the progress bar background and value:

See the above example in action in a “clean room” page

Gradients

Note that not only can you use background-colors and -images, but also use the variety of gradients that are available for developers today in supported browsers (this does not include IE9 and lower). To prove this, I took Chris Croyer beautiful <div> style progress bars from his blog post on CSS3 based progress bars and HTML5-ified™ them here:

Unfortunately, due to CSS gradients being implemented by the browser vendors using vendor-specific prefixes, the CSS tends to be a wee long. Here is the CSS of the first example (scroll the code to see the whole lot of it):

/*
 * Gradient Shadow
 */

/* All HTML5 progress enabled browsers */
progress.example3 {

	/* Turns off styling - not usually needed, but good to know. */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	/* gets rid of default border in Firefox and Opera. */
	border: solid #cccccc 5px;
	border-radius: 10px;
	/* Dimensions */
	width: 238px;
	height: 45px;
}

/* Polyfill */
progress.example3[role]:after {
	background-image: none; /* removes default background from polyfill */
}

/*
 * Background of the progress bar background
 */

/* Firefox and Polyfill */
progress.example3 {
	background: #cccccc !important; /* !important only needed in polyfill */
}

/* Chrome */
progress.example3::-webkit-progress-bar {
	background: #cccccc;
}

/*
 * Background of the progress bar value
 */

/* Firefox */
progress.example3::-moz-progress-bar {
	border-radius: 5px;
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(43,194,83) 37%,
		rgb(84,240,84) 69%
	);
}

/* Chrome */
progress.example3::-webkit-progress-value {
	border-radius: 5px;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(43,194,83)),
		color-stop(1, rgb(84,240,84))
	);
	background-image: -webkit-linear-gradient(
		center bottom,
		rgb(43,194,83) 37%,
		rgb(84,240,84) 69%
	);
}

/* Polyfill */
progress.example3[aria-valuenow]:before {
	border-radius: 5px;
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(43,194,83) 37%,
		rgb(84,240,84) 69%
	);
	background-image: -ms-linear-gradient(
		center bottom,
		rgb(43,194,83) 37%,
		rgb(84,240,84) 69%
	);
	background-image: -o-linear-gradient(
		center bottom,
		rgb(43,194,83) 37%,
		rgb(84,240,84) 69%
	);

}

Note that I did not use the Gradient filter to polyfill CSS3 gradients in IE6-9. This is because Visual Filters don’t work in CSS3 pseudo-elements like :before or :after. Oh well.

See the above CSS in action in a “clean room” page

Monkeys!

What blog post about HTML5 progress tags would be complete without monkeys? These simians appear in all browser except for IE8 and lower (as explained below).

Apologies to the great Banksy — it’s not his monkey but one grabbed from this Animated GIF site and converted into a CSS sprite using André Gil’s super-cool Gif2TileSet tool. I took this sprite and animated the monkey using blitting whenever the progress bar changes values (thanks to my friend and colleague Noel Tibbles for turning me on to this technique).

Note the HTML has an extra <div> tag so the monkey has a place to live:

<progress class="monkey" min="0" max="100" value="60"></progress>
<div class="after"></div>

I wish that I could have used :after (or ::after) rules instead, but these pseudo-elements don’t work with the progress tags in any browser that doesn’t use the polyfill. And no, :before doesn’t work either. I have no idea why it doesn’t work, but it’s a shame — using them would be perfect to get rid of the extra markup.

The CSS that makes the monkey animate when the progress bar changes values is here:

progress.monkey[value="0"] +  .after{
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif');
} 

progress.monkey[value^="1"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -77px ;
}

progress.monkey[value^="2"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -154px ;
}

progress.monkey[value^="3"] +  .after,
progress.monkey[value="100"] +  .after  {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -231px !important ;
}

progress.monkey[value^="4"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -308px ;
}

progress.monkey[value^="5"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -385px ;
}

progress.monkey[value^="6"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -462px ;
}

progress.monkey[value^="7"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -539px ;
}

progress.monkey[value^="8"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -616px ;
}

progress.monkey[value^="9"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -693px ;
}

Each of these rules are applied when the first digit changes in the progress bar, which is done using the ^= attribute rules. This works because the progress bar goes from 0 – 100 and the progress bar increments by 10. They monkeys don’t appear in IE8 and under because of it’s lack of support of the ^= attribute selector (but it works well in IE9).

Note that this would be much easier if CSS allowed us to combine the CSS3 calc() and attr() attributes together like Lea Verou dreams about in one of her blog posts:

/*
 * Don't try this - it doesn't work in any browser, but it would be nice if it did.
 */

progress.monkey::after {
   background-image: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif');
   background-position-x: 0;
   background-position-y: calc(-77 * attr(value), 'px');
}

Hopefully this will come to pass in the future.

See the above CSS in action in a “clean room” page

Speedometer

My last example is radically different than the others. How about we apply the speedometer metephor to the progress bar with some fancy-pants CSS3? This example in all browsers except IE8 and lower (due to lack of support for native CSS3 transform)

The CSS is similar to the monkey example in that I add an extra <div> after the progress tag, except that it has an image of a pointer inside of it.

<div id="progressContainer">
  <progress id="rot" class="example_r" min="0" max="100" value="60"></progress>
  <div data-arrow-for="rot" class="arrow"><img src="/blog/wp-content/uploads/2012/01/hand.png" /></div>
</div>

I wrapped both these tags inside a relatively positioned container <div>. This is so I could absolutely position both the progress bar and the arrow in order for them to line up properly. I make the progress bar into a semi-circle by using border-radius and part of a photo from Flickr user ‘listener42′ …

progress.example_r {

	/* gets rid of default border in Firefox and Opera. */
	border: solid 1px black;
	display: inline-block;

	/* Produces the semi-circle */
	border-radius: 238px 238px 0 0;

	/* Dimensions */
	width: 238px;
	height: 126px;
	padding: 0;
}

… and make the arrow rotate as the progress bar increments by using CSS transforms:

progress.example_r[value="0"] + .arrow {
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
}

progress.example_r[value^="1"]:not([value="1"]):not([value="100"]) + .arrow {
	-moz-transform: rotate(288deg);
	-webkit-transform: rotate(288deg);
	-o-transform: rotate(288deg);
	-ms-transform: rotate(288deg);
}

progress.example_r[value^="2"]:not([value="2"]) + .arrow {
	-moz-transform: rotate(306deg);
	-webkit-transform: rotate(306deg);
	-o-transform: rotate(306deg);
	-ms-transform: rotate(306deg);
}

progress.example_r[value^="3"]:not([value="3"]) + .arrow {
	-moz-transform: rotate(324deg);
	-webkit-transform: rotate(324deg);
	-o-transform: rotate(324deg);
	-ms-transform: rotate(324deg);
}

progress.example_r[value^="4"]:not([value="4"]) + .arrow {
	-moz-transform: rotate(342deg);
	-webkit-transform: rotate(342deg);
	-o-transform: rotate(342deg);
	-ms-transform: rotate(342deg);
}

progress.example_r[value^="5"]:not([value="5"]) + .arrow {
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
}

progress.example_r[value^="6"]:not([value="6"]) + .arrow {
	-moz-transform: rotate(378deg);
	-webkit-transform: rotate(378deg);
	-o-transform: rotate(378deg);
	-ms-transform: rotate(378deg);
}

progress.example_r[value^="7"]:not([value="7"]) + .arrow {
	-moz-transform: rotate(396deg);
	-webkit-transform: rotate(396deg);
	-o-transform: rotate(396deg);
	-ms-transform: rotate(396deg);
}

progress.example_r[value^="8"]:not([value="8"]) + .arrow {
	-moz-transform: rotate(414deg);
	-webkit-transform: rotate(414deg);
	-o-transform: rotate(414deg);
	-ms-transform: rotate(414deg);
}

progress.example_r[value^="9"]:not([value="9"]) + .arrow {
	-moz-transform: rotate(432deg);
	-webkit-transform: rotate(432deg);
	-o-transform: rotate(432deg);
	-ms-transform: rotate(432deg);
}

progress.example_r[value="100"] + .arrow {
	-moz-transform: rotate(450deg);
	-webkit-transform: rotate(450deg);
	-o-transform: rotate(450deg);
	-ms-transform: rotate(450deg);
}

Again, the CSS would be much smaller in size if I could use calc() and attr() together, but again, oh well. Also note that this example doesn’t work in Opera very well because we cannot turn of the green in the progress bar value. :-(

See the above CSS in action in a “clean room” page

Summary of Gotchas

As mentioned before, there are a few annoyances I have found with they way the browsers have implemented HTML5 progress bars:

1. You cannot use :before/::before or :after/::after pseudo-elements on the progress element. Why this is not allowed is unclear to me, and I hope this is allowed in the future.
2. Safari 5.0 and lower cannot use the polyfill, so you should always use the fallback HTML inside the <progress> tag.
3. It seems like it is impossible to change Opera’s progress bar style to anything besides green.
4. There is a small bug in the polyfill when applying borders to the progress bar. I have a fix that has been submitted as a pull request and I assume being reviewed, but in the meantime, you can get my forked version of the polyfill (with the bug fix) on GitHub.

Help Me Keep This Page Up-To-Date!

If you find out more information about the HTML5 progress tag, I’d love to hear from you! Please let me know in the comments below. I will add relevant information to the above article and credit you fully. :-)

If you are using a desktop browser (except for Opera), play with the paint widget on the left. When you select a tool and mouse over the white canvas, your mouse arrow will change to a custom cursor representing that tool (à la Photoshop or The GIMP). This is not done by creating a DOM object and moving it to the mouse’s coordinates — we are using CSS to do it using the cursor property’s url() function. When used properly, custom CSS cursors can add a little bit of polish to your web sites and applications. However, doing this in a cross browser way can be a little confusing unless you know all the gotchas, and this article will go into depth about them. We will also explore issues such as when to use custom cursors, performance, what makes good cursor design, cursor file formats, and cursor size.

When Should I Use Custom Cursors Instead of the Built-in Ones?

In general, CSS cursors (built-in or custom) should be used as a hint to the user as to what action the mouse can perform. Let’s take a look at an example that doesn’t use custom cursors to illustrate a common use-case: drag and drop. To give users a visual cue that an item is draggable, it is common practice to set an object’s CSS cursor property to move. Mouse over the object draggable object below to see how this works.

This is done with the following CSS:

a[draggable="true"] {
    cursor: move;
}

The code above ensure that when a user “mouses over” a link with the HTML5 Drag and Drop “draggable” attribute, the move cursor appears. It is a great way to help the user “figure out” how to use the user interface with minimal instruction. A list of the built-in cross-browser cursor property values can be seen at CSS2 Cursor Style Page.

The built-in cursors are great, but there are a few things to keep in mind.

• Built-in cursors may look different depending on what browser/operating system is being used. For example, some browsers (e.g. Firefox on Windows 7) will show the move cursor as a four-pointed arrow () while others (e.g. Firefox on Mac OS X) will show a hand (). Using custom cursors, you can ensure all applications are using the same cursor for a more consistent expeience. The example below is the same as the one above, except in all browsers, you will see the a hand icon.
  Drag me!
• Not all browsers support all the same “built-in” cursors, and custom cursors allows you to add support for them. For example, while Firefox on Windows doesn’t support context-menu, it seems to be the only browser that supports the zoom-in and -out cursors. Using custom cursors, you can implement all of these in all browsers.
• There may not be a built-in cursor for the use-case you need to solve. A good example is in the paint widget at the beginning of this article — none of those cursors exist natively in any browser.
• It’s nice to design your own cursors, since sometimes the built-in ones may be a little basic looking (If you do this, please keep in mind that users are used to the built in ones, so your custom cursor shouldn’t look too much different than them if you want your application to be easy-to-use).

The CSS of Custom Cursors

Here is some sameple CSS code that will show custom cursor when the user mouses over a div with an id of dragMe. If the browser doesn’t do custom cursors (like Opera), the cursor fallback to the built-in move cursor.

#dragMe {
    cursor: url('customMoveCursor.cur'), move;
}

As long as your cursor is in the same directory as your stylesheet, and as long as it is an uncompressed .CUR file, it’s as simple as that. Note that a .CUR file is just an .ICO file with extra information that allows the developer to define the “host spot” position of the cursor (i.e. the part of the image which points to the position of the mouse). Note that .CUR files support 32-bit color (16.7 million colors plus alpha channel transparency), so designers can create cursors that have semitransparent areas like shadows and anti-aliasing.

How does one create a .CUR file? Not too many graphic tools create .CUR files natively, but there are some easy solutions. If you are a Photoshop user, the ICO (Windows Icon) file format plugin for Photoshop is what you are looking for (I have not used it myself, but it apparently can save .CUR files directly. Any comment on how well this works would be most welcome). If, like me, you use the GIMP, simply save the file as a .ICO file and convert it with this command line tool written in Python by Jan Thor.

The Gotchas of Custom CSS Cursors

There are a few things you need to remember when using CSS cursors

1. You must add a default “built-in” cursor after your custom cursor, or the custom cursor will not load in Firefox. Think of it as Mozilla’s way of enforcing good web practices. :-)
2. Internet Explorer interprets relative URLs as relative to the HTML document, and not the CSS file like God (and the W3C) intended (Sometimes it seems that IE goes out of its way to make lives difficult for us developers). This is true for all versions of IE, even IE9. To ensure cross-browser compatibility, you must either use an absolute URL:
   

   #dragMe {
       cursor: url('/cursors/customMoveCursor.cur'), move;
   }
   

   or a fallback url for IE:

   /*
    * Assume this the HTML is in a directory above this CSS file
    */
   
   #dragMe {
       cursor: url('../cursors/customMoveCursor.cur'),     /* Modern browsers    */
               url('cursors/customMoveCursor.cur'),        /* Internet Explorer  */
               move;                                       /* Older browsers     */
   }
   

3. It is best that your .CUR files are 32×32 pixels in size. IE9 seems to resize cursors that are smaller than this to 32×32, and IE8 and under cannot show cursors larger than this size. While it is true that you can fit multiple file sizes inside a .CUR file, sticking with one 32×32 image will ensure cross-browser consistency.
4. Although .CUR files can be saved in either a compressed or uncompressed format, not all browsers can read the compressed ones. It is best to save your cursors in uncompressed format. If you are using the GIMP to save to .ICO format first before you convert to .CUR, make sure that the .ICO is saved without compression.

Performance Issues

As mentioned earlier, a lot of browsers (like Firefox or IE6) cannot show compressed .CUR files, but they can show .PNG files. Since we would like to use a compressed version if possible, one could do this:

#dragMe {
    cursor: url('/cursors/customMoveCursor.png'),      /* Modern browsers    */
            url('/cursors/customMoveCursor.cur'),      /* Internet Explorer  */
            move;                                      /* Older browsers     */
}

This works well as long as the cursor hotspot is 0,0. You can define a PNG hotspot using the CSS3 cursor syntax, but it breaks IE:

#dragMe {
    cursor: url('customMoveCursor.png') 5 15, /* Modern browsers, hotspot is (5, 15)            */
            url('customMoveCursor.cur'),      /* IE chokes on the above line .. never gets here */
            move;                             /* Older browsers (IE never gets here either)     */
}

In order to fix this issue, one must you conditional comments to make a separate IE from everyone else. Let’s use a variation of Paul Irish’s Conditional Comment pattern to do this. Change the html tag to this:

<!--[if (lte IE 9) ]><html class="ie9 oldIE">    <![endif]-->
<!--[if (gt IE 9)  ]><html class="modern">       <![endif]-->
<!--[!(IE)]><!-->    <html class="notIE modern"> <!--<![endif]-->

Now we can use this CSS to ensure .PNG loads in non-IE browsers:

html.modern #dragMe {
  cursor: url('customMoveCursor.png') 5 15, /* Modern browsers, hotspot is (5, 15).   */
          move;                             /* Older browsers                         */
}

html.oldIE #dragMe {
  cursor: url('customMoveCursor.cur'),      /* IE .CUR file loads                     */
          move;                             /* In case IE can't load the above.       */
}

The extra bytes used to create the conditional comments may or may not be worth the trouble. If you are using conditional comments (like I do all the time), it may be worth it.

A Final Word On Testing in IE

If you edit a .cur file on the web server and reload your page with that cursor in Internet Explorer, you may not see the edited change, since IE has kept the older cursor in cache and has a hard time letting go, kind of like that person you dated in high-school. You will need to clear IE’s cache in order to see the new cursor. This is quite annoying, and it is something you should keep in mind when troubleshooting in IE.

Further Reading

• Cross-browser custom CSS cursors by Adrian Ber

There have been many times I have come across the need to take an image and cut an irregular shape out of it. Normally, when a developer comes across this requirement, the only thing to do is to open the image up with your favorite graphics editor, use the select tool to cut out the shape you want, and then save the result as a PNG, since it is the only image format used by all web browsers that support alpha channels. The problem is that PNG images, while compressed, are not as small as JPEGs if the source image is a photograph, and the download time of a page can balloon to unacceptable levels if there are many of these types of image on a page. When I first came across this problem, I didn’t think there was an obvious solution, but after a lot of thought, I created a library that uses HTML5 canvas to clip a JPEG (or any other image for that matter). The library also supports older versions of IE (7-8) using the Excanvas JavaScript library which polyfills canvas using VML.

Okay, How Can I Do The Same Thing?

• Download my script from github (It includes jQuery 1.6.4 and excanvas release 3. It should work with later versions — if it doesn’t, please let me know and I’ll fix it ;-) ) .
• Include them into the head of your document.
  

    <script src="/path/to/js/jquery-1.6.2.min.js"></script>
  
    <!--[if lt IE 9 ]>
     <script src="/path/to/js/excanvas/excanvas.compiled.js"></script>
    <![endif]-->
  
    <script src="/path/to/js/polyClip-p.js"></script>
  

• Layout your page as normal, placing img tags where you want the clipped images to go:
  

  <div class="clipParent">
    <img src="images/image.jpg" />
  </div>
  

  Note the div tag with the class of clipParent. You must surround all the image tags with data-polyclip attributes set one. This is so you can style the image correctly, since the library will remove the image tag and replace it with a canvas element.

• For every image on your page that you want to clip, calculate the points of the shape you want to cut out of the image and place them in the data-polyclip attribute. For example, let’s say you have the following shape you want to cut out of a photograph:
  
  

  (487, 4)

  (500, 239)

  (19, 239)

  (43, 195)

  You would then just set the data-polyclip attribute to those points:

  <img src="image.jpg" data-polyclip="487, 4, 500, 239, 19, 239, 43, 195" />
  

  Note that the point co-ordinates are comma delimited. If you don’t want to calculate these numbers by hand, you can use your favorite imagemap generation tool to do generate the list of coordinates. Just remember to take the coordinates out of the imagemap code and stick it in the data-polyclip attribute (for the examples on this page, I used the on-line tool available at image-maps.com).

Why Should I Do This Instead of Using a PNG?

Compare the image above with a PNG clipped with the GIMP. Even when I compressed the PNG with my PNG optimization script, the 191K PNG file is huge compared to it’s tiny 18K polyclipped JPEG analogue (Note: file sizes refer to the size of the full image as displayed at the top of this article):

JPG using polyClip.js (18K)	PNG (191K)

You may ask whether the amount of JavaScript used in this solution is greater than the bandwidth saved by using JPEG compression. Not including jQuery, the amount of JavaScript clocks in at 2K or 13K, depending on the browser used (2K for the compressed polyClip script and 11K for excanvas, which will only be loaded by IE7-8). Although jQuery adds 91K to this equation, it doesn’t matter that much to me personally since I am probably using it for other parts of my page anyways. Even with jQuery, the amount of JavaScript downloaded outweighs using a PNG, especially if your are clipping a larger image or a huge amount of smaller images.

Download the latest version of polyClip.js from github.

A Few Caveats

• In IE7 and 8, the image may appear briefly as a black outline before the image appears. Other than that, it looks about the same as the other browsers.
• The image does not show up correctly in Opera Mini. Then again, a lot of things (e.g. CSS3 text-shadows, CSS3 Transforms, etc.) don’t show up correctly in Opera Mini. :-)

CSS3 Box-Shadows are a great to quickly decorate the outside of block-level elements. There are many CSS box-shadow recipes you can use to produce a variety of effects, including simple, glowing and blurred shadows. And, unlike CSS3 text-shadows, box-shadows are natively supported by the latest version of IE. However, if you want them to appear in older versions of IE (i.e. 6 through 8), you will want to learn how to use a variety of Visual Filters to simulate them. This article will cover a few CSS3 box-shadow effects, the equivalent Visual Filter recipes for IE 6-8, and the differences between them. It will also cover the differences in the CSS3 implementations in all the modern browsers. Box-shadows like the example on the left is possible in all commonly used browsers.

First off, what is a box-shadow?

A box-shadow is equivalent to a CSS3 text-shadow except it is applied to the box of the block-level element instead of the actual text. Just like text-shadows, you can have one shadow:

#box {
  box-shadow: <x-offset> <y-offset> <blur-radius> <color>;
}

… three shadows:

#box {
  box-shadow: <x-offset1> <y-offset1> <blur-radius1>, <color1>,
              <x-offset2> <y-offset2> <blur-radius2>, <color2>,
              <x-offset3> <y-offset3> <blur-radius3>, <color3>;
}

… or as many as you want. The x- and y-offsets measure the position of the horizontal and vertical shadow respectively, and the blur-radius measures the amount of blur in the shadow. Let’s take a look at a simple example:

#box {
  box-shadow: 5px 5px 0px #ff0000;
}

Live HTML result	Firefox 4.0 Screenshot (for browsers like IE6-8 that can’t see the Live result)
This is an example of a simple box-shadow without blurring

Note that although box-shadow is the official property name, one must use the vendor-specific prefixes in order to use it in Webkit browsers (i.e. Chrome and Safari) as well as older versions of Firefox:

#box {
  box-shadow: 5px 5px 0px #ff0000,          /* Firefox 4.0+, Opera, IE 9 */
  -webkit-box-shadow: 5px 5px 0px #ff0000,  /* Chrome and Safari         */
  -moz-box-shadow: 5px 5px 0px #ff0000;     /* Firefox 3.6               */
}

Furthermore, there are two optional parameters, the spread (which allows you to determine the size of the shadow) as well as the inset parameter that can allow you to put the shadow inside the box instead of outside of the box. I direct readers to Mozilla.org’s great reference for box-shadow to read more on these properties, since they are not, as far as I can tell, reproducible in IE 8 or lower.

What about IE?

IE9 has no problem showing box-shadow except when shadowing a box within a table-cell (If the CSS of the table has its border-collapse property set to collapse then the box-shadow is not applied. Hopefully this is fixed in a future release).

As mentioned earlier, IE6-8 requires Visual Filters to simulate CSS3 box-shadows without JavaScript. In order to illustrate this, I will show several different types of box-shadows below and show both the CSS3 syntax and the equivalent Visual Filter CSS recipe. Some of these recipes produce almost identical results, while others are rough equivalents. Note that all these examples use a variation of Paul Irish’s Conditional CSS Pattern in order to create the IE-only rules. This involves replacing the <body> tag of the document with this HTML:

   <!-- Extra white-space below is just to make it easier to read. :-) -->

   <!--[if lt IE 7 ]>   <body class="ie6">          <![endif]-->
   <!--[if IE 7 ]>      <body class="ie7">          <![endif]-->
   <!--[if IE 8 ]>      <body class="ie8">          <![endif]-->
   <!--[if IE 9 ]>      <body class="ie9">          <![endif]-->
   <!--[if (gt IE 9) ]> <body class="modern">       <![endif]-->
   <!--[!(IE)]><!-->    <body class="notIE modern"> <!--<![endif]-->

We can then apply CSS specific to a version of IE. For example:

body.ie7 #box {
   /* insert IE7 specific CSS here */
}

(Note: Paul Irish’s technique officially has the conditional comments around the html tag, not the body tag. You can use either for these techniques to work. I just prefer using the latter.)

All these Visual Filter recipes depend on the box “having layout”. If you have any difficulty with the Visual Filters activating, set zoom: 1 or a static width inside the IE6-8 specific CSS to force the block to have layout.

Type #1: Simple, Unblurred Shadows

In order to simulate simple, unblurred box-shadows in IE, we use IE’s DropShadow Visual filter:

#box {
  /* CSS for all browsers. */
  border: solid 1px #808080;
  background: #ffffcc;
  margin: 10px;
  padding: 10px;

  /* CSS3 Box-shadow code: */
  box-shadow: 5px 5px 0px #ff0000;
  -webkit-box-shadow: 5px 5px 0px #ff0000;
  -moz-box-shadow: 5px 5px 0px #ff0000;
}

/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a simple box-shadow without blurring that also works in IE6-8.

There are two exceptions to this solution. The first deals with when the block has a transparent background, and the other has to do with negative box-shadow offsets.

Type #1a: Blocks With Transparent Backgrounds

Let’s say you use the above CSS, but omit the background property:

#box {
  /* CSS for all browsers.  Note there is no background-color, so box will be transparent */
  border: solid 1px #808080;
  margin: 10px;
  padding: 10px;

  /* CSS3 Box-shadow code: */
  box-shadow: 5px 5px 0px #ff0000;
  -webkit-box-shadow: 5px 5px 0px #ff0000;
  -moz-box-shadow: 5px 5px 0px #ff0000;
}

/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}

Doing this will results in some unexpected results in IE6-8:

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a box with a transparent background and simple box-shadow without blurring. IE6-8 is having a hard time dealing with the transparent background.

The results in IE7 are as hideous and unreadable as the average YTMND page! In order to fix this issue in elderly IE, one must add a background color in IE6-8 only and remove it with the Chroma filter (more information on this technique can be found on my previous blog post, How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together).

#box {
  border: solid 1px #808080;
  margin: 10px;
  padding: 10px;

  /* Box-shadow code: */
  box-shadow: 5px 5px 0px #ff0000;
  -webkit-box-shadow: 5px 5px 0px #ff0000;
  -moz-box-shadow: 5px 5px 0px #ff0000;
}

body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   background-color: #ffffff;
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000),
           progid:DXImageTransform.Microsoft.Chroma(Color='#ffffff');
}

As you can see below, adding this CSS logic produces much better results:

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a box with a transparent background and simple box-shadow without blurring, with a fix for IE6-8 to deal with the transparent color.

Note: All the other types of box-shadow recipes that follow should also use this Chroma filter method when it is desirable to have a transparent background in the box itself.

Type 1b: Negative Shadow Offsets

If there are negative shadow offsets, you will see a small difference with the position of the box being shadowed:

#box {
  /* CSS for all browsers. */
  border: solid 1px #808080;
  background: #ffffcc;
  margin: 10px;
  padding: 10px;

  /* CSS3 Box-shadow code: */
  box-shadow: -10px -5px 0px #ff0000;
  -webkit-box-shadow: -10px -5px 0px #ff0000;
  -moz-box-shadow: -10px -5px 0px #ff0000;
}

/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=-10, OffY=-5, Color=#ff0000);
}

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a simple box-shadow without blurring that also works in IE6-8.

You will note that the offsets in IE push the box down and to the right. This is because IE’s Visual Filters believes that the box-shadow as part of the box itself, while CSS3 believes that it should be outside of the box. As a result, negative box-shadows shift the box in IE6-8. In order to compensate for this, one can use margin-top and margin-bottom to move the shadow to where CSS3 thinks it should be:

#box {
  /* CSS3 Box-shadow code: */
  box-shadow: -10px -5px 0px #ff0000;
  -webkit-box-shadow: -10px -5px 0px #ff0000;
  -moz-box-shadow: -10px -5px 0px #ff0000;
}

/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=-10, OffY=-5, Color=#ff0000);
   margin-top: 10px;
   margin-left: 5px;
}

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a simple box-shadow without blurring that also works in IE6-8.

Note that one could also make use relative positioning and use the CSS top and left properties to do the same thing in IE. I leave it up to readers to decide which method would be more appropriate for the situation they find themselves in.

Type #2: Glowing box-shadow

The second box-shadow I use a lot is what I call the “glowing box” effect. This happens when a shadow with a large blur radius is put directly behind a box (i.e. the x- and y-offsets are set to 0, and the blur-radius is a non-zero number). It is possible to simulate this effect in IE using the Shadow filter. This filter must be applied four times (north, south, east and west of the box) in order to simulate the CSS3 effect. Here is the CSS recipe:

#box {
   box-shadow: 0 0 5px #666666;
   -webkit-box-shadow: 0 0 5px #666666;
   -moz-box-shadow: 0 0 5px #666666;
}   

body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);
}

… and here are the results as rendered in Firefox 4 and IE7:

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a box that has short blurred shadows horizontally and vertically on all sides.

Note that the color in the Visual Filter syntax is lighter than the CSS3 one. In order to get the equivalent IE color, I take a screenshot of the CSS3 box-shadow, open the image in The GIMP or Photoshop, and find the color that is just outside of the box. This is the color I use in the IE syntax. If you don’t want to go through all this trouble, you can also guess, which is what I do if I’m lazy. Which is a lot of the time.

You can increase the blur radius/strength to produce larger glows as well:

#box {
    box-shadow: 0 0 15px #cccccc;
   -webkit-box-shadow: 0 0 15px #cccccc;
   -moz-box-shadow: 0 0 15px #cccccc;
}	

body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=0),
           progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=90),
           progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=180),
           progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=270);
}

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a box that has longer blurred shadows horizontally and vertically on all sides.

You can also use this alternate recipe I have used one or twice if you want a darker color closer to the box, with it becoming dramatically lighter father away:

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is another example of a box that has longer blurred shadows horizontally and vertically on all sides.

Sure, the IE7 screenshot looks slightly different from the Firefox one, but let’s take a look at what all the modern browsers look with exactly the same CSS code:

Opera	IE 9
Safari 5	Chrome 13

They are all slightly different. It is almost impossible to be pixel perfect with blurred box-shadows unless you give different rules to the different browsers using vendor-specific prefixes.

Two important caveats about the Visual Filter rules:

1. As mentioned before, the CSS for IE6-8 uses a lighter color for the shadow. This is due to the way the Shadow filter behaves: it requires a lighter shade to simulate the same effect.
2. Note that the Visual Filters examples are pushed down and to the right compared to the CSS3 example. This is for the same reasons as stated in Type 1b, and a developer would again have to use margins or positioning to get the box in exactly the same place as it is in IE6-8:
   

   #box {
      box-shadow: 0 0 5px #666666;
      -webkit-box-shadow: 0 0 5px #666666;
      -moz-box-shadow: 0 0 5px #666666;
   }   
   
   body.ie6 #box,
   body.ie7 #box,
   body.ie8 #box {
      margin-left: -5px;
      margin-top: -5px;
      zoom: 1;
      filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
            progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
            progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
            progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);
   }
   

Type #3: Blurred box-shadow

Up until a few days ago, I thought this last type of text-shadow could not be simulated in IE using just CSS. I then came across an interesting recipe from CSS-Tricks and this demo by Christian ”Schepp” Schaefer. These CSS recipes came close, but was not able to control the color of the shadow itself (it assumed grey shadows only) or the exact location of the shadow. I decided to take this work to the next level and add full control of the text-shadow, with some nice results:

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a box with a blurred box-shadow. It uses a special CSS recipe in order for it to work in Internet Explorer 6-8 involving a container HTML element and the Blur Visual Filter.

Here is the HTML:

<div id="box">
        <div class="content">
                This is an example of a box with a blurred box-shadow.
                It uses a special CSS recipe in order for it to work in
                Internet Explorer 6-8 involving a container HTML element
                and the Blur Visual Filter.
        </div>
</div>

and here is the CSS:

#box {
        /* CSS3 syntax */
	box-shadow: 5px 5px 5px #cccccc;
	-webkit-box-shadow: 5px 5px 5px #cccccc;
	-moz-box-shadow: 5px 5px 5px #cccccc;

        /* Place any other shared CSS properties here, except for those in the next rule */
        margin: 20px auto;
	text-align: center;
}

#box,
body.ie6 #box .content,
body.ie7 #box .content,
body.ie8 #box .content {
        /*
         * Any width, height, padding, border and background information goes here, so it is
         * shared between the CSS3 and legacy-IE solutions
         */
	width: 200px;
	padding: 10px;
	background: white;
	border: solid 1px black;
}

body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
        /* This contains the color of the shadow in the CSS3 syntax */
	background: #cccccc;

        /* This contains the blur-radius in the CSS3 syntax */
	zoom: 1;
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5);

        /* You must remove the border in IE, since it will be replaced in the next rule */
	border: none;
}

body.ie6 #box .content,
body.ie7 #box .content,
body.ie8 #box .content {
	position: relative;

        /*
         * Margins must be added here to place the box above the shadow correctly.
         * The margin-left and margin-right properties should be -2 times the CSS3 x-offset.
         * The margin-top and margin-bottom properties should be -2 times the CSS3 y-offset.
        /
	margin-top: -10px;
	margin-left: -10px;
	margin-bottom: -10px;
        margin-right: -10px;
}

Yes, the Legacy-IE Specific CSS as long and as painful like a meeting with your accountant, but it gets the job done.

Conclusion

These Visual Filters CSS recipes can come handy when you want IE6-8 to have similar box-shadow effects that modern web browsers have. There are probably other types of box-shadows that can be handled using them, and if you are interested I encourage those with time and patience to check out Microsoft’s reference to Visual Filters and start playing with them. Although Visual Filter support will probably be taken out of IE10, developers won’t need worry since IE9 already has box-shadow support — these experiments should only be used to add box-shadow support in older versions of IE.

Further Reading

• Mozilla.org’s box-shadow reference page
• CSS Box Shadow from CSS Tricks
• CSS3 Box-Shadow for Legacy IEs from Christian ”Schepp” Schaefer
• Drop shadow with CSS for all web browsers by Robert Nyman. Note his article includes an alternate simpler solution for a blurred box-shadow that involves the Shadow filter:
  

  Live HTML result	Firefox Screenshot	IE7 Screenshot
  This is an example of a box with a blurred box-shadow. It uses the Shadow filter for Internet Explorer 6 through 8.

  but does not as similar when dealing with large shadows:

  Live HTML result	Firefox Screenshot	IE7 Screenshot
  This is an example of a box with a blurred box-shadow. It uses the Shadow filter for Internet Explorer 6 through 8.

  This difference may or may not be important to you, and again, I leave it up to the reader to decide what the right solution would be according to the situation.

In the last few months, I have written two articles where I discussed a few strategies to do CSS3-style transforms in IE (CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript? and CSS Blurred Text-Shadow in IE — Part I). While demonstrating the possibilities to creating a varied range of text-shadows in IE, there wasn’t any silver bullet that produced what I considered one of the Holy Grails of CSS polyfills: a method that could take an existing page and render multiple CSS3 text-shadows in IE with few, if any, changes to the CSS code. To that end, at the end of my last article, I dropped the gauntlet at the end of my last article and challenged the web development community to help come up with a better solution. I got a few takers, but one stood out from the rest. Kazumasa Hasegawa submitted his script and blog post (in Japanese and then in English) about his script that could do exactly what I asked: full CSS3-style text-shadowing in IE. It can do multiple blurred and unblurred shadows per block of text. The only caveat is that one would have to set the CSS selectors inside a JavaScript file. However, the code was extremely well written, and it was very easy for me to refactor it to become a plug-in for my CSS3 polyfill library, cssSandpaper. Now, all a developer has to do now is include a few <script> tags into the <head>, and BAM!!! — instant text-shadow goodness in IE7+.

Yeah Whatever! Show Me Proof!

If you are viewing this page in IE7+, here are the droids you are looking for:

Live CSS/HTML	IE9	Firefox	Text-Shadow Syntax
Simple			2px 2px 0 #E51919
Blurred			3px 3px 3px #B24C4C
Etched			0px 1px 0px white
Flaming			0px 0px 4px white, 0px -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200
Neon			0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 3px #ffffff, 0 0 4px #ff00de, 0 0 7px #ff00de, 0 0 8px #ff00de, 0 0 10px #ff00de, 0 0 15px #ff00de;
Unfocused			0 0 3px #fff
Glowing			0 0 20px yellow, 0 0 60px yellow
Embossed			-1px -1px white, 1px 1px #333333
Pillow			1px 1px white, -1px -1px #444
Fake 3D			1px 1px rgba(255,128,0,.7), 2px 2px rgba(255,128,0,.7), 3px 3px rgba(255,128,0,.7), 4px 4px rgba(255,128,0,.7), 5px 5px rgba(255,128,0,.7)

(Note that the Blur example does not appear correctly in IE7 and 8, due to lack of support of the transparent color)

These examples were inspired by these excellent examples on the web:

• Text-shadow, Photoshop like effects using CSS by CSS3.info (cssSandpaper version)
• Using CSS Text-Shadow to Create Cool Text Effects from Chris Spooner (cssSandpaper version)
• 8 css3 text-shadow effects by Fatma Alemadi (cssSandpaper version)

How Can cssSandpaper Give Me text-shadow Goodness?

1. Download the code from github.
2. Include the following in the head of the document you have text-shadowing on:
   

   <script type="text/javascript" src="/path/to/EventHelpers.js">
   </script>
   <script type="text/javascript" src="/path/to/textshadow.js">
   </script>
   <script type="text/javascript" src="/path/to/cssQuery-p.js">
   </script>
   <script type="text/javascript" src="/path/to/cssSandpaper.js">
   </script>
   

3. It should now work in IE. With the HTML5 Doctype, you can remove the type="text/javascript" attributes.

Download the latest version of cssSandpaper with IE text-shadow support.

Okay, What Are The Caveats

Like any polyfill solution, there are a few things one has to keep in mind when using a solution like this.

1. As you can see from the above examples, blurred text-shadows in IE look slightly different because of the different algorithm IE’s Blur Visual Filter uses compared to what CSS3 text-shadow uses. This is not so obvious on the second example above, but becomes more obvious the more blurred text-shadows are applied on the same text. For most applications, this is acceptable, but for those of us who like to pixel-bitch (i.e. complain when something is not pixel-perfect), you should be aware of this difference (No, I don’t know where I got that term from. I may have made it up. Anyone else heard of it before?)
2. Creating a large text-shadow blur (i.e. greater than 70px) on a large piece of text can cause Internet Explorer’s rendering engine to slow down when the text is scrolled into view.
3. Sometimes IE cuts off the shadows when the line-height is too small:
   
   

   The letter 'P' and other letters with descenders may get cut off if the line-height is not set to be larger than the actual font-size.

4. In IE7-8, elements above text-shadowed text that have a line-height property measured in em units may effect the text-shadow in IE. If there is a problem, the shadow is one pixel off from where it is supposed to be, as shown in this screenshot:
   
   

   Examples of a correct looking text-shadow (left) and a text shadow that is a pixel off (right).

   As you can see from the screenshots above, this problem is much more obvious when there is no blur-radius in the text-shadow. I am trying to see if I can work around this problem, but it looks like it has to do rounding errors when IE converts em units to pixels. If you have a lot em units in your document, you may want to consider using my non-JavaScript solution when using a single, non-blurred text-shadows.

5. Sometimes, in order for the text-shadows to render correctly when using ClearType, you may have to use the -sand-chroma-override CSS property on the HTML you applied the text-shadow on. This property is used by cssSandpaper to fix a problem with ClearType and IE’s Visual Filters, as described in my previous blog post, How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together. Most of the time, this property should be set to be the color that that is behind the text value of the background of the text, but sometimes you will have to look at the outline of the texts and the solid shadows to get an idea as to how it should be set. Let’s take, for example, the “Law and Order” style text at the top of this page. We used the following CSS to produce the text-shadow on the “CSS3″ text:
   

   -sand-chroma-override: #666666;
   text-shadow:
   	-4px 0px 0px #0f1128,
   	-8px 0px 4px rgb(50, 152, 234),
   	-10px 0px 4px rgba(50, 152, 234, 0.3),
   	-8px -4px 4px rgba(50, 152, 234, 0.6),
   	-8px 4px 4px rgba(50, 152, 234, 0.6);
   

   Why did I end up using #666666? It is a greyscale color that is roughly between the brightness of the off-white text and the blue shadow. If I set it to black instead, the outline of the text’s first dark text-shadow would be blocky, as seen here:

   	-sand-chroma-override: #000000	-sand-chroma-override: #666666
   Scale 100%
   Scale 300%

   What you set this value to will depend on the text-shadow recipe you are using and, to paraphrase my Mathematics text-books in college, I leave it up to the reader to play around with the -sand-chroma-override value to see what looks best in which situation.

In Conclusion

This script opens up a lot of great possibilities for styling text in IE. There is still some work to be done to make the script even better with some inevitable bugs that will need to be fixed, and I will continue to work on it to make improvements. If you see areas for improvement, or any bugs that you see with the code, please make a comment on the cssSandpaper issues page on github. If you have something to contribute, I would be most grateful. :-)

Other changes that I am planning for cssSandpaper will include:

1. Choice of Selector Library: I will be refactoring cssSandpaper to use other selector libraries besides cssQuery, which is currently bundled with it. This will include, but not restricted to, jQuery. This will allow developers to reduce the number of libraries included in their documents and reduce load time.
2. Modularity: I will make it easy for developers to make their own plugins to support CSS properties not currently supported by cssSandpaper. This module framework will also allow developers to only add support for the CSS properties they want to use (e.g. if a developer doesn’t use any CSS3 transforms, then they don’t have include that code or supporting libraries, like Sylvester.js).
3. Only Download Code If Needed: I want to make cssSandpaper only download plugins if actually needed. This will probably be done with Alex Sexton’s and Ralph Holzmann’s excellent yepnope.js library. While this library can be used today to speed things up, I want to look into making a little more integrated, if possible.
4. Further CSS3 Support: I am looking into polyfills at the moment, like border-image. Any other ideas for plugins will be most welcome.

Download cssSandpaper

Download the latest version of cssSandpaper with IE text-shadow support.

What are the issues?

IE has three issues related to oninput:

1. oninput is not supported at all in IE8 and lower.
2. IE9 does not allow referring to form fields directly in the oninput expression. For example, this code works in all browsers except IE9:
   

   <form name="f1" oninput="output.value = parseFloat(darkness.value);">
       Darkness Level:
       <input type="range" name="darkness" value="0" min="0" max="255">
       <output name="output">
   </form>
   

   This is not so bad, since one could refactor the event code like this:

   <form name="f1"
     oninput="document.getElementById('output').innerHTML = parseFloat(darkness.value);">
       Darkness Level:
       <input type="range" name="darkness" value="0" min="0" max="255">
       <output id="output">
   </form>
   

3. If you use the backspace key while entering in a value, IE9 doesn’t fire the oninput event. This, in my opinion, is really bad, because it does affect how the form behaves. For example, take the following form in IE9:
   

   Amount:
   Item:
   Tax:	45.00
   Total:	344.99

   As the user types in values for the amount and price into the form, the oninput event calculates the tax and total. However, if the user is entering a value into, say, the price and make a mistake and press the backspace, IE9 will not update the tax and total. Your application will give erroneous information, the user will be surprised at the total being larger than he expected, says “screw this” and leaves the application. Your company loses the big sale, your boss fires you, and next thing you know you are on a street, or worse, coding COBOL on a 30 year old IBM PC running MS-DOS 1.0 in some fishing tackle store. Not pretty.

Oh The Humanity! How Can I Prevent Such a Fate?

Since I hate COBOL, I decided to update my html5Widgets library to:

1. Add support for oninput for browsers that don’t support it (e.g. IE7 and 8)
2. Force IE9 to fire a form’s oninput when the backspace and delete keys are pressed inside any of the input nodes.
3. Force IE9 to fire a form’s oninput when the cut event is fired on any of the input nodes.

Using the link below, you can see an example similar to the one above using html5Widgets to fix these issues.

Let’s see html5Widgets give IE some oninput goodness

In order to do this, I used ideas from Daniel Friesen’s blog post, A HTML5 Browser Maze, Oninput Support (thanks to Paul Irish for pointing me into that direction). The result works rather well. Note that I did not fix the IE9 “cannot use .value, must use .innerHTML” bug described earlier. It’s a little bit more verbose, but for now it’s what a developer needs to do for true cross-browser oninput support. I have also kept onforminput support in the code, just in case anyone has used it in the past (e.g. me). To ensure the best experience, I wouldn’t use both events on the same page.

Note also I did not add support for oninput in any element other than form. I may do this after further research in the way it supported across browsers (for example, Firefox has an issue with oninput being used on textarea elements).

Download

Download the latest version of html5Widgets, which includes oninput support, from github.

Further Reading

• Daniel Friesen’s blog post, A HTML5 Browser Maze, Oninput Support.
• oninput event | input event from the Dottoro Web Reference
• Using the oninput event with onkeydown as its fallback by the ever talented Mathias Bynens.

Update:

Newer versions of all browsers support the form element’s oninput attribute, which replaces the functionality of onforminput, and as a result I wrote a related article Fixing oninput in IE Using html5Widgets. Thanks to Rob Crowther for setting me straight and providing a great example, which I have forked to work for IE9. I will refactor html5Widgets to support oninput in IE very soon. I will leave this article as is for the benefit of anyone who is Googling for onforminput and why it was deprecated.

I was just doing some regression testing on html5Widgets, and noticed that the onforminput event wasn’t working in Firefox 4. This didn’t make sense to me: I designed html5Widgets to detect if the output tag is supported, and if not, add support for it. I believed that if a browser supported the output tag, it also had to support the onforminput event, since I assumed that this was one of the main reasons of having the output tag in the first place. However, Firefox 4 supports the output tag, but doesn’t support onforminput. After doing a bit of light research, I came across this this bug report that seems to indicate that onforminput is deprecated. This article will discuss what onforminput does, why it is very useful to designers are not so strong in JavaScript, how one can add support for onforminput to browsers that don’t, and why I really hope someone in power adds it back to the HTML5 Forms specification, or at least something very similar.

Why Do I Care

For those that don’t know what this is, onforminput is an attribute that a web author can use on the output tag to do some calculations with the values in a form’s input fields and show that calculation to a user. Right now, Opera is the only browser that natively supports it, but in an earlier post I showed how one could use it with my html5Widgets polyfill library in all the other browsers. How does it work? To illustrate a very simple use case, let’s say I have a range input field:

(Note the range element is polyfilled with html5Widgets if your browser doesn’t support it).

The range input type is a slider widget, and we use it here so the user can choose a number between 0 and 255. The slider looks cool, but from a usability standpoint, there is no feedback of what value the user is sliding to. It would make more sense to show a number next to the slider. which gives feedback to the user as to what the slider’s value is. This is where onforminput comes in:

Immediate user feedback! Great user experience! And simple syntax! Even a person who is not familiar with JavaScript can figure it out. But it’s deprecated! So, even though the output tag is supported by Firefox 4, onforminput is not. Oh-noes!!!!

Luckily, my html5Widgets library adds support for it in browsers that don’t, including Firefox 4. I just made a small change that worked around an issue preventing Firefox from supporting it, and BAM! Instant support.

Another good (and common) example for using output would be a form for an online tool that calculates a total automatically. Enter in values into the following form and see the calculations magically appear:

But, why is it depreciated in the first place?

It seems the decision has been made to remove onforminput from the HTML5 specification since it’s purpose can be easily done with capturing events (at least, that’s what I understood from this thread about onforminput and onformchange on the public-webapps mailing list).

While this is true, I think keeping it in would be a huge help to designers and developers. I even think that having it declared inline like I do in the code examples above is useful. Even though it breaks the separation of document structure and behavior, it allows a developer with practically no JavaScript knowledge to implement this simple feature in a form. According to the Bug Report, designers shouldn’t have to use onforminput since they can do this instead:

<form name="f1">
Darkness Level:
    <script type="text/javascript">
      document.addEventListener("input",
        function(e) {
          if (document.forms.f1 == e.target.form)
            e.target.form.output.value =
              parseFloat(e.target.form.darkness.value);
        }, true);
    </script>

    <input type="range" name="darkness"
         value="0" min="0" max="255" />
    <output name="output">
  </form>

This is uglier than your Mom’s mood when you don’t call her on Mother’s Day (not that I’m speaking from any recent experience). Even though it is dead easy for a JavaScript programmer to implement this without onforminput, some web designers wouldn’t have the knowledge or the patience to do so. This is not a slight to those designers — after all, they can probably make better looking web pages than the average programmer. So I am keeping onforminput in html5Widgets. It is really convenient and easy to understand.

A Note To Those In Power

To anyone at the W3C who has the power to do so, I am politely asking to reconsider and please put onforminput back into the specification or at least replace it with something just as simple (the latter being attractive to those who want to continue separating the structure of the document (i.e. HTML) from the behavior (i.e. JavaScript)). As mention in the update on the top of the page, oninput is a great replacement for onforminput and it works in all modern browsers.

In my humble opinion, creating calculations the old-fashioned way with events and lines and lines of JavaScript is painful for designers who aren’t scripters. After all, isn’t this the reason why required and pattern were created?

Download the latest version of html5Widgets, which includes onforminput support, from github

Notes:

• Before reading this article, you may want to read my previous article, which covers producing other text-shadow effects in IE.
• After reading this article, you may want to read my subsequent article, which covers using my cssSandpaper JavaScript library to produce multiple blurred and un-blurred text-shadows in IE7+
• When I first posted this article, I wrote that this solution works with IE8 as well as IE9. However, further testing has shown that IE8 produces unpredictable results. Please see the Caveats section for more information

Last week, I discussed several strategies web developers can use to simulate CSS text-shadow in IE. In that article, I mentioned that there was no way that I knew of to simulate text-shadow with a blur-radius in IE without JavaScript. Since then, I have discovered a way to simulate the CSS text-shadow effect in IE9 that does not use JavaScript and does not add extra elements to the DOM. There are some other caveats to this solution, and because of this, I have titled this article “Part 1″, since I believe more work can be done in this area to improve support for blurred text-shadows in IE.

Step by Step Text-Shadowing in IE9

This solution makes use of Paul Irish’s Conditional CSS Pattern, and I would suggest reading that article first before proceeding any further. I would also recommend reading my previous article, CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript?, since this solution relies on some ideas presented in that article.

After you become familiar with the above two articles, implementing text-shadow in IE9 becomes a two-step process.

For this tutorial, let’s assume the following HTML:

<div id="intro" class="alignLeft">
  <p data-innertext="Blurred Text-Shadow in IE9 Without JavaScript">
    Blurred Text-Shadow in IE9 Without JavaScript
  </p>
</div>

(Note the data-innertext attribute in the element we want to add the text-shadow to. This must contain exactly the same text that the element itself contains. We’ll explain why we need this later on).

Let’s also assume we want a gray text-shadow with both an x- and y-offset of 3 pixels as well as a blur radius of 3 pixels:

#intro p {
     text-shadow: 3px 3px 3px #cccccc;
     width: 230px;
}

Let’s look at the result so far:

Firefox screenshot	IE screenshot

As one would expect, works in Firefox but not in IE9.

See the above text-shadow code in action (without any IE9 goodness)

Step 1 – IE Blur Filter

Using Paul Irish’s Conditional CSS Pattern, we make an IE9 only rule that will blur the text

#intro p {
     text-shadow: 3px 3px 3px #cccccc;
     width: 230px;
}

/* Step 1: apply the Chroma and Blur filter to the text you want the Drop Shadow on */
body.ie9 #intro p {
	zoom: 1;
	color: #cccccc;
	background-color: #ccccce;
	filter: progid:DXImageTransform.Microsoft.Chroma(color=#ccccce),
	        progid:DXImageTransform.Microsoft.Blur(pixelradius=3);
}

Note four things:

1. I set the color to be the color of the text-shadow.
2. We set a background-color to be halfway between the color of the text (black) and the visual background of the text (white). In this case, I chose #ccccce since #cccccc is already being used by as the color of the text-shadow.
3. We remove the background color with the Chroma Visual Filter (this is necessary to avoid the Blur filter from being pixelated, in the same manner as the text-shadows in my previous article).
4. We apply the Blur Visual Filter to have a pixelradius of 3 (which is the same as the blur radius from the text-shadow.

Firefox screenshot	IE screenshot

See the above code in action (IE9 will only show the blurred text)

So now we have the shadow in IE! But what about the solid text on top?

Step 2 – Use :before To Replace the Solid Text

We now must add one more selector in order to get our black, un-blurred text back:

/* Step 2: create a :before rule on the blurred text */
body.ie9 #intro p:before {
  /* color and width of the original text */
  color: black;
  width: 230px;

  /* This is needed to place the text directly over the shadow. */
  position: absolute;

  /* This assumes that the data-innertext is the same as the text inside the element. */
  content: attr(data-innertext);

  /* Positions the text */
  margin-top: 0px;
  margin-left: 0px;
}

The :before rule duplicates the blurred text, colors it black and places it before the blurred text. The text is then duplicated because of the content property, which uses the value of the data-innertext attribute as the generated content — now you know why we set data-innertext at the beginning of this example. It is absolutely positioned, and since the top and left properties are not set, it places the text on top of the original text. Also note that the width is the same as the original element (in this case 230px). This is very important, otherwise the shadow will not appear below the text correctly.

The only thing left to explain is the margins and how they position the text. We must use these formulas to produce the x- and y- offsets of the original text-shadow

Why do we need to do this? Because adding the Blur filter pushes the text a few pixels from down and to the right — namely, the same amount of pixels from the blur-radius. These simple formulas compensate for that, and place the shadows according to what you set for the x- and y-offsets.

Firefox screenshot	IE screenshot

And now, let’s take a look at the difference close up:

Firefox screenshot	IE screenshot

Note: the other browsers look about the same in Firefox, so I didn’t bother posting screen captures of them.

See the above code in action, with IE9′s blurred text-shadow workaround.

Caveats

This solution only works under certain conditions:

1. You cannot have more than one type of font, font-size, font-weight or font-style with the shadowed element. This is due to the way we produce the shadow (i.e. the data-innertext cannot contain any HTML elements to control the style).
2. The shadowed element cannot be an inline element. It can be a block or an inline-block though.
3. Any background colors or background-images that you want to appear in with the text-shadow must appear in an outside element. For example, in the following HTML, you would put the background-image or background-color on the <div> tag, not the <p> tag which would have the text-shadow.
   

   <div id="intro" class="alignLeft">
     <p data-innertext="Blurred Text-Shadow in IE9 Without JavaScript">
       Blurred Text-Shadow in IE9 Without JavaScript
     </p>
   </div>
   

4. The shadowed element must be of fixed width (i.e. widths can be measured in px, em, etc. Percentages will not work).
5. As far as I know, it is impossible to have multiple text-shadows on the same block of text. If you wish to do this do glow text, you may want to look at my previous article, CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript?.
6. It only works in IE9. When I originally posted this article, I claimed it worked with IE8, but after further testing, when setting a font on a :before rule, IE8 sometimes produces unpredictable results (sometimes, the font is set to something different than the original text, and other times, the letter spacing is not correct). IE8 and lower are out of luck. :-(

An Open Challenge To Improve This Technique

Think you can do better? I challenge you! I am almost certain there has to be a better way with fewer restrictions that the solution I give here. I also know there are quite a few smart people out there who read this blog, so I am dropping the gauntlet and challenging everyone reading this article to help come up with a better solution. Post a URL with an example below, and if I like what I see, I will post a follow up article to this one with what I believe are the best solutions. Here’s your chance to solve what I think is a huge web development problem and be recognized as Someone Really Clever™.

Unless, of course, I come up with a better solution first. :-)