3

I have the following CSS shadow:

box-shadow:green 0 1px 3px;

Now, if I want to change only the direction of the shadow, I tried:

box-shadow:inherit 2px 0 inherit;

But this does not work unfortunately. Also it doesn't look like there are additional properties available like:

box-shadow-direction:2px 0;

Or

box-shadow-color:inherit;

How can the direction be changed without changing the color or strength?

Simon Ferndriger
  • 4,455
  • 6
  • 28
  • 53

2 Answers2

3

A box shadow is defined like this: x y blur spread color.

So if you want to move your box shadow, change your x and y.

box-shadow: 10px 10px 5px #000;

This code creates a black box shadow that is positioned 10px from the top and left. (Note that I didn't have to specify the spread amount.)

sheng
  • 1,226
  • 8
  • 17
  • OK, but you defined the color again. I want to keep/inherit the existing color... – Simon Ferndriger Dec 04 '13 at 15:24
  • 1
    @SimonFerndriger my bad, I misunderstood your question. You may want to look at [this link](http://stackoverflow.com/questions/3012899/box-shadow-is-there-a-box-shadow-color#10989662). It seems that a box shadow uses the `color` property if no box shadow color is specified. Thus, you should be able to say `color: inherit;` and set the parent color to something, and the parent and child's box shadow colors should be equal. Hope this helps. – sheng Dec 05 '13 at 01:56
  • Thank you. Unfortunately, changing the main color is definitely not what I want to do :) – Simon Ferndriger Dec 06 '13 at 10:28
  • @SimonFerndriger stupid me -- you don't have to say `color: inherit` because the color property is automatically inherited... Anyway, can't you use multiple containers? You could just set the color of a main element for the immediate parent to change the child's box shadow color. Then, you could have another content element which is a child of your main element you would set to `color: #000`. – sheng Dec 07 '13 at 22:59
  • Sorry to complicated. Thanks anyway. I just used to redundant version for now. – Simon Ferndriger Dec 10 '13 at 09:53
1

As of I know there is no sub-attribute like background-repeat, margin-left, border-bottom for box-shadow, text-shadow CSS3 attributes. For more details, please refer: http://www.w3.org/TR/css3-background/#box-shadow .

The ‘box-shadow’ property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional ‘inset’ keyword. Omitted lengths are 0; omitted colors are a UA-chosen color.

Where

<shadow> = inset? && [ <length>{2,4} && <color>? ]

So, you can't give a sub-attribute like box-shadow-direction:2px 0; after defining box-shadow to an HTML element until it or similar sub-attribute came to live in next versions of CSS.

Ravimallya
  • 6,550
  • 2
  • 41
  • 75
  • Thank you. And the "inherit" (`box-shadow:inherit 2px 0 inherit;`) method probably also does not work in any other way? – Simon Ferndriger Dec 06 '13 at 10:26
  • First inherit won't work as for what or from which needed to be inherited? inset or x direction value? color also not getting inherited from parent. See http://jsbin.com/ahOcUmIs/1/edit – Ravimallya Dec 06 '13 at 10:40