One of the most widely implemented CSS3 features is 'text-shadow'. Like @font-face
, it had a previous life but was dropped in CSS 2.1. Thankfully it's back and widely supported (all modern browsers and Internet Explorer 9 onwards).
Let's look at the basic syntax:
.element {
text-shadow: 1px 1px 1px #cccccc;
}Remember, the values in shorthand rules always go right and then down. Therefore, the first value is the amount of shadow to the right, the second is the amount down, the third value is the amount of blur (the distance the shadow travels before fading to nothing), and the final value is the color.
The color value doesn't need to be defined as a HEX value. It can just as easily be HSL(A) or RGB(A) :
text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4);
However, keep in mind that the browser must then also support HSL/RGB color modes along with text-shadow
in order to render the effect. If I'd really like to use HSLA or RGBA (because of...