Как сделать тень блока в css
Перейти к содержимому

Как сделать тень блока в css

  • автор:

box-shadow

CSS свойство box-shadow позволяет добавить одну или более тень для блока. Тень блока не влияет на размер и расположение самого элемента (несмотря на то, что тень может быть расположена далеко за его пределами), но она может перекрываться другими элементами, расположенными в коде после текущего элемента, или перекрывать другие элементы, расположенные в коде перед текущим элементом.

Для каждой тени можно задать от 2 до 6 параметров. Если добавляется несколько теней, то список параметров для каждой тени указывается через запятую:

При наложении теней друг на друга каждая последующая тень в списке будет располагаться под предшествующей.

Тень блока может быть как внешней, так и внутренней. Внутренняя тень задаётся с помощью ключевого слова inset , которое указывается в параметрах тени первым или последним.

Примечание: для добавления тени к тексту используйте CSS свойство text-shadow.

Значение по умолчанию: none
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.boxShadow=»10px 10px 5px #888888″

Синтаксис

box-shadow: none|смещение-х смещение-у размытие размер цвет [inset]|inherit;

Значения свойства

Примечание: первые 4 значения, описываемые в таблице, указываются с помощью единиц измерения поддерживаемых в CSS.

Значение Описание
смещение-x и смещение-y Первые два значения устанавливают смещение тени. Первое значение (смещение-x) указывает расстояние смещения по горизонтали. Отрицательные значения располагают тень слева от элемента. Второе значение (смещение-y) указывает расстояние смещения по вертикали. Отрицательные значения располагают тень над элементом. Если оба значения 0, тень располагается за элементом и её не будет видно, так как по умолчанию тень имеет тот же размер, что и элемент. (обязательные параметры)
размытие Третье значение устанавливает степень размытия тени. Чем больше это значение, тем сильнее размытость — тень становится более большой и светлой. Отрицательные значения не допускаются. Если значение отсутствует или равно 0, это означает, что тень будет без размытия — с острыми углами. (необязательное значение)
размер тени Четвёртое значение изменяет размер тени. Положительное значение увеличивает размер тени со всех сторон, отрицательное — уменьшает. Если значение отсутствует или равно 0, это означает, что тень будет того же размера, что и элемент. (необязательное значение)
цвет Определяет цвет тени. Цвет можно установить различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Всегда указывайте цвет тени, так как браузеры по разному обрабатывают отсутствие значения цвета.
inset Ключевое слово, указывающее, что тень должна располагаться внутри элемента. Внутренняя тень создаёт эффект вдавленности и располагается над фоновым цветом и/или фоновым изображением, но под любым содержимым элемента. Если ключевое слово не указано, тень будет отбрасываемая, т.е. будет располагаться под элементом. Ключевое слово может быть расположено в качестве первого или последнего значения. (необязательное значение)
none Указывает на отсутствие тени.

Box-shadow: тень для элемента

Вы можете добавлять к элементам тень и изменять ее внешний вид с помощью CSS-свойства box-shadow. Этот стиль позволяет воплотить в жизнь интересные эффекты, например, объемность и трехмерность блока. Свойство поддерживается всеми современными браузерами. Исключение составляют IE8 и Opera Mini.

Свойство box-shadow: синтаксис

Данный стиль записывается следующим образом:

box-shadow: inset 4px 4px 8px 5px #333333;

Рассмотрим по порядку, за что отвечает каждый параметр (слева направо):

  • Ключевое слово inset : параметр, который необязательно указывать; рисует тень внутри элемента.
  • Сдвиг по оси X: указывает степень смещения тени по горизонтали относительно элемента. Положительное значение означает сдвиг вправо, отрицательное — влево. Значение 0 означает, что тень без сдвига.
  • Сдвиг по оси Y: указывает степень смещения тени по вертикали. Положительное значение означает сдвиг вниз, отрицательное — вверх. Значение 0 — это тень без сдвига.
  • Радиус размытия: это степень размытия тени. Чем больше значение, тем более размыта тень. Если параметр не указан, используется значение по умолчанию — 0 . В таком случае тень будет идеально четкой.
  • Расширение: необязательный параметр, отвечающий за растяжение тени по обеим осям; чем больше значение, тем больше растяжение. Расширение работает только при наличии предыдущего параметра. Значение по умолчанию — 0 .
  • Цвет тени: с этим параметром всё понятно — он задает цвет тени элемента. Цвет по умолчанию — черный.

