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. :-)

Update: April 24, 2011

Since writing this article, I have also discovered a way to implement blurred text-shadows in IE8+.

When IE9 was released, I was really happy to see all the great CSS3 features it supported. 2D Transforms, advanced selectors, border-radius, rgba/hsla colors, WOFF fonts … the list goes on. And no polyfills required! I was, however, disappointed that IE9 doesn’t support two of my favorite CSS3 effects: border-image and text-shadow. I’m sure that I will notice other CSS3 effects missing over time, but these are two features that I currently find incredibly useful. This article will deal with text-shadow: how it works in browsers that support it, and strategies we can use today to emulate some of its functionality in IE. Although the solutions I present here are based on IE’s Visual Filters, and that some articles like this one by Neil Crosby have looked into it as a solution, I present here some new information – how to make them work correctly with Windows Standard and ClearType font-smoothing and how to write the final CSS that won’t break any browser.

How does CSS3 text-shadow Work?

Before we go on about IE, let’s have a quick overview of how the CSS3 specification works. In all the other browsers (i.e. Firefox 3.0+, Safari 4.0+, Opera 10.0+ and Chrome 4.0+) text-shadow has pretty solid support. Its basic syntax is:

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

The x-offset and y-offset state how many pixels horizontally and vertically the shadow is positioned with respect to the original text, while the blur-radius is used to express how much the shadow is blurred (the higher the value, the more blurry it is). All of these values can be expressed using any CSS unit of measure (e.g. px, em, etc). The color can be any CSS color value, representing the color of the text.

Here are some examples:

Pure CSS Example (will be visible if your browser supports text-shadow	Firefox Screenshot (similar in other browsers except IE)
text:shadow: 5px 5px 0px black;
text:shadow: 5px 5px 5px black;
text:shadow: 1px 0px 0px white;

You are not restricted to just one shadow. You can have multiple shadows, separated by commas. For example:

#obj {
	text-shadow:
		 1px -1px 5px rgba(0, 0, 0, 0.2),
		-1px  1px 5px rgba(0, 0, 0, 0.2),
		 1px  1px 5px rgba(0, 0, 0, 0.2),
		-1px -1px 5px rgba(0, 0, 0, 0.2),
		 0px  1px 5px rgba(0, 0, 0, 0.2),
		 0px -1px 5px rgba(0, 0, 0, 0.2),
		 1px  0px 5px rgba(0, 0, 0, 0.2),
		-1px  0px 5px rgba(0, 0, 0, 0.2);
}

renders white text legibly on a white background:

Pure CSS Example (will be visible if your browser supports text-shadow	Firefox Screenshot (similar in other browsers except IE)
This is white text on a white background

Well … What About IE?

Currently, no version of Internet Explorer natively understands the CSS3 Syntax for text-shadow. However, IE 4.0+ can do text-shadow-like effects using Microsoft’s proprietary Visual Filters — unfortunately, if the user’s computer has any type of font-smoothing technology enabled, the DropShadow Visual Filter effect is quite messy and ugly. Since ClearType is enabled by default in modern versions of the Windows operating system (i.e. Vista, Windows 7) and is very difficult to disable it in Internet Explorer 9, this is a show-stopper. Don’t dispair, there is a workaround. Let’s see how DropShadow is supposed to work, and see how we can “clean-up” the result to look much nicer in modern versions of Windows.

Basic Text-Shadow

Let’s first take a look at a basic text-shadow without any blurring of the shadow:

#basicTextShadow {
	background-color: white;
}

#basicTextShadow p {
	text-shadow: 3px 3px 0px #99cc99;
}

The equivalent Visual Filter syntax is:

#basicTextShadow {
	background-color: white;
}

#basicTextShadow p {
	zoom: 1;
	filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);
}

Note that the zoom line — it is here since it forces IE to recognize that the object “has layout”. Visual Filters do not work unless a node “has layout”.

The problem is that when ClearType is turned on, many Visual Filters, including DropShadow don’t render text very well:

