Webkit box shadow что это

box-shadow

Краткая информация

Версии CSS

Описание

Синтаксис

box-shadow: none | [, ]*
где :
inset

Значения

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

HTML5 CSS3 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1. Вид тени в браузере Safari

Браузеры

Здесь: offX — смещение тени по горизонтали; offY — смещение тени по вертикали; color — цвет тени.

Здесь: direction — угол направления тени от 0 до 360°; color — цвет тени; strength — смещение тени в пикселах.

Источник

box-shadow

Краткая информация

Версии CSS

Описание

Синтаксис

box-shadow: none | [, ]*
где :
inset

Значения

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

HTML5 CSS3 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1. Вид тени в браузере Safari

Браузеры

Здесь: offX — смещение тени по горизонтали; offY — смещение тени по вертикали; color — цвет тени.

Здесь: direction — угол направления тени от 0 до 360°; color — цвет тени; strength — смещение тени в пикселах.

Источник

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

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

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

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

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

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

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

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

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

Источник

Узконаправленные функции CSS

В этой статье описаны некоторые хитрости, которые познакомят вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.

Блок-тень

Вы можете найти примеры из стати на box-shadow.html (или в исходном коде).

Обычная тень

Для начала взглянем на простой пример:

В результате получится вот это:

Как видите, у нас четыре значения в свойстве box-shadow :

Вы можете использовать абсолютно любые значения и цвета, если это необходимо.

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

Вы можете определить несколько блок-теней, разделяя их запятыми при объявлении box-shadow :

В итоге мы получим:

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

Другие опции блок-теней

Для этого примера используем другой HTML-код:

Мы стилизовали кнопку с помощью состояний focus, hover и active. Для кнопки по умолчанию установлены несколько простых чёрных теней плюс пара внутренних теней в противоположном углу кнопки для эстетичности.

При нажатии на кнопку первая тень становится внутренней, чтобы создать ощущение нажатия кнопки.

Фильтры

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

Второе значение — grayscale() ; оно определяет, насколько изображение насыщено.

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

Режимы смешивания

Режимы смешивания CSS позволяют определить смешивание при наложении двух элементов. Смешивание очень знакомо пользователям редакторов вроде Photoshop.

В режимах смешивания CSS два значения:

Примечание: Смешивание относительно новое свойство, поэтому поддерживается хуже, чем фильтры. Оно совсем не поддерживается на Edge, а Safari поддерживает лишь некоторые значения свойства.

background-blend-mode

Снова обратимся к примеру. Во-первых, background-blend-mode — мы покажем несколько контейнеров

Воспользуемся CSS — добавим к

Слева вы видите оригинал, справа — изменённое изображение:

mix-blend-mode

И это даст нам следующее:

Как видите, смешались не только фоновые изображения, но и

CSS-фигуры

Мы можем сделать обтекание содержимым непрямоугольных фигур, используя CSS-фигуры (en-US).

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

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

Значение circle() — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте Обзор CSS-фигур на MDN.)

-webkit-background-clip: text

Если вы собираетесь использовать подобные опции, проверьте совместимость их с браузерами.

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

Источник

Кроссбраузерные box-shadow в CSS

Введение

Нативная поддержка браузерами

CSS3-свойство box-shadow хорошо поддержкивается большинством современных браузеров, однако для кросс-браузерной поддержки, вам необходимо использовать все перечисленные варианты свойства:

Поддержка браузерами box-shadow :

Данные об IE9 взяты из IE9 Platform Preview 3.

Фильтры в IE

Изучая css-фильтры в IE, я наткнулся на интересный факт: фильтр blur позволяет размывать блоки почти идентично тому, как размывается тень в альтернативных браузерах. Например, есть блок со следующими параметрами:

Визуальное отображаение показано на рисунке 1.

Рисунок 1: Простой

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

Рисунок 2: Наш простой

Создание выпадающей тени в IE и в других браузерах

В современных браузерах, выпадающая тень создается с помощью следующего HTML и CSS:

Для повторения этого эффекта в IE, мы добавим специальный невидимый

Результат показан на рисунке 3:

Рисунок 3: Выпадающая тень для IE, показанная без родительского блока, по отношению к которому она применяется

Соединяя примеры вместе

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

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

Здесь мы ставим box-shadow для браузеров, которые его поддерживают, и затес скрываем тень для IE от альтернативных браузеров. Следующий CSS-код используется только для IE — мы применяем его через conditional comments:

Здесь baseBlock используется для позиционирования контента и его выпадающей тени. Контентом является

Таком образом в коде, мы используем следующие расчёты, чтобы эмулировать смещение тени в box-shadow:10px 10px 5px #444 :

После того, как всё сказано и сделано, конечный результат представлен на рисунке 4:

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

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

Мы можем использовать аналогичный метод для создания внутренней тени, которая будет работать во всех браузерах, включая IE. Отличия в том, что overflow: hidden; используется для обрезки тени так, что она не выходит за пределы базового блока. Также мы меняем background-color в CSS для IE на цвет box-shadow в главном CSS-коде. И снова, сперва начнём с листинга HTML:

Далее, CSS, который используется для всех браузеров:

И в заключении, CSS, который используется только в IE через conditional comments:

Код приведенный выше дает нам следующий результат, показанный на Рисунке 5.

Рисунок 5: Финальный пример с внутренней тенью, показывающий тень в современных браузерах и в текущих версиях IE

Заключение

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

Преимущества используемого решения:

Copyright © 2006—2019 Opera Software AS. Some rights reserved. Contribute!

Источник