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

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

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

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

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

Further Reading

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

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

Caching Images.

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

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

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

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

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

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

Download imageCache.js from GitHub.

Using <progress> to Show When Each Image Has Loaded

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

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

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

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

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

   var $loader,
       currentImage = 0;

   me.init = function () {

      var s = [];

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

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

   }

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

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

   ....

}

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

$(window).load(dnfmomd.init)

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

  #content {
     display: none;
  }

  body.loaded #content {
     display: block;
  }

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

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

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

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

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.

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.