Примечание. Браузерам Android и более старым версиям iPhone Safari требуется префикс -webkit- для корректной работы CSS свойства box-shadow.

Данное свойство может принимать несколько групп значений (делать несколько теней одновременно). Для этого понадобится перечислить эти группы параметров через запятую. Например:

box-shadow: 15px 15px 20px #8b0163, inset 15px 15px 20px #630046;

Примеры box-shadow

Чтобы вы лучше поняли всю силу и прелесть свойства CSS box-shadow, мы покажем несколько примеров, которые можно смело применять на практике. Данное свойство способно сильно преобразить обычный блок!

Легкая тень
box-shadow: 0 2px 4px rgba(0, 0, 0, .25);

Эффект бумаги
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6), inset 0 0 40px rgba(0, 0, 0, .1);

Несколько слоев
box-shadow: 6px 6px #ccc, 12px 12px #a3a3a3;

Тройная рамка
box-shadow: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0.6), 0 0 0 21px rgba(118, 46, 177, 0.4);

Уголки
box-shadow: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Как видите, свойство box-shadow предоставляет огромное поле для фантазии. Вы можете преображать блоки как угодно — главное, иметь чувство меры! ��

В следующей главе вас ждет изучение свойств width и height, определяющих размеры элементов.

Тень блока (свойство box-shadow) | CSS

Свойство box-shadow (w3.org) создаёт элементу тень.

Тень блока CSS

Как создать объёмный HTML элемент из нескольких box-shadow

box-shadow может иметь сколько угодно значений. Поэтому им можно заменить картинки форматов JPEG, PNG и даже GIF [инструмент lvivski.com]. Можно, но не нужно. А вот создание объёма может быть полезным для того, чтобы смастерить, например, объёмную красивую кнопку.

цвет одной стороны

цвет другой стороны

Эффект тени блока

Тень вокруг div CSS

Хм, отбрасывает ли предмет тень, когда свет на него падает сверху? Да, если предмет удалён от поверхности. Чем дальше, тем интенсивнее тень. Сама проверяла, светя фонариком.

CSS тень с одной стороны

Снизу (под блоком div)

По бокам (справа и слева)

Многослойный блок с помощью box-shadow

Разноцветная CSS рамка

Еще варианты можно посмотреть у css.yoksel.ru.

CSS внутренняя тень блока (внутри элемента)

Как сделать вдавленный элемент

Как сделать выпуклый элемент с округлыми краями

box-shadow inset и картинка img

котёнок мечтает стать львом

котёнок мечтает стать львом

box-shadow и HTML тег input

Сначала поле как-будто вдавленное, при наведении появляется голубая обводка, а при фокусе виден эффект плавно появляющегося свечения. Вот так может выглядеть всплывающая форма обратной связи.

Или подсветка внутри input (получилась красивая форма входа CSS):

box-shadow и transition или animation

box-shadow можно плавно изменять, но нужно учитывать особенность этого изменения:

да нет да

75 комментариев:

Анонимный Спасибо, вам большое.
Статья очень пригодилась NMitra Рада слышать.) VjokerA интересно Versus Отличная статья, огромное спасибо автору! Анонимный Отличная статья, большое спасибо. Marina Здорово, что Вы опять открыли коменты.
Спасибо за статью! Очень понравилось.
Но опять вопрос, как этим пользоваться?
Например если я хочу на блоге сделать так блок со статьями.
Вставила Ваш код перед ]]> и получилась Ваша катринка выше всего блога, пробовала вставить перед header и тоже ужас.
Можно поподробнее рассказать как пользоваться этими тенями по применению к конкретному блоку на blogger.
Заранее спасибо.
Кстати с иконками в шапку я разобралась. Нашла интересное решение беж гаджетов и прочего. :)))
С Уважением Марина. NMitra Мне трудно представить как это сделать (объяснить). Нужно подбирать селекторы http://shpargalkablog.ru/2011/10/css-selectors.html http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html. Другое дело если нужно добавить в тело статьи или гаджет HTML/JavaScript: копируете весь код. Анонимный NMitra — Ты Мужик и я Тя уважаю)) Статья просто класс! NMitra ))) Спасибо за комментарий! Анонимный Спасибо большое! Очень полезная статья 🙂 Анонимный Спасибо. Очень-очень пригодилось! NMitra Отлично! Анонимный круто NMitra Благодарю за отзыв! Віталій Данілов Класно! Спасибо! Анонимный А как сделать тень внутри и только сверху? NMitra box-shadow: 0 3px 3px #575555 inset, 0px -6px 4px -4px; Анонимный Спасибо, Наташа 🙂 А у меня еще и вот так получилось: box-shadow: 0 6px 4px -4px #dadada inset; Тоже подходит. Правда, не до конца понял как оно работает. NMitra Аааа, я не правильно поняла. Вместо внутренней тени только над верхней стороной, дала вариант внутренней тени и тени над верхней стороной. Ужас какой, язык сломаешь :))
Анонимный 😀 да я сам просмотрел, решение то уже описано Вами в варианте тени «снизу», а для верха добавил только inset и все получилось. Здоровские решения на Вашем блоге всегда находятся, спасибо за чудеса CSS! 😉 Анонимный спасибо большое намного облегчает труд. Анонимный И снова я в поиске нашел Ваш блог. Как и прежде кликал по всем рекламным блокам. Спасибо! NMitra Приходите ещё) teller Несколько раз находил и опять терял вашу страницу, в конце концов внес в закладки) NMitra ))) А в моих закладках сам чёрт ногу сломает 🙂 Но найти эти статьи через поиск совсем не предоставляется возможным. Вспомнить правильный запрос, а потом просмотреть выдачу просто нереально. Порой час приходится на закладки тратить, плюс отвлекает дико, там же другие хорошие материалы, содержание которых уже подзабылись. В общем это мой больной вопрос ))) Айнур Шакиров Не давно перебрался с делфи на веб программирование, php освоил быстро, но вот css.. его выучить мало.. тут такое воображение надо, что я прямо не знаю, и всегда у меня все криво). Благо ваш блог нашел, все понятно и удобно и все начинает получатся! Огромное спасибо!! Прошелся по всем рекламным ссылкам).. Просто уже не знаю как отблагодарить)) Нигде таких внятных уроков я еще не видел)) NMitra Ох, да у меня тоже с воображением туго. Из той серии, что знаю как, но не знаю что. Порой что-то выходит только в результате случайных действий. Когда с тенью разбиралась, то бегала по квартире с фонариком, смотрела как кнопки на пульте, листок бумаги и т.п. смотрится, когда на них свет падает. ))) Анонимный Спасибо ,статья дельная. очень пригодилось для реализации. Даже не знал, и не мог подумать, что у тени так много реализаций . Спасибо Анонимный Огромный респект и вселенская уважуха. Roman Lozinsky офигенно.
спасибо. NMitra Очень-очень приятно видеть восторженные реплики! Благодарю! Натааша супер! спасибо! Анонимный Отличная страница, полезная! Анонимный Замечательно)) Чпасибо автору! Здесь то что нужно, можно точно и правильно подобрать значения!! NMitra Благодарю за комментарии! Виктория Понравилось оформление блока тенью по бокам (справа и слева). Оформила себе блок подписки. Огромное спасибо за код стилей. Анонимный Я только не могу понять где HTML код. NMitra