IE DropShadow without ClearType	IE DropShadow with ClearType

The text renders much better when you have a background-color.

#basicTextShadow p {
	zoom: 1;
	background-color: white;
	filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);
}

IE using the DropShadow Visual Filter with a background-color.

However, this will cause DropShadow to behave more like the CSS3 box-shadow property.

How can we have the font render well without the background-color. All we have to do is cut-out the background-color using the Chroma filter:

#basicTextShadow p {
	zoom: 1;
	background-color: white;
	filter: progid:DXImageTransform.Microsoft.Chroma(Color=white)
		progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);
}

Firefox using CSS3 text-shadow	IE with Chroma and DropShadow Filters Applied

The Chroma filter allows us to remove a specific color from the rendered element. In this case, we are removing white, which is also the background-color. As a result the font renders smoothly, and the DropShadow filter behaves almost like a true text-shadow. This is similar to the method I describe in a previous article I wrote, How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together. To sum-up: regardless of whether you use @font-face or not, you can make Visual Filters render text correctly by creating a background for the element, and then removing that background with the Chroma filter.

See the above three examples in action (IE is recommended in order to see the Visual Filter differences)

Here is some actual HTML that is styled so that all browsers, including IE, will render a text-shadow correctly:

Here is the CSS for "compliant" web-browsers:

#basicTextShadow p {
	text-shadow: 3px 3px 0px #99cc99;
}

And here is the CSS for IE (using Paul Irish’s Conditional CSS Pattern):

body.ie6 #basicTextShadow p,
body.ie7 #basicTextShadow p,
body.ie8 #basicTextShadow p,
body.ie9 #basicTextShadow p {
	zoom: 1;
	background-color: #cccccc;
	filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
	        progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);
}

There are some things that you should keep in mind with this solution:

• Since we are using the Chroma filter to remove the background-color of the object, any background image or color that you want to appear in the document must be placed in the containing tag. In this example, the background-image is styled on a <div> tag, while the text-shadow appears in a <p> tag inside it.
• Unlike CSS3, it is impossible to use multiple shadows using Visual Filters (to be more accurate: it is syntactically possible, but it doesn't look good or behave as one would expect).
• According to Microsoft's documentation, IE8+ is required to have an extra line containing an -ms-filter property which is identical to the filter one except the property's value is contained on one line within a set of quotation marks.
  

  body.ie6 #basicTextShadow p,
  body.ie7 #basicTextShadow p,
  body.ie8 #basicTextShadow p,
  body.ie9 #basicTextShadow p {
  	zoom: 1;
  	background-color: #cccccc;
  	-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc) progid:DXImageTransform.Microsoft.DropShadow(Color=#99cc99, OffX=3, OffY=3)";
  	filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
  	        progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);
  }
  

  I have, however, noticed that the CSS works in IE9 standards mode without this additional line.

Text Glowing

Text glowing is a term to describe a shadow that "envelopes" some text in a glow of color to make it more legible. Let's take the following example of black text on a dark background:

Hard to read, isn't it? We could change the color of the text to white, but you could also put a white glow around the text to keep it black and maintain the dark atmosphere of the image:

Using the CSS3 text-shadow property, this is just a case of creating a set of eight shadows around the text in question:

#sky.textShadowTest p {
	text-shadow:
		 0px -1px 5px #eeeeee,     /* north      */
		 0px  1px 5px #eeeeee,     /* south      */
		-1px  0px 5px #eeeeee,     /* west       */
		 1px  0px 5px #eeeeee,     /* east       */
		-1px -1px 5px #eeeeee,     /* north-west */
		-1px  1px 5px #eeeeee,     /* north-east */
		 1px -1px 5px #eeeeee,     /* south-west */
		 1px  1px 5px #eeeeee;     /* south-east */
}

It basically creates a text-shadow in all eight directions and blurs them together, giving us a glow effect. Pretty neat, but it doesn't work in Internet Explorer. However adding this CSS code will give IE something roughly equivalent:

