You are here

Quick Tip: RTLing the CSS3 "text-shadow" property

Here's a quick tip when RTLing one of the cool CSS3 properties: text-shadow.

The syntax of the text-shadow is as follows:

none | [<shadow>,]* <shadow>
where <shadow> is: [ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]

Example:

text-shadow: red 2px -2px 3px;
LTR

The [offset-x] and [offset-y] values define the horizontal and vertical offset of the shadow respectively, the other 2 values are for the color and blur distance of the shadow.

When RTLing, what you need to focus on is the [offset-x] value: the horizontal offset of the shadow. Multiply that by a -1 and you'll get the RTLed shadow.

So after RTLing, the previous example will be:

text-shadow: red -2px -2px 3px;
RTL

It's that simple!
Happy RTLing =)

Average: 3.9 (7 votes)