Как сделать красивую тень css

CSS box-shadow генератор

Box shadow CSS свойство

box-shadow — это CSS3 свойство, которое позволяет создавать эффект тени для, практически, любого элемента веб страницы. Оно похоже на эффект Drop Shadows в Photoshop, с помощью этого свойства создается иллюзия глубины на 2-мерных страницах.

Синтаксис

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

В отличие от других свойств, каких как border, которые разбиты на подсвойства (border-width, border-style и тд), box shadow CSS стоит особняком. Соответственно, важен порядок, в котором вы записываете значения свойства.

Горизонтальное смещение (по оси X)

Вертикальное смещение (по оси Y)

Размытие

Третье значение (blur) представляет собой радиус размытия тени, посмотрите как он работает на box shadow генераторе выше. Значение 0 означает, что тень будет совсем не размыта, края и стороны будут абсолютно четкие. Чем выше значение, тем более мутную и размытую тень вы получите. Отрицательные значения не допускаются.

Растяжение

Четвертое значение (spread) представляет собой размер тени или дистанции от тени до элемента. При положительном значении тень увеличится, выйдет за пределы элемента. Отрицательное значение уменьшит и сожмет тень.

Цвет тени может быть абсолютно любым и записан в разных форматах, доступных в CSS (HEX, RGB, RGBA и пр), попробуйте разные оттенки в css box shadow generator.

Внешняя/внутренняя

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

Несколько теней

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

Круглая тень

Тень может быть круглой, для этого достаточно добавить свойство border-radius

Эффект увеличения с тенью

Используя свойства box-shadow и transform, можно создать иллюзию приближения и отдаления элемента от пользователя.

Эффект парения элемента с помощью box-shadow

Мы можем добавить тень к псевдоэлементу :after и создать тень ниже элемента. Тем самым создавая иллюзию, что элемент был поднят вверх, а потом упал.

Тень и свойство clip-path

Профессиональная разработка сайтов под заказ

Прекрасный способ визуально выразить главную мысль

Источник

Внутренние тени в CSS

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

Как сделать красивую тень css

Синтаксис

Прежде всего рассмотрим два основных способа реализации теней в CSS.

box-shadow

Конструкция box-shadow содержит несколько различных значений:

Как сделать красивую тень css

Horizontal offset и vertical offset — горизонтальное и вертикальное смещение соответственно. Эти значения указывают, в какую сторону объект будет отбрасывать тень:

Как сделать красивую тень css

Blur radius и spread radius немного сложнее. В чем их разница? Взглянем на пример с двумя элементами, где значения blur radius отличаются:

Как сделать красивую тень css

Край тени просто размывается. При различном значении spread radius видим следующее:

Как сделать красивую тень css

В этом случае видим, что тень рассеивается на большую площадь. Если не указывать значения blur radius и spread radius, то они будут равны 0.

text-shadow

Синтаксис очень похож на box-shadow:

Как сделать красивую тень css

Значения аналогичные, только нет spread-shadow. Пример использования:

Как сделать красивую тень css

Inset в box-shadow

Чтобы «перевернуть» тень внутрь объекта, необходимо добавить inset в CSS:

Как сделать красивую тень css

Разобравшись с основным синтаксисом box-shadow, понять принципы реализации внутренних теней очень легко. Значения все те же, можно добавить цвет (RGB в hex):

Как сделать красивую тень css

Цвет в формате RGB, альфа-значение отвечает за прозрачность тени:

Как сделать красивую тень css

Изображения с тенями

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

Логично предположить, что добавить тень можно так:

Как сделать красивую тень css

Существует несколько способов решить эту проблему, каждый из которых имеет свои плюсы и минусы. Рассмотрим два из них. Первый — это обернуть картинку в обычный div:

Как сделать красивую тень css

Все работает, но приходится добавлять немного лишней разметки HTML и CSS. Второй способ — это установить изображение фоном нужного блока:

Как сделать красивую тень css

Вот, что может получится при использовании внутренних теней:

Как сделать красивую тень css

Inset в text-shadow

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

Как сделать красивую тень css

Для решения, сначала применим к заголовку h1 установим темный фон и светлую тень:

Вот, что получается:

Как сделать красивую тень css

Добавляем секретный ингредиент background-clip, который обрезает все, что выходит за пределы текста (на темный фон):

Как сделать красивую тень css

Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:

Как сделать красивую тень css

Поддержка браузерами

Проверить поддержку background-clip браузерами можно на caniuse.

