Учебное пособие по CSS Box Shadow: пошаговое руководство (+ примеры)

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

Если до сих пор вы боролись с правильным использованием box-shadow , вы попали в нужное место. В приведенном ниже руководстве мы рассмотрим все, что нужно знать об этом свойстве CSS. Мы поговорим о том, что он делает, как правильно использовать его синтаксис, несколько крутых примеров CSS box-shadow и, наконец, некоторые инструменты-генераторы, облегчающие работу с ним.

Что такое тень блока CSS?

Даже если вы до сих пор не знали о CSS-свойстве box-shadow , вы, вероятно, видели его в действии в Интернете.

Выше приведен хороший пример того, как это выглядит в дикой природе (даже если я немного увеличил его здесь, чтобы подчеркнуть). box-shadow — это в основном то, о чем говорит название: он позволяет добавить тень к кадру практически любого элемента. Тень также будет придерживаться формы своего якоря, будь то квадратная, прямоугольная, круглая или овальная. Это справедливо даже в том случае, если вы установили свойство border-radius .

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

Базовый синтаксис тени блока

Когда вы смотрите на элемент с тенью блока с помощью инструментов разработчика браузера, вы обнаружите такую ​​разметку:

 box-shadow: inset 0 25px 40px 0 rgba(0, 0, 0, 0.3);

Выглядит немного сложно, правда?

Но не волнуйтесь, вам не нужны все эти объявления все время. Кроме того, как только вы поймете, как они работают, это больше не будет казаться таким запутанным, как в начале.

Как вы можете видеть выше, box-shadow может принимать до шести значений. Давайте рассмотрим их один за другим.

смещение-х

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

Вы можете использовать все распространенные типы данных CSS, обозначающие длину этого значения, например px , em , vh и другие. Чаще всего используются px и em .

смещение-у

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

радиус размытия

Это определяет размытие тени блока. Чем выше значение, тем более размытым будет изображение. blur-radius также принимает все распространенные значения длины CSS, но не отрицательные значения.

радиус распространения

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

цвет

Как вы, наверное, догадались, это позволяет вам определять цвет тени блока всеми обычными способами. Чаще всего он обозначается шестнадцатеричными (например #ededed ) или rgba (например rgba(46, 182, 142, 0.9) ) значениями. Последнее также позволяет вам управлять непрозрачностью, которая обычно используется для теней.

Обратите внимание: если вы не установите цвет, браузер будет использовать текущий цвет текста.

вставка

Наконец, вы можете дополнительно добавить inset в начале объявления. Это изменяет тень с тени на тень внутри элемента. Он отображается внутри границы, над фоном, но под содержимым элемента, поэтому, например, не будет закрывать текст.

Использование значений по порядку

Вот порядок, в котором отображаются значения свойства box-shadow .

 box-shadow: offset-x offset-y blur-radius spread-radius color inset;

Чтобы назначить тень блока, вам нужно как минимум два значения длины. Браузер автоматически использует их для offset-x и offset-y . Если вы добавите третий, он будет интерпретирован как blur-radius , а четвертый — как spread-radius . inset и color являются необязательными и могут появляться в конце или в начале и в любом порядке. Приведенный ниже CSS будет иметь одинаковый результат.

 box-shadow: 20px 20px 10px 0 inset rgba(0, 0, 0, 0.5); box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5) inset; box-shadow: inset 20px 20px 10px 0 rgba(0, 0, 0, 0.5); box-shadow: rgba(0, 0, 0, 0.5) 20px 20px 10px 0 inset; box-shadow: rgba(0, 0, 0, 0.5) inset 20px 20px 10px 0; box-shadow: inset rgba(0, 0, 0, 0.5) 20px 20px 10px 0;

Назначение нескольких теней блока

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

 box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5), -20px -20px 10px 0 olive;

Приведенный выше код выглядит следующим образом:

Вы также можете использовать это для создания линий вокруг элементов. Для этого вам просто нужно добавить несколько теней разных цветов и установить их смещения и размытие на ноль.

 box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5), 0 0 0 10px olive;

Это приводит к контурам с разными цветами:

Обратите внимание, что это не влияет на размеры блочной модели, поэтому блочные тени не увеличивают общий размер элемента, как margin или border .

Совместимость с браузером

Совместимость браузера с box-shadow на самом деле не то, о чем вам нужно беспокоиться. Это хорошо зарекомендовавшее себя свойство CSS, принимаемое практически каждым браузером, включая такие разметки, как inset и множественные тени.

Для поддержки старых версий некоторых браузеров обычно включают -webkit-box-shadow и -moz-box-shadow с одинаковыми значениями. Однако для последних версий наиболее распространенных браузеров в этом больше нет необходимости.

Примеры тени блока CSS

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

Добавляем тень к кнопке

Кнопки часто представляют собой элементы, к которым применяется тень блока. Это потому, что это хороший способ выделить их на странице. В конце концов, если вы включаете кнопку, вы обычно хотите, чтобы люди нажимали на нее. Чтобы побудить их сделать это, вот простой пример того, как это можно сделать с тенью блока.