/* Use Paul Irish’s Conditional CSS Pattern to isolate the rule for Internet Explorer */
body.ie6 #sky.textShadowTest p,
body.ie7 #sky.textShadowTest p,
body.ie8 #sky.textShadowTest p,
body.ie9 #sky.textShadowTest p {
	background-color: #cccccc;
	filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
		progid:DXImageTransform.Microsoft.Glow(Strength=5, Color=#eeeeee);
}

Firefox using CSS3 text-shadow	IE using the Chroma and Glow Visual Filter.

Note a few things about this solution:

1. The results aren't exactly the same. Doing a side by side comparison reveals that the CSS3 version looks a little smoother. Here are the above examples blown up 300% to show detail:
   

   Firefox using CSS3 text-shadow	IE using the Chroma and Glow Visual Filter.

2. The Strength in the Glow filter is the same amount of pixels in the blur-factor in the CSS3 text-shadow code.
3. You'll notice that background-color I removed with the Chroma filter in this case is not blue, but gray, a color halfway between the color of the text (black) and the color or the glowing text (white). This is so that the smoothness obtained by ClearType is somewhat preserved. Choosing black would make the text look to "thick", while choosing white would make the text look too "thin".
4. You'll notice the IE glowing text is "pushed" a little down and to the right. That's because IE treats the Glow as part of the width and height of the element. This can be fixed by relatively positioning the object and setting the top and left properties to the negative value of Glow's Strength value to compensate:
   

   body.ie6 #sky.textShadowTest p,
   body.ie7 #sky.textShadowTest p,
   body.ie8 #sky.textShadowTest p,
   body.ie9 #sky.textShadowTest p {
   	zoom: 1;
   	background-color: #cccccc;
   	filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
   		progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee, Strength=3);
   	position: relative;
   	top: -3px;
   	left: -3px;
   }
   

   The results are subtle, but will help to make the result a little more pixel perfect.

   Firefox using CSS3 text-shadow	IE using the modified version of the Chroma fix.	IE using the both positioning and modified Chroma fix.

   If you don't like using relatively positioning the text, you can also use negative left and top margins to achieve the same effect, or you can leave it the way it is — after all, what are a few pixels between friends? ;-)

I have used this method in my previous blog post about CSS3 border-image:

Firefox	IE9

Here is the CSS that I used to produce it:

#introExample p, #introExample code {
   color: white;
   text-shadow:   2px  2px 3px #333333,
                 -2px -2px 3px #333333,
                 -2px  2px 3px #333333,
                  2px -2px 3px #333333;
}

/*
 * The "poor man's" version of text-shadow for IE's Visual filters.
 */
