box-shadow в CSS3

[Delat]

Синтаксис свойства:

box-shadow: h-тень v-тень размытие протяженность цвет inset;

На своей подопытной страничке http://prodpak.ru перебрав множество примеров из интернета, изменив немного значения методом тыка, мне удалось сделать внутреннюю тень как хотел, но знаний я так и не получил. То есть нет структурного понимания поведения своей же записи на сайте box-shadow: -4px 0 10px -2px #F0F0F0 inset; Например, не пойму почему, когда я сменю -4px на 4px, то тень у блока будет слева. Как же ориентироваться?

Вообще поначалу я полагал, что нужно руководствоваться top right bottom left где относительно элемента тень будет смещаться в ту или другую сторону.

[Softlink]

Надо просто запомнить, что тень с параметром inset работает ровно "наоборот", чем без него.

Например inset 4px по X будет двигать левую границу тени блока, а 4px без inset - правую(внешнюю).

[lexxcode]

Стандартная система координат, что тут запоминать http://jsfiddle.net/alexriz/rrGjS/show/

[Delat]

Стандартная система координат, что тут запоминать http://jsfiddle.net/...riz/rrGjS/show/

почему тогда из первого примера при переходе по ссылке: box-shadow: 0 -10px 5px rgba(0,0,0,.5);

0 - горизонтальное выравнивание (ок!)

-10px - вертикальное выравнивание (тень наложилась не внизу, а вверху относительно блока?)

Всё разобрался, нашел объяснение:

сдвиг по x

Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.

сдвиг по y

Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.

Edited April 28, 2013 by Delat