Дата публикации: 10.04.2021

box-shadow только с двух сторон

8bd108ae

Задача: добавить свойство 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

Популярные записи CSS: Добавить фон с прозрачностью mixin: hide-text() [stylus] Примеры media queries Красивый сайт ресторана Sweet basil
4 ответов "
Разработчик тени:
30/12/2014 в 9:24 дп

у этой тени присутствует небольшая тень снизу, ее становится заметно если ложится плотно на , даже если не ложится, глазом видно тень снизу.

Ответить
admin etogo saita:
30/12/2014 в 3:11 пп

Тень есть небольшая, но в моем проекте это не критично.
Есть еще такой вариант: http://jsfiddle.net/lkp_chg/9bj5o8qn/

Ответить
Layoutsmann:
19/03/2015 в 11:31 дп

Вывел для себя в этом случае такую формулу:
box-shadow: -Xpx 0 Xpx -(X+Y)px #color, Xpx 0 Xpx -(X+Y)px #color;
Y — ~2-4px, чтото вроде погрешности.

Ответить
Михаил:
16/12/2015 в 12:43 пп

интересные примеры 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>

]]>