Как сделать тень по углам

Обновлено: 07.07.2024

В процессе графической обработки различных объектов/предметов, для того, чтобы придать им больше реалистичности, довольно часто требуется добавление тени. Давайте посмотрим, как это можно сделать в Фотошопе.

Создаем тень

В качестве примера рассмотрим создание тени текста, а точнее, буквы.

Примечание: описанный алгоритм действий подходит и для объектов (на прозрачном фоне). В этом случае просто создаем копию исходного слоя, возвращаемся на него и продолжаем выполнение инструкции с шага 6.

Заключение

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

Так получилось (и прошу считать это удачным совпадением), именно сегодня на Хабре опубликован топик про практическое применение теней из CSS3 для создания интересных эффектов, а мы в свою очередь подготовили топик про основы для этого творчества.

Мы попробуем разобраться в том, как работают тени в новых модулях CSS3. С практической точки зрения, мы рассмотрим два правила: box-shadow и text-shadow, определенные соответственно в модулях CSS3 Backgrounds and Borders и CSS3 Text.

Оба правила работают схожим образом (вплоть до соответствующей отсылки в спецификации), поэтому имеет смысл рассматривать их вместе. Вместе с этим есть некоторые различия, о которых тоже нельзя не сказать.

Первая часть посвещена работе с box-shadow, во второй мы пройдемся по теням для текста.

box-shadow

Сдвиги и цвет

В самом простом варианте для задания тени достаточно указать два параметра, задающие соответственно горизонтальный и вертикальный сдвиги тени (1.1):

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

По умолчанию, если цвет тени не задан, в большинстве браузеров (все, кроме webkit-based) он берется из цвета текста (color) в текущем контексте (1.2), впрочем, похоже, этот момент спецификацией не обговаривается:

Чтобы задать цвет тени, достаточно указать его дополнительным параметром (1.3):

Очевидно, цвет можно указывать любым из доступных способов: от прямого указания названия и шестнадцатеричного кода, до rgb или rgba и hsla с прозрачностью (мы рассмотрим такие примеры чуть позже).

Размытие

По умолчанию радиус размытия равен 0 и в этом случае тень получается четкой.
В сочетании с разными сдвигами тени, можно получить разные эффекты, например, на (2.3) оба сдвига тени равны нулю, но за счет размытия тень выступает с разных сторон:

Сам алгоритм размытия спецификацией не описывается, кроме указания того, что это должен быть эффект, аналогичный размытию по Гауссу (Gaussian blur) с половинным радиусом в обе стороны от границы тени (2.4):

Растяжение

Еще один интересный параметр — это растяжение или распространие тени (spray), позволяющее увеличить или уменьшить ее размеры (по умолчанию размеры тени соответствуют размеру исходного объекта). Надо отметить, что этот параметр не сразу появился в спецификации, поэтому во множестве примеров в интернете он просто не рассматривается.
Для увеличения тени нужно указать положительный spray-параметр (3.1, 3.2):

Для уменьшения — отрицательный (3.3):

Растяжение или сжатие тени можно расценивать как операцию масштабирования, но спецификация описывает это несколько более хитро (через аналогию с размытием и удаление прозрачных или непрозрачных пикселей), что, впрочем, не меняет сути дела:

На примере выше (3.4) тень смещена на 6px вниз и влево и увеличена на 8px с каждой стороны:

Если в вашем блоке используются скругленные уголки, будьте готовы к тому, что в расширенной тени радиус скругления также будет пропорционально смаштабирован (3.5):

Внутренняя тень

Наконец, еще один хитрый параметр — это возможность применения тени внутри блока. Для этого используется специальное ключевое слово inset (4.1-4.4):

Обратите внимание, что внутренняя тень отрисовывается только внутри блока, к которому применено соответствующее правило, причем применение spray-параметра для внутренней тени (4.2) в отличие от внешней приводит к уменьшению внутреннего перимерта тени.

Множественные тени

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

Например, чтобы получить радужную тень (5.1) достаточно последовательно указать 7 теней с увеличивающимся растяжением:

Обратите внимание, что фактически тени выстраиваются в стек в обратном порядке и отрисовываются, начиная с последней, причем каждая из них применяется к исходному объекту так, как будто есть только она.

