Как сделать тень снизу 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. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

Синтаксис

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

box-shadow

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

text-shadow

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

Inset в box-shadow

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

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

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

Inset в text-shadow

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

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

Источник

2.19. CSS3-тень блока

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

Свойство box-shadow добавляет элементу одну или более теней. Тень представляет собой копию элемента, смещенную на указанное расстояние. Тени бывают внешние или внутренние, размытые или плоские, они могут следовать контурам блоков со скругленными углами. С помощью ключевого слова inset создаются тени внутри элемента, делая элемент визуально объёмным или вдавленным.

Как сделать тень блока с помощью свойства box-shadow

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

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

Свойство не наследуется.

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу cssРис. 1. Синтаксис свойства box-shadow

box-shadow
Значения:
x-offsetЗадает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина — влево.
y-offsetЗадает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх.
blurЗадает радиус размытия. Отрицательные значения не допускаются. Если значение размытия равно нулю, то край тени четкий. В противном случае, чем больше значение, тем больше размыт край тени.
растяжениеЗадает расстояние, на которое тень увеличивается. Положительные значения заставляют тень расширяться во всех направлениях на указанный радиус. Отрицательные значения заставляют тень сжиматься. Для внутренних теней расширение тени означает сжатие формы периметра тени.
цветЗадает цвет тени. Если цвет отсутствует, используемый цвет берется из свойства color. Для Safari цвет тени указывать обязательно.
insetИзменяет отбрасываемую тень блока с внешней тени на внутреннюю.
noneЗначение по умолчанию, означает отсутствие тени.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Если элемент имеет несколько ящиков, все они получают тени, но тени рисуются только там, где также будут нарисованы границы; см. box-decoration-break.

Тени не вызывают прокрутку или не увеличивают размер прокручиваемой области.

Источник

Как сделать красивую тень для блока (элемента) с помощью CSS. (8 примеров)

Здравствуйте, дорогие читатели блога. Сегодня мы с Вами будем делать красивую тень для блоков при помощи CSS. Я думаю, что это очень сильно пригодится Вам, тем более если Вы делаете шаблоны. А блоки с тенью смотрятся очень привлекательно и современно.

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

Посмотреть пример

Тень блока с CSS

Данные блоки мы будем делать только при помощи CSS. Соответственно никаких изображений, только стили.

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

Поддержка браузеров

В основном все современные браузеры поддерживают эффекты тени:

Ещё хотелось бы упомянуть один не маловажный момент: для некоторых браузеров мы будем использовать некие префиксы. Для Firefox используется -moz-, для Chrome и Safari нужно использовать префикс -webkit.

Ну а сейчас переходим к самой интересной части. Давайте рассмотрим все эффекты тени по отдельности, эффектов будет 8.

Эффект тени 1

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

В данном примере тень от блока находится снизу.

Эффект тени 2

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

В этом примере тень от блока идёт слева и справа, а по середине её нет. Получается очень интересный эффект.

Эффект тени 3

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

Здесь тень от блока только слева.

Эффект тени 4

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

Эффект тени 5

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

В данном случае тень с двух сторон сильнее сдвинулась вниз.

Эффект тени 6

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

Здесь эффект изогнутых теней на дне блока.

Эффект тени 7

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

Такой же эффект только тень снизу и сверху блока.

Эффект тени 8

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

Эффект изогнутых теней по бокам блока.

Пример

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

Посмотреть пример

Вот и всё дорогие друзья. Если Вам что либо будет не понятно, обязательно спрашивайте в комментариях. До скорой встречи.

Источник

Тень CSS — теория, примеры, практика

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

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

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

CSS — тень блока. Свойство box-shadow

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

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

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

Свойства тени используются в таком порядке:

Именно в таком порядке нужно указывать параметры тени. Главное, не перепутать значение, так как первые 4 задаются одинаково, с помощью числовых значений — px >, em >, rem > и так далее.