Один селектор, я посчитала лишним писать каждый раз HTML. К тому же тут не нужен даже весь код CSS, нужно только значение box-shadow. У «box-shadow inset и картинка img» и ниже есть HTML после CSS. Анонимный Отлично СПАСИБИЩЕ! Анонимный Спасибо за статью. А что нужно добавит, чтоб это работало и в сафари 5.1. ? у меня не получается! NMitra Добавьте -webkit-

-webkit-box-shadow: 0 0 8px; Анонимный Нет, не помогает. Я взял на вооружения boxShadow18. Сафари не реагирует. NMitra Он вообще box-shadow не понимает или именно мой код? У браузеров может быть разная поддержка на разных устройствах. На компьютере будет работать, а на планшетах и телефонах — нет. Эффект box-shadow можно заменить с помощью фоновой картинки. Анонимный #leftmenu width: 100%;
max-width: 180px;
margin: 1em auto;
padding: 1em;
border-radius: 40px;
background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));/*(Скорее всего тут я допускаю ошибку*/
box-shadow:
inset rgba(0,0,0,.6) 0 -3px 8px,
inset rgba(252,255,255,.7) 0 3px 8px,
rgba(0,0,0,.8) 0 3px 8px -3px;
-webkit-box-shadow: inset 0px 0px -3px 8px rgba(0, 0, 0, 0.6),
-webkit-box-shadow: inset 0px 0px 3px 8px rgba(252, 255, 255, 0.7),
-webkit-box-shadow: 0px 3px 8px -3px rgba(0, 0, 0, 0.8);
>
NMitra Вместо одной

background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));

background-color: #646464;
background-image: -webkit-radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
background-image: radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35)); Анонимный #leftmenu
День добрый! Я Вас не оставляю в покое. Спасибо что откликнулись. Просто действительно понравилось ваша статья и примеры, и решил некоторые свой блоки оформить подобным образом. Что касается моей проблемы, такова эффекта я и вчера добился, но тогда пропадает эффект выпуклости, а это для меня как-то важно. А именно почему можете посмотреть, при желании, на сайте www.dlcompany.org спасибо за отзывчивость. Анонимный Скажите пожалуйста, как для движка mozilla применить одновременно и внутреннюю и внешнюю тень, через запятую работает только одна тень (которая первая, вторая игнорируется). Вот правда — на движке web-kit работает всё 100% — и в chrome и в maxthon — и вроде даже в последней opera, а вот в seamonkey, mozilla, pale moon — нет, в internet explorer — тоже неработает (я имел ввиду запись типа:
box-shadow:0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);
-moz-box-shadow: 0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);
-webkit-box-shadow:0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);) NMitra Вы хоть имя подставляйте.

Комментарий 46:
сделать так, чтобы на всех браузерах на всех устройствах при использовании всех операционных систем картинка 3D выглядела одинаково крайне не просто. Или просто, коли использовать нарисованный background: url(). Разработчик может лишь следовать общим стандартам w3.org и сделать так, чтобы при отсутствии поддержки box-shadow или другого свойства макет сайта не разъехался и были доступны основные функции регистрации, заказа, формы связи и т.п.

Комментарий 47:
у меня всё работает на windows, префиксы пишутся в другом порядке

3 способа использовать box-shadow в CSS

Тени помогают сделать визуальную составляющую сайта интересной и эстетичной. В посте рассмотрим свойство CSS box-shadow и то, как его можно стилизовать.

Что за свойство box-shadow?

Свойство box-shadow позволяет добавить тень вокруг элемента на веб-странице. Тень подсказывает пользователю, является ли элемент — кнопка, картинка — интерактивным. Благодаря теням, вне экранов гаджетов мы получаем представление о размере и глубине объекта, и свойство box-shadow добавляет реализм в оформление сайта.

Вот как обычно это свойство box-shadow прописывают:

box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5)

Первый четыре значения такие:

  1. x-offset, определяет горизонтальное положение тени;
  2. y-offset, определяет вертикальное положение тени;
  3. радиус размытия, который влияет на резкость тени. Чем выше значение, тем менее насыщенные тени, и наоборот;
  4. четвёртое значение определяет распространение тени.

Все значения, кроме радиуса размытия, могут быть отрицательными. Если сделать тень, как описано выше, она окажется внизу элемента. Но если значения заменить на отрицательные, то тень будет сверху:

box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.5)

Если установить распространение на 0 px, тень будет такого же размера, что и элемент. Положительное значение сделает тень больше, отрицательное — уменьшит.

Как сделать тени реалистичными

Следующее значение в свойстве — цвет. Используем цвета rgba() с альфа-каналом, чтобы указывать непрозрачность: это важно для стилизации под реальность, ведь тени в хорошо освещённых местах не чисто чёрные и не слишком плотные. Можете понаблюдать, как тени ведут себя по отношению к источникам света и к поверхностям, на которых лежат. Самые тёмные тени падают на плоскости, которые ближе всего к объекту, а дальше они размываются. Поэтому тень не должна быть похожа на чёрную обводку.

Почему не нужен фильтр dropshadow()

Это фильтр, который добавляет тень вокруг изображения. Его работа сильно отличается от box-shadow . Вот как выглядит разница в коде:

box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3); filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));

Основы box-shadow

Чтобы потренироваться, создайте простой контейнер HTML:

 Затем CSS:
div < height: 150px; width: 150px; background: #fff; border-radius: 20px; >.box

Вот что получится:

Как использовать box-shadow с псевдоклассом :hover и свойством transform

На box-shadow может повлиять псевдокласс :hover . Он добавляет тень к компонентам, у которых её не было, или меняет существующую тень. Вот как это выглядит со свойством transform :

.box:hover

Свойство transform создаёт иллюзию того, что блок приподнимается на странице. Функция translate() изменяет размер окна.

Добавьте ключевое слово inset , чтобы поместить тень внутрь рамки блока или элемента. Так блок будет казаться погружённым в страницу.

.box2 < box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, 0.5); >.box2:hover

Значения можно менять, сколько захотите. Вот как выглядят тени на примерах:

Альтернативой функции translate() будет scale() . Если translate() изменяет положение тени по осям x и y, scale() увеличивает размер блока по этим же осям. Во втором поле добавьте значение scale() в :hover . Размер блока увеличится в 1,1 раза.

.box2:hover
Создание многослойных теней

Тени накладываются друг на друга, если их значения разделить запятыми. Такой способ помогает создавать тени, которые плавно сливаются со страницей. Посмотрим:

box-shadow: 0px 1px 2px rgba(0,0,0,0.1), 0px 2px 4px rgba(0,0,0,0.1), 0px 4px 8px rgba(0,0,0,0.1), 0px 8px 16px rgba(0,0,0,0.1);

Значение распространения не указано — в данном случае не нужно, но эксперименты никто не запрещает.

Если установить значения смещения и радиуса размытия на 0 и добавить значение распространения одной тени, к блоку добавится граница.

box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.5), 0px 2px 4px rgba(0,0,0,0.1), 0px 4px 8px rgba(0,0,0,0.1), 0px 8px 16px rgba(0,0,0,0.1);

Технически эта граница — тень, поскольку блоку в родительском элементе не занимает места. Вот результат применения двух методов, обратите внимание на гладкую и тонкую тень на левой рамке:

Свойство можно использовать с любыми элементами. Хорошо работает с карточками, полями ввода, картинками, кнопками.

Создаём неоновые тени

В реальности тени обычно серые или чёрные, разной степени прозрачности. Чтобы изменить цвет тени, надо поменять источник света. В вебе вместо этого применяют box-shadow . Попробуем на примере:

.box < box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.7); >.box2

