box-shadow только с двух сторон
Задача: добавить свойство box-shadow только с двух сторон у блока.
Решение:
css
div { box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8); width: 100px; height: 100px; margin: 50px; background: white; }
Живой пример на jsfiddle
у этой тени присутствует небольшая тень снизу, ее становится заметно если ложится плотно на , даже если не ложится, глазом видно тень снизу.
Тень есть небольшая, но в моем проекте это не критично.
Есть еще такой вариант: http://jsfiddle.net/lkp_chg/9bj5o8qn/
Вывел для себя в этом случае такую формулу:
box-shadow: -Xpx 0 Xpx -(X+Y)px #color, Xpx 0 Xpx -(X+Y)px #color;
Y — ~2-4px, чтото вроде погрешности.
интересные примеры css тени http://siteacademy.ru/index.php/css/89-circle-hover-effects-with-css-transitions
Ваш e-mail не будет опубликован. Обязательные поля помечены *
Имя *
E-mail *
Сайт
Комментарий
Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
]]>