Первый параметр, которое называется x-offset > — смещает тень по горизонтали относительно блока. Принимает любые значения, включая отрицательные.

Отрицательные значения смещают тень влево, а положительные — вправо. Значение параметра может быть равно 0 при размытии теней по вертикальной оси.

Далее по порядку идет свойство y-offset >. Отвечает за перемещение тени по вертикали. Тоже принимает любые значения — положительные и отрицательные. Отрицательные значения смещают тень вверх, а положительные — вниз.

Параметру может быть присвоено значение 0. Обычно используется при горизонтальном размытии теней.

Внимание! Советуем указывать значение в пикселях. Можете использовать и другие значения — em >, rem >, % и другие, но делать это не рекомендуется. Все эти величины довольно большие для создания теней. Указав их можно переборщить с размерами.

3 значение — blur > или размытие. Данное значение вводить не обязательно, без его указания тени всё равно будут работать.

Заданное значение определяет радиус, по которому будет размываться тень. Отрицательные значения не указываются.

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

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

Расширение происходит за счет растяжения центральной сплошной части тени, которая находится между размытыми краями.

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

И последний параметр — shadow-color >. Его также необязательно указывать, так как по умолчанию тень блока имеет собственный цвет — черный.

Для изменения цвета подойдет любая цветовая система — hex, rgb, rgba, а также стандартные цвета.

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

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

Итак, давайте рассмотрим первый пример применения теней. Здесь мы будем рассматривать создание внутренней тени для блока body.

Для начала откройте наш HTML документ и заполните его. Можете не указывать никакие теги, не заполнять контент, главное создайте тег body >.

Открываем наш CSS документ, записываем тег body >, он будет нашим основным селектором.

Далее открываем фигурные скобки и записываем свойство box-shadow >. Задаем расположение, размытие, растяжение. Как задавать эти значения вы уже знаете. После этого задаем цвет тени, мы сделали белый, но вы можете задать по своему вкусу.

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

В итоге, у нас получился вот такой блок:

HTML/CSS — тень текста

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

Создается похожим образом, но вместо box-shadow используется свойство text-shadow >. Параметры свойства идут в следующем порядке.

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

Очень удобно накладывать тени друг на друга. Для этого нужно перечислить несколько групп параметров

Первая тень будет располагаться ближе к тексту, а вторая выше её. Напоминает работу со свойствами outline и border, но здесь можно создавать и 2, 3 и больше теней.

Тени при наведении — CSS

Теперь давайте рассмотрим создание теней для определенного состояния. В нашем примере будет использоваться кнопка.

Для того, чтобы создать тень для кнопки, её для начала нужно разместить. Открываем тег a, записываем для него класс button и любое текстовое значение, для лучшего отображения.

Далее открываем CSS документ и приступаем к стилизации. Перед тем как создать тень, необходимо создать кнопку. Всё что пока у нас есть — синяя ссылка с подчеркиванием.

Сначала зададим размещение, с помощью свойства margin и увеличим кнопку до определенных размеров. Для увеличения можно использовать свойства width и height, либо же воспользоваться свойством padding.

Теперь задаем цвет фона, текста и рамку. Наша кнопка готова, приступаем к созданию тени.

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

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

Сделаем самый простой эффект — увеличим тень. Можете сделать её размытой или изменить растяжение — по вкусу.

Для лучшего эффекта зададим свойство transition для обычной ссылки, поставим время в 0.5s.

Теперь у нас есть отличная кнопка с красивой тенью, которая при наведении будет плавно расширяться.

Как сделать тень снизу css. Смотреть фото Как сделать тень снизу css. Смотреть картинку Как сделать тень снизу css. Картинка про Как сделать тень снизу css. Фото Как сделать тень снизу css

Заключение

В этой статье мы ознакомились со всеми основными способами создания теней. Мы разобрали все свойства и параметры теней.

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

Источник

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

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