Month: November 2011

Right off the bat: as of nov 2011, it is not compatible with IE 9… shame on IE.

Example (putting a small white shadow on black text below). First parameter is horizontal alignment, second is vertical, third is blur. In this case we are just using the second, setting it to a light shade of brown. The third one is the blur, it could be used to produce “cloudy” effects around fonts.

Notice how we didn’t use white, because the contrast will be 1px thick, and we just want a slight shade of white at the bottom… unfortunately we can’t use anything less than 1px (like 0.5px will be perfect in this case). So we fake a smaller white line by using the light tones of grey. A bad hack, but since we are limited by the one pixel limit in CSS, it will do for now.

You can have multiple shadows in the same text, just add them after the first one with a comma. The first one will have higher “z-index” than the other ones, so the only way they will show is if they have more blur or horizontal or vertical pixels than the preceding ones.

.whatever{

color: #3A3A3A;
text-shadow: 0 1px 0 #AAA;

}