body.ie6 #introExample p,
body.ie7 #introExample p,
body.ie8 #introExample p,
body.ie9 #introExample p {
	zoom: 1;
	background: #000003;
	filter: progid:DXImageTransform.Microsoft.Chroma(Color=#000003)
		progid:DXImageTransform.Microsoft.Glow(Color=#3e3e3e, Strength=4); 

}

The values of the Visual Filter code doesn't match exactly with the text-shadow. This is in part that I only used four directions in the text-shadow code (i.e. south-east, north-west, north-east and south-west). I don't believe this conversion is an exact science ... it is worth your time to experiment with these values, using the examples in this article as a guide.

But How About Other Types Of Shadows?

The short answer for now is that you are out of luck. There are no Visual Filters, as far as I know, that will allow you to do other types of shadowing, like a Basic Text-Shadow with blurring: Update April 24, 2011: Since writing this article, I have a discovered a way to implement blurred text-shadows in IE8+. I have left the rest of the information here since it is still relevant, interesting and influenced my own work.

There is no way that I know to do this in IE without JavaScript or without affecting the DOM

Kilian Valkhob also has a solution for this which involves making a copy of the desired text and blurring it with the Blur filter. While I think the results look pretty good, I hesitate using this method since search engines may see the text repeated in the document and index that text higher than it should be rated (or they might penalize the document because the search engine thinks the author is trying to do some unethical hack of the page ranking algorithm it uses). Vilkhob has, however, also created a text-shadowing JavaScript library that automates this process, and since the repeated text isn't actually in the document, it may be a solution to the search engine concern. This solution is something i am currently looking into adding to cssSandpaper, but I want to do more research into this before I implement it in a public version of my library. For example, how would screen readers handle this JavaScript generated "double text"?

Conclusion

CSS3 text-shadow is a great effect in a web developer's toolkit. Hopefully IE will natively support it soon, but in the meantime, at least there are some use cases you can use Visual Filters to do some of eye-candy it supports.

This is an example of CSS3 border-image in action. Browsers that don’t support it will see a normal solid coloured border, while modern browsers will see a nice framed border-image. Note that the clouds are produced with an additional background-image, showing the possibility of having separate images for borders and backgrounds.

The border-image property is something I’ve been wanting for a long time. For years, I have been cutting up images into several pieces in order to emulate this effect (the most recent example of this was used in this demo of the CSS3 Font Converter). The difference is that CSS3′s border-image property uses only one image and two lines of CSS (well … 6 if you include the vendor-specific properties and the fallback for browsers that don’t support it).

Since it is newly implemented in most web browsers, there are a few gotchas that developers should be aware of before implementing border-image. This article will cover these caveats, a tool that you can use to help generate border-images effectively, and a few things you should keep in mind so that pages don’t look funny in browsers that don’t support border-radius.

Let’s Look At An Example

This is an example of a block level element that uses the border-image property. The border-image is viewable in all major browsers except for IE (more on that later). It uses only one image to produce the border — no images were cut-up into pieces or harmed in any other way. The code to generate this border is fairly straight-forward once you know how it works:

#object {

   /*
    * These border widths must match the border-image numbers.
    */
    border-width: 23px 22px 22px 26px;

   /*
    * Note that all browsers use their respective vendor prefix.  Also note
    * that, unlike the border-width values, the widths in the border-image
    * property don't have the 'px' unit at the end.
    */
   -moz-border-image:    url('image.png') 23 22 22 26 round round;
   -webkit-border-image: url('image.png') 23 22 22 26 round round;
   -o-border-image:      url('image.png') 23 22 22 26 round round;
   border-image:         url('image.png') 23 22 22 26 round round;

   /*
    * You should include a border-color and border-style as a fallback for
    * browsers that don't support border-image
    */
    border-color: #cccccc;
    border-style: solid;
 }

The original image looks like this:

It is an edited version of an image produced by Free Printable Borders.

Note that the image repeats to the size of the block it borders. When you design a border-image, the border should tile in a similar way that a background-image does. There are some major differences though, so let’s show in depth how border-image is used, and introduce you to the tool that will help even the laziest developer in the world (i.e. me) create them quickly.

Basic Syntax

Note that the basic CSS is quite easy if you know how border-width works:

#selector {

  border-width: <top-width>px <right-width>px <bottom-width>px <left-width>px;

  border-image: url(<image-url>) <top-width> <right-width> <bottom-width> <left-width> 
                <horizontal-effect> <vertical-effect>;

}

Note that if you are measuring your widths in pixels, then you must put the px unit inside the border-width declaration, but you must leave it out in the border-image one. I know it doesn’t seem logical, but it’s just the way it is.

To illustrate the all of the border-image parameters, let’s take this image:

First we must grab the border widths in the right order:

A diagram showing how the borders widths are ordered.

(Note that the order of the border-image widths is consistent with the order that margin and padding uses).

Now, let us apply effects on our image.