Источник

CSS3. Работа с тенями. Часть 1

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

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

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

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

box-shadow

Сдвиги и цвет

Как сделать красивую тень css

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

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

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

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

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

Размытие

Как сделать красивую тень css
Третий «линейный» параметр, который можно задать при описании тени — это радиус размытия (blur), положительная величина, указывающая насколько сильно нужно размывать тень по пространству (2.1–2.3):

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

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

Растяжение

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

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

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

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

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

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

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

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

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

Обратите внимание, что фактически тени выстраиваются в стек в обратном порядке и отрисовываются, начиная с последней, причем каждая из них применяется к исходному объекту так, как будто есть только она.
Как сделать красивую тень css
Так как тени независимы, вы легко можете сочетать тени, выстроенные в разных направлениях (5.2):

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

Как сделать красивую тень css
Или «продвинутое подчеркивание» (5.4):

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

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

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

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

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

Интерактив

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

Internet Exlorer

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

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

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

Источник

Тень элемента в CSS

С появлением стандарта CSS 3 введено свойство box-shadowКак сделать красивую тень css, которое получило широкое применение среди веб-разработчиков, так как оно позволяет с легкостью добавить одну или несколько теней к блоку элемента для придания желаемого визуального эффекта.

В предыдущий статье мы с Вами рассматривали свойство border-radiusКак сделать красивую тень css, используя его, вы можете получить тень с закругленными углами. По аналогии с текстовой тенью (text-shadowКак сделать красивую тень css), вы сможете создавать множественные тени, они наносятся по z-оси спереди назад (с первой заданной тенью сверху).

Давайте детально рассмотрим синтаксис этого современного свойства:

Как сделать красивую тень css

Рис. 95 Схема работы CSS свойства box-shadow.

Рассмотрим по порядку возможные значения этого свойства:

Основные моменты, которые вам необходимо понять, чтобы создавать тени для элементов:

Хочу обратить Ваше внимание на то, что свойство box-shadowКак сделать красивую тень css в настоящее время поддерживается всеми современными браузерами:

СвойствоChrome

FirefoxOperaSafariIExplorerEdge
box-shadow Как сделать красивую тень css10.0
4.0
-webkit-
4.0
3.5
-moz-
10.55.1
3.1
-webkit-
9.012.0

Перейдем к практике и начнем с простого примера, в котором добавим по одной тени к элементам:

В данном примере мы добавили на страницу:

Реэультат нашего примера:

Как сделать красивую тень css Рис. 96 Пример использования свойства box-shadow в CSS.

Использование множественных теней

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

В данном примере мы добавили на страницу:

Реэультат нашего примера:

Как сделать красивую тень css Рис. 97 Пример использования множественных теней в CSS.

Использование теней для изображений

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

Работу с фоновыми изображениями мы подробно рассмотрим в статье учебника «Работа с фоном элемента в CSS», а сейчас, чтобы поставить точку в изучении использования теней, поверхностно её затронем, и используем изображение в качестве фона к элементу в следующем примере:

В данном примере мы добавили на страницу:

Реэультат нашего примера:

Как сделать красивую тень css Рис. 98 Пример использования теней для изображений в CSS (свойство box-shadow)

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Как сделать красивую тень css Практическое задание № 25.

Подсказка: Обращаю Ваше внимание, что задачи 4, 5 и 6 считаются продвинутыми и расположены по мере нарастания сложности. Для их выполнения необходимо использовать множественные тени (две для четвертой задачи, четыре для пятой и три для шестой).

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

Источник

7 классных примеров с тенями для текста, которые вы просто не можете пропустить

Как сделать красивую тень css

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

Честно скажу, что некоторые идеи (две-три) были подсмотрены в различных статьях по работе с Photoshop — и мне было интересно, можно ли достичь схожих эффектов просто используя text-shadow.

Также должен сразу предупредить, что многие примеры (если не сказать, что большинство) могут не работать в вашем любимом браузере, потому что он еще не поддерживает актуальную версию text-shadow со spread-distance. Но вы всегда можете поставить себе «Platform Preview»-версию Internet Explorer 10, чтобы протестировать новые возможности.

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

Arcade Love

В первом примере мы попробуем сделать выпуклые буквы на специальной подложке. И начнем с того, что у нас просто будет надпись нужного нам цвета:

Как сделать красивую тень css