Так как тени независимы, вы легко можете сочетать тени, выстроенные в разных направлениях (5.2):

Аналогично, можно сразу задавать внутренние и внешние тени (5.3):

Или, если проявить еще немного фантазии и дополнительных спецэффектов, сделать slick-box, описанный, например, у Matt Hamm (5.5):

(Для упрощения, я убрал код с вендорными префиксами, но вам нужно будет добавить -ms-transform, -webkit-transform и т.д.)

Общий синтаксис

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

Последнее в полном виде разворачивается в следующую схему:

Радиус размытия и растяжение не являются обязательными. inset переключает режим отображения тени с внешней на внутреннюю.

Интерактив

Если вы хотите просто поиграться с тенями в интерактивном режиме, наши коллеги к прошедшей в сентябре конференции Build подготовили демонстрационную страницу: "Hands-on: box-shadow".

Internet Exlorer

Насущный для многих вопрос: box-shadow поддерживается в IE9 и выше.

И еще одна важная деталь: стандартные css-правила, начиная с 9й версии Internet Explorer, работают с использованием аппаратного ускорения — в отличие от нестандартных старых фильтров вроде filter:DXImageTransform.Microsoft.Shadow. То есть, использовать стандарты не только правильнее, но и эффективнее.

Мой совет: старайтесь использовать стандартные возможности, исходя из идей progressive enhacenment.

Желание повысить видимость текста или блока, сделать его более красочным подталкивает нас к всевозможным приемам таким, как, например, тени CSS . И если в Photoshop это делается очень быстро и элементарно, то в CSS придется немного потрудиться. А теперь обо всем по порядку.

Как сделать тень в CSS – коротко о главном

Как сделать тень в CSS — два варианта реализации

Тени блока в CSS — box-shadow . Это свойство состоит из нескольких параметров:

Vertical offset и horizontal offset — это вертикальное и горизонтальное смещение. С помощью этих параметров мы задаем направление, в котором объект будет отбрасывать тень:

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

Свойство text-shadow поддерживают все популярные браузеры ( Google Chrome, Firefox, Opera, Safari ). Text-shadow имеет четыре параметра:

Смещение по горизонтали ( положительное – вправо, отрицательное – влево );
Смещение по вертикали ( положительное — вниз, отрицательное – вверх );
Радиус размытия;
Цвет тени.

По синтаксису text-shadow во многом напоминает box-shadow:

При этом spread-shadow отсутствует. Вот так это может выглядеть на примере:

Базовая тень в CSS

Создадим css файл и укажем в нем следующее:

Смещать тень можно изменяя значение 5px , а задавать тот или иной цвет, применяя rgba . В таком случае у нас получается вот такая тень:

Размытая тень

CSS будет вот такой:

Получаем вот такую тень, которая хорошо будет смотреться под слайдерами:

Двойная тень текста CSS

Синтаксис

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

Тень по бокам блока в CSS

Внутренняя тень CSS

Внутренняя тень блока в CSS — inset в box-shadow

Если вы сумели разобраться с основным синтаксисом свойства box-shadow , то сделать внутреннюю тень CSS вам не составит труда. Единственный нюанс — можно дополнительно указать цвет в формате RGBA :

Альфа-значение будет отвечать за прозрачность тени:

Внутренняя тень текста CSS: inset в text-shadow

Для создания внутренней тени текста, недостаточно просто добавить inset в код:

Как добавить дизайну глубины и сделать его более объемным? Поработайте с тенями. Показываем самые простые способы, как сделать тень от объекта.

Как добавить тени на фото онлайн — способ 1

Чтобы сделать тень онлайн на компьютере, для начала зарегистрируйтесь в бесплатном графическом редакторе Canva — это займет считанные минуты. Затем следуйте инструкции ниже.

Шаг 1. Создать новый дизайн

Шаг 2. Загрузить фото

Шаг 3. Перенести фото на рабочую область

Шаг 5. Подключить пакет эффектов "Shadows"

Шаг 6. Выбрать стиль тени

В пакете эффектов "Shadows" есть возможность выбрать один из следующих стилей тени:

подсветка;
падающая тень;
угловая тень;
дугообразная тень;
фоновая тень;
загнутый угол с тенью.

На этом этапе вы можете переключаться между стилями, чтобы выбрать наиболее удачный. Один клик по кнопке стиля покажет, как сделать тень с настройками по умолчанию. Второй клик по той же кнопке откроет меню дополнительных настроек. В нашем примере мы остановились на падающей тени.

Шаг 7. Настроить параметры тени

В меню дополнительных настроек есть возможность выбрать место размещения тени (в раскрывающемся списке сверху) и настроить параметры:

смещение;
угол падения;
прозрачность;
размытие;
цвет.

Шаг 8. Завершить и скачать дизайн

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

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

Большинство разработчиков используют box-shadow с тремя числовыми значениями и цветом, например, так:
box-shadow: 2px 3px 4px rgba(0,0,0,.5);
Следующая последовательность шагов хорошо (хотя и не совсем точно с технической точки зрения) описывает процесс создания такой тени:

1. Рисуется прямоугольник цвета rgba(0,0,0,.5)с теми же габаритными размерами и в той же позиции, что и наш элемент.
2. Он смещается на 2px вправо и на 3px вниз.
3. Он размывается на 4px с помощью алгоритма размытия Гаусса (или схожего). По сути, это означает, что цветовой переход по краям тени между цветом тени и полной прозрачностью будет приблизительно в два раза больше радиуса размытия (в нашем примере это 8px).
4. Размытый прямоугольник затем обрезается по контуру пересечения с нашим исходным элементом для создания впечатления, что он находится позади него. Это немного отличается от того, как большинство разработчиков визуализируют тени в уме (размытый прямоугольник под элементом). Однако в некоторых сценариях использования важно понимать, что никакая тень под элементом не рисуется.

Например, если мы зададим для элемента полупрозрачный фон, то тени внизу мы не увидим. В этом отличие такой тени от text-shadow , которая не обрезается по контуру текста. Использование радиуса размытия, равного 4px , означает, что габаритные размеры нашей тени приблизительно на 4px больше габаритных размеров элемента, поэтому часть тени будет выглядывать со всех сторон элемента.

Мы могли бы установить другие значения сдвига, увеличив их как минимум на 4pх, чтобы спрятать тень сверху и слева. Но в результате у нас получится слишком уж бросающаяся в глаза тень, а это выглядит непривлекательно.

Кроме того, даже если бы это нас не беспокоило, изначально мы все же хотели получить тень только с одной стороны, помните? Решение предлагает нам менее известный четвертый числовой параметр, который указывается после радиуса размытия и носит название радиуса размазывания. Радиус размазывания увеличивает или (если он меньше нуля) уменьшает размер тени на указанное вами значение.

Например, радиус размазывания, равный -5px , уменьшает ширину и высоту тени на 10px (по 5px с каждой стороны).
Отсюда логически вытекает, что если мы применим отрицательный радиус размазывания, абсолютное значение которого совпадает с радиусом размытия, то тень получит габаритные размеры, точно совпадающие с габаритными размерами элемента, для которого она определена.

Тень вдоль двух соседних сторон

Еще один часто задаваемый вопрос касается создания тени с двух сторон элемента. Если это соседние стороны (например, правая и нижняя), то все просто: можно либо удовлетвориться эффектом, аналогичным показанному выше, либо воспользоваться вариантом трюка из предыдущего раздела, но с некоторыми отличиями: сжимая тень, мы не должны пытаться убрать размытие с обеих сторон — только с одной.

Следовательно, для радиуса размазывания необходимо указать значение, не противоположное радиусу размытия, а равное лишь его половине (с противоположным знаком); нам нужны оба смещения, так как тень необходимо сдвинуть и по горизонтали, и по вертикали. Значения смещения должны быть больше или равны радиусу размытия, поскольку вдоль остальных двух сторон тень должна быть полностью спрятана. Например, вот что нужно для создания черной (цвета black ) тени шириной 6px вдоль правой и нижней сторон элемента:
box-shadow: 3px 3px 6px -3px black;

Тень вдоль двух противоположных сторон

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Читайте также: