Box-Shadow

Which way to the point shadow

[NickMNS]

Here is a simple UI question for which I could not find an answer. When it comes to shadows on buttons and other elements, that is "box-shadow", is there a preferred direction to which to cast the shadow, to the left or right?

[lammert]

I always look at the Windows buttons. They have the light source top-left.

[NickMNS]

Good call on the Windows buttons.

I think because I'm left handed, I feel more comfortable with the light source coming from the top-right. Strange...

Top-left it is!

[Dimitri]

You can adapt the code from here : [zachstronaut.com...] to make the mouse pointer act as the light source :)

[NickMNS]

Fun link. But given the way the layout is setup you can't see the shadow when the light source is from the top.

My issue isn't how does it look, my issue is how is it perceived. As I said I, personally I prefer the shadow to be cast from top right light source, but my preference may not be representative of the public in general. A little details like this, not even noticeable in most cases, can be very off putting for some.

I took a look at my AdSense dashboard and Google cast its shadows straight down (center-top light source).

[lucy24]

is there a preferred direction to which to cast the shadow, to the left or right?

Is your site in English or other LTR script? Picture the light source being at the beginning of the text, which puts it at the top left. If it’s in an RTL script everything should go in the opposite direction, with the light source in the top right. For a top-to-bottom script, again look at the origin of the first column, left or right.

I don't think there are any widely used languages that are written bottom-to-top, and thankfully boustrophedon has gone out of fashion. We will not talk about texts that begin in the middle and spiral outward.

[tangor]

@lucy24 has it right ... as in English language is scanned LEFT to right. I generally adhere to that concept for most anything on my pages (all in English).

[lammert]

I always thought that the default location of light and shadow for buttons was inspired by the way classrooms are designed. Most people are right-handed and with windows on the left side of the classroom, the writing hand does not obstruct the natural light falling on the paper. We were conditioned during many years of education that the blackboard on the wall has a shadow in the right bottom corner.

[tangor]

Heh, that, too... though I suspect my elementary school was a bit off (teachers insisting on desks facing the other direction). Half of the classrooms were "backwards", or had no windows at all. Whew!

Secondary note: Those users who control visuals for accessibility reasons will see none of the "artwork", and those with high contrast will see even less. Does not mean one shouldn't do all possible for cosmetics, just know that a percentage of users will never see it.

[NickMNS]

For the record, the site will be in English

@lammert I had the exact same thought. Being left handed my desk lamp is always located on the right side of my desk such that it doesn't cast a shadow on what I am writing. So instinctively I prefer the top-right light source.

Maybe I should use a top-right light source to please all my fellow south paws! Lefties Unite!

[coothead]

Hi there NickMNS,

as "box-shadow" is purely cosmetic it does
not really matter where you put it. ;)

You can even leave it out altogether as no
one really cares.

As a matter of interest these forums do
not appear to bother with them either. :)

birdbrain