Далее начинается последовательная работа по формированию выпуклости букв, за счет последовательного наложения теней со сдвигом в 1px по диагонали (обратите внимание на то, как задается цвет тени относительно цвета текста!):

Как сделать красивую тень css

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

Как сделать красивую тень css

Теперь, чтобы сделать подложку, необходимо расширить тень (4-й параметр — spray-distance):

Как сделать красивую тень css

Наконец, чтобы надпись вместе с подложкой аккуратно приземлилась на фон, нужно добавить небольшое затенение внизу:

Как сделать красивую тень css

Финальный результат

Как сделать красивую тень css

Color Happiness

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

Как сделать красивую тень css

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

Как сделать красивую тень css

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

Как сделать красивую тень css

Осталось повторить этот же прием еще несколько раз, увеличивая размер подложки и смещая ее оттенок в нужную сторону:

Как сделать красивую тень css

Финальный результат

Как сделать красивую тень css

Chocolate

Третий пример получился почти случайно из экспериментов с чередованием теней. Как и в предыдущих случаях, давайте начнем просто с задания цвета надписи:

Как сделать красивую тень css

Первая вещь, с которой я начал, это классическая 3D-надпись:
Как сделать красивую тень css

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

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

Как сделать красивую тень css

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

Как сделать красивую тень css

Слегка еще поигравшись над небольшими нюансами, я получил следующий результат.

Финальный результат

Как сделать красивую тень css

Cream Cake

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

Как сделать красивую тень css

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

Как сделать красивую тень css

Далее мы добавляем светлую кремовую подложку (оттенок смещен к желтому, а цвет сделан с повышенной светлостью):
Как сделать красивую тень css

Теперь надо добавить подложке немного объема, для чего задаем тень со смещением, делаем ее того же цвета, что и сам текст, но немного менее насыщенным. Обратите внимание, что за счет того, что подложка к надписи расширена больше, чем тень к ней (7px против 4px), получается что последняя тень меньше подложки:
Как сделать красивую тень css

И последний штрих: аналогичное размытие подложки для более мягкого сочетания с фоном:
Как сделать красивую тень css

Финальный результат

Как сделать красивую тень css

Plastic

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

Как сделать красивую тень css

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

Как сделать красивую тень css

Далее можно добавить дополнительную обводку с небольшим размытием (обратите внимание на увеличение размера тени и пониженную светлость):

Как сделать красивую тень css

Получилось темновато — надо вставить между двумя тенями еще одну для осветления:

Как сделать красивую тень css

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

Как сделать красивую тень css

При необходимости можно добавить еще несколько дополнительных штрихов, чтобы сгладить переход от обводки к тени.

Финальный результат

Как сделать красивую тень css

Painting

Последующие два эксперимента касаются большей работы с прозрачностью. Начнем с такой задачи — как сделать что-либо с тенью внутри текста? На самом деле, напрямую никак, потому что для text-shadow, в отличие от box-shadow, нет параметра inset. Все тени, которые вы рисуете, выстраиваются в стек и отрисовываются одна поверх другой, причем сам текст всегда располагается сверху! Текст, как бы мешается… Поэтому надо начать с того, чтобы убрать текст. Правильно, надо сделать его прозрачным:

Как сделать красивую тень css

Теперь дорога расчищена! Сразу скажу, чтобы вы обратили на это внимание: рисовать мы будем белым цветом, поэтому единственное, что имеет значение, это выставленная на 100% светлость. Чтобы сделать штрих внутри текста, достаточно уменьшить размет тени:

Как сделать красивую тень css

Добавим еще несколько штрихов, варьируя прозрачность, сдвиг и размер:

Как сделать красивую тень css

Для придания формы и усиления закраски можно добавить общую размытую (и частично прозрачную) тень:
Как сделать красивую тень css

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

Финальный результат

Как сделать красивую тень css

Up & Down

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

Как сделать красивую тень css

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

Как сделать красивую тень css

Теперь, чтобы придать большей формы, я добавлю тень сверху, в общем-то повторяющую форму исходного текста:

Как сделать красивую тень css

Наконец, аналогично нижней части, давайте добавим верхнюю 3D-тень, но более светлую и более прозрачную (для увеличения резкости самая верхняя тень сделана чуть менее прозрачной, чем остальные):

Как сделать красивую тень css

Финальный результат

Как сделать красивую тень css

Вы также можете поиграться с оттенками и насыщенности, например, сделав низ красным, а верх синим, или как-нибудь еще.
Как сделать красивую тень css

Источник

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

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