You are here

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

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


The syntax of the box-shadow is as follows:

box-shadow: none | <shadow> [ , <shadow> ]*
= inset? && [ <length>{2,4} && <color>? ]


box-shadow: -5px -5px 5px 5px #888;

The first and second values define the horizontal and vertical offset of the shadow respectively, the other 2 values are for the blur and spread distances of the shadow and the last one is obviously for the color of the shadow.


When RTLing, what you need to focus on is the first 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:

box-shadow: 5px -5px 5px 5px #888;

It's that simple!


The reason of that is because, according to the specification:

An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only: it is clipped inside the border-box of the element.

So a positive horizontal offset value will offset the shadow to the left and a negative value will offset it to the right.

Happy RTLing =)

Average: 4 (12 votes)