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

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

What

The syntax of the box-shadow is as follows:

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

Example:

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

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.

How

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;
RTL

It's that simple!

Why?

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: 3.9 (11 votes)

Comments

Thanks a lot, I have developed the simple method to be automated by Regex:

======Regex Code========
(box-shadow(\s+)?:(\s+)?)([1-9])
$1@#-#@$4
-----------------
(box-shadow(\s+)?:(\s+)?)-
$1
-----------------
@#-#@
-
======Regex Code========

Code Edit:
======Regex Code========
(box-shadow\s*:\s*)([1-9])
$1@#-#@$2
-----------------
(box-shadow\s*:\s*-)
$1
-----------------
@#-#@
-
======Regex Code========

I really liked it. Keep sharing such excellent post like this in future too. Informative and good article. I like it very much. Have very interesting content to read out. Thanks dude http://www.munawartidung.com/

The "box shadow" looks nice, I'll try to use it on my webpage. Thank you! http://binaereoptionen.wordpressy.pl/

For the students from countries who come for educational purposes there are a number of special policies available in Arizona that is provided by the universities only. In case the particular university that a student is going to does not offer a proper policy in that case the advisor will also be able to make viable suggestions and even refer the student to a good insurance company or broker who may come in handy. http://www.activeinsuranceadvisors.com

Add new comment

Twitter Updates

Recent comments

Who's online

There are currently 0 users online.