Сопутствующая разметка выглядит так:

 box-shadow: 0px 11px 12px rgba(0, 0, 0, 0.2);

Тень софтбокса

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

Для достижения вышеуказанного эффекта вы можете использовать следующую разметку:

 box-shadow: 0 0 50px 10px #999;

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

Множественные тени коробки

Последние примеры box-shadow предназначены для одновременного использования нескольких теней. Это предлагает различные возможности. Во-первых, вы можете ввести крутую плавную тень в несколько шагов.

Это удивительно просто: вам просто нужно наложить тени друг на друга с равномерно увеличивающимся смещением, одновременно уменьшая непрозрачность. Кстати, при использовании множества теней блока лучше писать объявления отдельными строками, а не одним длинным объявлением. Это намного облегчает понимание.

 box-shadow: 10px 10px rgba(0, 0, 0, 0.4), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px rgba(0, 0, 0, 0.05);

Вы также можете пойти дальше, введя тени белого поля с отрицательным значением spread-radius между ними, что приведет к иллюзии нескольких элементов друг над другом.

Почему значение спреда отрицательное? Потому что в противном случае тени белого поля закрывали бы те, что под ними. Отрицательное значение сжимает их так, что цвет позади них может просвечиваться. Ниже приведена разметка, которая вам понадобится, если вы хотите реализовать подобный эффект на своем сайте:

 box-shadow: 10px 10px 0px -3px rgba(255, 255, 255), 10px 10px rgba(0, 0, 0, 0.4), 20px 20px 0px -3px rgba(255, 255, 255), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px 0px -3px rgba(255, 255, 255), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px 0px -3px rgba(255, 255, 255), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px 0px -3px rgba(255, 255, 255), 50px 50px rgba(0, 0, 0, 0.05);

Последний пример для нескольких теней CSS — это вышеупомянутый метод установки смещения и размытия на 0 . Как мы видели выше, это приводит к тому, что элемент имеет несколько контуров, в данном случае цветных. Однако это работает только потому, что значение spread-radius увеличивается для каждой тени блока.

Если вы хотите попробовать это на себе, вы можете начать с этого:

 box-shadow: 0px 0px 0px 3px red, 0px 0px 0px 6px orange, 0px 0px 0px 9px yellow, 0px 0px 0px 12px green, 0px 0px 0px 15px blue, 0px 0px 0px 18px indigo, 0px 0px 0px 21px violet;

Лучшие генераторы коробчатых теней

Как мы уже говорили, box-shadow принимает множество значений. Поэтому может потребоваться немного проб и ошибок, пока вы не получите нужную тень.

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

Вот лучшие варианты генераторов теней:

• box-shadow.dev — этот одноцелевой инструмент обладает всеми необходимыми функциями и лучшим пользовательским интерфейсом из всех. Вы можете использовать inset , создавать несколько теней, управлять смещениями, размытием и распространением с помощью ползунков, а также вводить цвета вручную. Когда все будет готово, нажмите « Показать код» , чтобы скопировать разметку CSS. Единственным недостатком является то, что он не предоставляет код для старых браузеров.
• CSSmatic Box Shadow CSS Generator — аналогично предыдущему. Позволяет управлять свойствами box-shadow с помощью ползунков, а также вводить числа вручную. Имеет собственный контроль непрозрачности, что приятно. С другой стороны, отсутствует функциональность для нескольких теней. Разметка кода, которую вы получаете, включает старые браузеры.
• Box Shadow CSS Generator — надежный вариант, который также имеет возможность выбора цвета и дает вам код для старого браузера. Вы можете скопировать его простым щелчком мыши. Он имеет контроль непрозрачности, но может создать только одну тень.
• CSS3gen CSS3 Box Shadow Generator — еще один генератор теней. Крутой особенностью здесь является то, что вместо смещения x и y вы можете выбрать угол тени и расстояние, а инструмент сделает все остальное автоматически. По какой-то причине у spread-radius и inset есть собственное меню. CSS, который вы можете просто скопировать и вставить, также содержит разметку для старых поколений браузеров.

Заключительные мысли: CSS Box Shadow

Поначалу свойство box-shadow может быть ошеломляющим. Это одно из тех свойств, которое принимает много значений, поэтому оно может выглядеть сложнее, чем есть на самом деле. Надеемся, что это руководство по CSS box-shadow развеяло это чувство.

Выше мы рассмотрели, что такое CSS box-shadow и как он работает. Мы объяснили синтаксис, значения и то, как они работают вместе. Кроме того, мы рассмотрели ряд примеров того, как использовать тени CSS в реальной жизни, включая разметку, которую вы можете использовать прямо сейчас. Наконец, для тех, кому нужна небольшая помощь, мы перечислили несколько генераторов box-shadow CSS, которые могут сделать за вас большую часть тяжелой работы.

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

Как вы используете тень блока CSS на своем веб-сайте? Какие интересные варианты использования мы не рассмотрели выше? Дайте нам знать в комментариях ниже!