Submitted by layalk on Tue, 22/07/2014 - 10:30
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 =)
Tags: