Submitted by layalk on Tue, 22/07/2014 - 10:30
Here's a quick tip when RTLing one of the cool CSS3 properties:
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>? ]
text-shadow: red 2px -2px 3px;
[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;
It's that simple!
Happy RTLing =)