Pure CSS Example (will be visible if your browser supports border-image	Firefox Screenshot (Opera and Webkit are similar, except for the round effect, which Chrome and Safari currently don’t support.)
This is an example of a stretched border. Note that the square in the corner remains intact, while the other squares are the ones that stretch.
This is an example of a repeated border. You’ll note that the browser will apply symmetry on the border, so that it looks “balanced”.
This is an example of a rounded border. In this example, the browser tries to “round” the widths and lengths of the squares so they are not abruptly cut off. Currently, this property is only supported by Firefox and Opera.

But I Hate Counting Pixels!

If you are the laziest developer in the world (i.e. me), you don’t want to crack open your graphics editor, open up a image file and count the pixels by hand – you want a tool that will generate the CSS for you. After all, don’t we use computers so that they will do things for us? At least, until they take over the world?

I was in the middle of creating my own tool, but I noticed that Kevin Decker beat me to it with his excellent Border Image Generator. You can take any image, from the web or your desktop, drag a few sliders around, and voilá!, you have your code, vendor-prefixes and all. You should definitely check it out if you are as lazy as I am.

Percentage Widths

The border-image property can also take percentage values, which correspond to the image’s width in height. For example, let’s take this 81×81 image:

As you recall, we used the following pixel dimensions:

border-image: url('/border-image/images/borders/chain.png') 23 22 22 26 round;

If you wanted to convert the pixel widths to percentages, you must take each value and divide it by either the entire width of the border-image (for the left and right widths) or by the height of the border-image (for the top and bottom widths). In the above case:

• The top border width percentage = (top border width in pixels) / (border-image height) = 23 / 81 = 0.283… = 28%
• The right border width percentage = (right border width in pixels) / (border-image width) = 22 / 81 = 0.271… = 27%
• The bottom border width percentage = (bottom border width in pixels) / (border-image height) = 22 / 81 = 0.271 = 27%
• The left border width percentage = (left border width in pixels) / (border-image width) = 26 / 81 = 0.320 = 32%

Note that these percentages can only be used in the border-image property. The border-width property must continue to use the pixel values:

Now, why on earth would you want to use percentages, since pixels are probably more accurate? I don’t see there being any need for bitmap images, but Webkit browsers (i.e. Safari and Chrome) can use SVG vector images as a border-image as well. Since SVG images are resolution independent, I would assume it is more accurate to use percentages. It would be worth looking into percentage widths more when SVG border-image support reaches critical mass, since the other browser manufacturers may handle SVG support differently than Webkit.

Degrading Gracefully and Progressive Enhancement

It is important that developers ensure their designs degrade gracefully so that pages not only look decent in browsers that don’t support border-image, but also look nice when a compliant browser is loading the images, especially when loading a high-bandwidth page or a page on a slow connection. Not only should you ensure the border-color and border-style are set, but it is a good idea to ensure that the look of the fallback border is as close as possible to border-image as possible. Let’s take a look at the “framed border” we used at the top of this page:

Firefox	IE9
Screenshot of how the border-image example at the top of the page looks in Firefox.	Screenshot of how the border-image example 'falls back' in IE9 using the ridge border-style.

You can also be fancy and use modernizr to do some extra progressive enhancement styling by using the
html.no-borderimage selector. I have done this using the comments section of my blog posts.

Firefox	IE9
Screen shot of comment on my blog using the balloon border-image in firefox (Click to see full screenshot).	Screen shot of the same comment using modernizr to style the comment differently on browsers that don't support border-image (Click to see full screenshot).

Using With Background Images

If you are using a border-image without a transparent colour or alpha channel, the center of your border-image will hide any background-image the object may have. If you want to have a separate background-image, you must “cut-out” the middle of the border-image using your graphics editor with a transparent colour. For instance, the example at the top of the page with the picture frame border-image has a photo of clouds as a background-image. This allows developers to create more graphically rich block-level elements.

Hey! What about IE?

Unfortunately, IE doesn’t support border-image natively. I may have a workaround for this using cssSandpaper, but it needs a lot more testing to see if it is a truly viable polyfill for this effect. If I am successful, I will post whether that solution as an addendum to this blog post.

Conclusion

border-image can be used today to make some very interesting effects that can be degraded gracefully in browsers that don’t support it. It can speed up design time considerably since you don’t have to use your graphics editor to cut up images. And I’m sure it will waste a lot of your time while you play and see how it can be used effectively.