Если тени наслаивать друг на друга, свечение можно сделать ярче:

box-shadow: 0px 1px 2px 0px rgba(0,255,255,0.7), 1px 2px 4px 0px rgba(0,255,255,0.7), 2px 4px 8px 0px rgba(0,255,255,0.7), 2px 4px 16px 0px rgba(0,255,255,0.7);

Лучше всего такие тени смотрятся, если сделать их контрастными цветами на тёмном фоне. Яркость можно менять с помощью прозрачности.

Создаём неоморфные тени

Визуально интересный эффект, который имитирует объекты из реальной жизни, такой 3D на минималках. Первые два эффекта, которые мы потренируемся создавать, касаются плоских компонентов, которые как бы парят над страницей, отбрасывая тени на фон. Кажется, что перед нами рельефное изображение.

box-shadow: -10px -10px 15px rgba(255,255,255,0.5), 10px 10px 15px rgba(70,70,70,0.12);

Рельеф можно направить и в глубину:

box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 0.5), inset 10px 10px 15px rgba(70, 70, 70, 0.12);

Вот какой будет результат. Белая тень показывает направление «источника света» и работает, как блик. Похоже на реальный мир:

Попробуем сделать переключатель, на который пользователь сможет «нажимать».

Для начала делаем чекбокс.

input[type="checkbox"] < height: 200px; width: 200px; top: 50%; left: 50%; -webkit-appearance: none; box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5), 10px 10px 15px rgba(70, 70, 70, 0.12); position: absolute; transform: translate(-50%, -50%); border-radius: 50%; /*Makes the circle*/ border: 20px solid #ececec; outline: none; display: flex; align-items: center; justify-content: center; cursor: pointer; >

Добавляем иконку. В примере иконка из Font Awesome.

input[type="checkbox"]::after < font-family: FontAwesome; content: "\f011"; /*ON/OFF icon Unicode*/ color: #7a7a7a; font-size: 70px; >

Задайте свойства, которые отображаются при нажатии на кнопку. Добавьте box-shadow внутри круга, чтобы создать два вложенных слоя.

input[type="checkbox"]:checked

Установите цвет значка после щелчка.

input[type="checkbox"]:checked::after

Поддержка box-shadow в браузерах

К сожалению, не все браузеры, особенно в ранних версиях, поддерживают box-shadow . Так что надо использовать расширение webkit .

-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);/*For webkit browsers*/ -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);/*For Firefox*/ box-shadow: 1px 1px 0px rgba(0,0,0,0.1);

Например, для корректного отображения в Chrome с 4 по 9 версию нужен префикс -webkit- . Mozilla Firefox в версиях 2 и 3 свойство не поддерживается и частично поддерживается в версии 3.5 and 3.6 (с префиксом -moz- ). Safari частично поддерживает свойство в версиях 3.1 и 4 с префиксом -webkit- . Opera поддерживает во всех версиях, кроме 10.1 А у Microsoft Edge всё хорошо.

Если браузер не поддерживает тени, они просто не отображаются и не влияют на макет.

Подсказки

Тени — это здорово, но если использовать их неправильно, можно испортить весь проект. Вот несколько советов, которые надо учитывать при стилизации теней:

  • Лучше меньше. При наложении теней браузер выполняет больше работы. Для современных устройств это не проблема, но если делаете проект для аудитории с потенциально старыми устройствами или плохим интернетом, не перестарайтесь.
  • Нужна логика. Не надо делать тени бессистемными. Предполагается, что у вас есть источники света, которые влияют на объекты на странице. Поэтому в расположении теней будет логика.
  • Без анимации. Если анимировать box-shadow, производительность упадёт. Да и анимированные тени — это уже слишком.
  • Используйте инструменты для наложения теней. Если лень писать много строк кода, а многослойных теней хочется, попробуйте shadows.brumm.af. Он добавляет к объекту до 10 слоёв box-shadow и экономит время, чтобы не вводить вручную несколько значений.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *