Свойство box-shadow


Содержание

Про CSS

Box-shadow

Свойство box-shadow позволяет добавить элементам одну или несколько теней.

Синтаксис совсем простой:

Этот код даст вот такую тень:

Первое значение отвечает за отступ слева, второе — сверху. Значения могут быть отрицательными. Третье — радиус размытия. Если значение не задано или равно 0 — тень имеет четкие края. Четвертое — уменьшение или увеличение тени. Значения могут быть отрицательными.

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

Последнее значение — цвет. Очень удобно задавать его в hsla или в rgba, чтобы тень была прозрачной и затемняла нижележащий фон независимо от его цвета.

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

Есть ещё один параметр — inset . Если он задан, тень отбрасывается внутрь элемента.

При использовании нескольких теней они задаются одна за другой через запятую.

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

При этом если теней несколько, изменение порядка заданных теней при анимации дает интересный эффект:

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

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

Ещё можно сделать радугу:

Или вот, например, пуговицы:

Или пузырь с текстом:

Просто удивительное количество возможностей предоставляет такое простое свойство.

Также в последнее время становятся популярными длинные тени (в данном случае это box-shadow + text-shadow ):

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

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

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

Тень блока (свойство box-shadow) | CSS


box-shadow generator

Свойство box-shadow (w3.org) создаёт элементу тень.

inset

Как создать объёмный HTML элемент из нескольких box-shadow

box-shadow может иметь сколько угодно значений. Поэтому им можно заменить картинки форматов JPEG, PNG и даже GIF [инструмент lvivski.com]. Можно, но не нужно. А вот создание объёма может быть полезным для того, чтобы смастерить, например, объёмную красивую кнопку.

цвет одной стороны

цвет другой стороны

Эффект тени блока

Тень вокруг div CSS

Хм, отбрасывает ли предмет тень, когда свет на него падает сверху? Да, если предмет удалён от поверхности. Чем дальше, тем интенсивнее тень. Сама проверяла, светя фонариком.

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

Снизу (под блоком div)

По бокам (справа и слева)

Многослойный блок с помощью box-shadow

Разноцветная CSS рамка

Еще варианты можно посмотреть у css.yoksel.ru.

CSS внутренняя тень блока (внутри элемента)

Как сделать вдавленный элемент

Как сделать выпуклый элемент с округлыми краями

box-shadow inset и картинка img

box-shadow и HTML тег input

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

Или подсветка внутри input (получилась красивая форма входа CSS):

box-shadow и transition или animation

box-shadow можно плавно изменять, но нужно учитывать особенность этого изменения:

75 комментариев:


К boxShadow подставляйте необходимые цифры.

Один селектор, я посчитала лишним писать каждый раз HTML. К тому же тут не нужен даже весь код CSS, нужно только значение box-shadow. У «box-shadow inset и картинка img» и ниже есть HTML после CSS. Анонимный Отлично СПАСИБИЩЕ! Анонимный Спасибо за статью. А что нужно добавит, чтоб это работало и в сафари 5.1. ? у меня не получается! NMitra Добавьте -webkit-

-webkit-box-shadow: 0 0 8px; Анонимный Нет, не помогает. Я взял на вооружения boxShadow18. Сафари не реагирует. NMitra Он вообще box-shadow не понимает или именно мой код? У браузеров может быть разная поддержка на разных устройствах. На компьютере будет работать, а на планшетах и телефонах — нет. Эффект box-shadow можно заменить с помощью фоновой картинки. Анонимный #leftmenu <
width: 100%;
max-width: 180px;
margin: 1em auto;
padding: 1em;
border-radius: 40px;
background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));/*(Скорее всего тут я допускаю ошибку*/
box-shadow:
inset rgba(0,0,0,.6) 0 -3px 8px,
inset rgba(252,255,255,.7) 0 3px 8px,
rgba(0,0,0,.8) 0 3px 8px -3px;
-webkit-box-shadow: inset 0px 0px -3px 8px rgba(0, 0, 0, 0.6),
-webkit-box-shadow: inset 0px 0px 3px 8px rgba(252, 255, 255, 0.7),
-webkit-box-shadow: 0px 3px 8px -3px rgba(0, 0, 0, 0.8);
>
NMitra Вместо одной

background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));

background-color: #646464;
background-image: -webkit-radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
background-image: radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35)); Анонимный #leftmenu
День добрый! Я Вас не оставляю в покое. Спасибо что откликнулись. Просто действительно понравилось ваша статья и примеры, и решил некоторые свой блоки оформить подобным образом. Что касается моей проблемы, такова эффекта я и вчера добился, но тогда пропадает эффект выпуклости, а это для меня как-то важно. А именно почему можете посмотреть, при желании, на сайте www.dlcompany.org спасибо за отзывчивость. Анонимный Скажите пожалуйста, как для движка mozilla применить одновременно и внутреннюю и внешнюю тень, через запятую работает только одна тень (которая первая, вторая игнорируется). Вот правда — на движке web-kit работает всё 100% — и в chrome и в maxthon — и вроде даже в последней opera, а вот в seamonkey, mozilla, pale moon — нет, в internet explorer — тоже неработает (я имел ввиду запись типа:
box-shadow:0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);
-moz-box-shadow: 0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);
-webkit-box-shadow:0px 0px 30px 4px rgba(236, 255, 66, 1), inset 0px 0px 13px 3px rgba(0, 0, 0, 0.98);) NMitra Вы хоть имя подставляйте.

Комментарий 46:
сделать так, чтобы на всех браузерах на всех устройствах при использовании всех операционных систем картинка 3D выглядела одинаково крайне не просто. Или просто, коли использовать нарисованный background: url(). Разработчик может лишь следовать общим стандартам w3.org и сделать так, чтобы при отсутствии поддержки box-shadow или другого свойства макет сайта не разъехался и были доступны основные функции регистрации, заказа, формы связи и т.п.

Комментарий 47:
у меня всё работает на windows, префиксы пишутся в другом порядке

box-shadow

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

12.0+ 9.0+ 4.0+ 10.0+ 10.5+ 5.1+

Описание

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

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

При наложении теней друг на друга каждая последующая тень в списке будет располагаться под предшествующей.

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

Примечание: для добавления тени к тексту используйте CSS свойство text-shadow.

Значение по умолчанию: none
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.boxShadow=»10px 10px 5px #888888″

Синтаксис

Значения свойства

Примечание: первые 4 значения, описываемые в таблице, указываются с помощью единиц измерения поддерживаемых в CSS.

Свойство box-shadow

Свойство box-shadow задает эффект тени элементу. При этом размер элемента не меняется (несмотря на то что тень может быть расположена далеко за пределами элемента).

Значения свойства задает список теней, каждая из которых имеет 2 значения смещения по осям, радиус размывания(необязательный параметр), радиус распространения (необязательный параметр) и цвет. Порядок значений строго определен.

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


Допустимые значения

  • none — элемент не имеет тени.
  • — тень элемента. Теней может быть несколько, описание каждой может содержать следующие параметры:
    • inset — ключевое слово, которое говорит о том, что тень внутренняя.
    • — смещение тени по оси, радиус размыва и радиус распространения.
Значение по умолчанию none
Применимо ко всем элементам
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами
  • Internet Explorer 9 и выше
  • Firefox 4 и выше
  • Opera 10.5 и выше
  • Chrome 10 и выше

Пример

Твой код:
Результат:

Заметки

Safari 3 и выше и Chrome 1-10 поддерживают аналогичное свойство -webkit-box-shadow, Firefox 3.5-4.0 -moz-box-shadow. Свойство -webkit-box-shadow поддерживает возможность задать множественные тени только для Safari 4.0 и выше, и не поддерживает возможности задать радиус распространения тени. Внутреннюю тень для свойства -webkit-box-shadow поддерживает Chrome 4-10 и Safari 5.

CSS box-shadow Свойство

Пример

Добавление теней к различным элементам

#example1 <
box-shadow: 5px 10px;
>

#example2 <
box-shadow: 5px 10px #888888;
>

Подробнее примеры ниже.

Определение и использование

Свойство box-shadow присоединяет одну или несколько теней к элементу.

Значение по умолчанию: none
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS3
Синтаксис JavaScript: object.style.boxShadow=»10px 20px 30px blue»

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


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

Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.

Свойство
box-shadow 10.0
4.0 -webkit-
9.0 4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5

Синтаксис CSS

Примечание: Чтобы прикрепить к элементу более одной тени, добавьте список теней с разделителями-запятыми (SE «Попробуйте сами» пример ниже).

Box-shadow: тень для элемента

Вы можете добавлять к элементам тень и изменять ее внешний вид с помощью CSS-свойства box-shadow. Этот стиль позволяет воплотить в жизнь интересные эффекты, например, объемность и трехмерность блока. Свойство поддерживается всеми современными браузерами. Исключение составляют IE8 и Opera Mini.

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

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

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

  • Ключевое слово inset : параметр, который необязательно указывать; рисует тень внутри элемента.
  • Сдвиг по оси X: указывает степень смещения тени по горизонтали относительно элемента. Положительное значение означает сдвиг вправо, отрицательное — влево. Значение 0 означает, что тень без сдвига.
  • Сдвиг по оси Y: указывает степень смещения тени по вертикали. Положительное значение означает сдвиг вниз, отрицательное — вверх. Значение 0 — это тень без сдвига.
  • Радиус размытия: это степень размытия тени. Чем больше значение, тем более размыта тень. Если параметр не указан, используется значение по умолчанию — 0 . В таком случае тень будет идеально четкой.
  • Расширение: необязательный параметр, отвечающий за растяжение тени по обеим осям; чем больше значение, тем больше растяжение. Расширение работает только при наличии предыдущего параметра. Значение по умолчанию — 0 .
  • Цвет тени: с этим параметром всё понятно — он задает цвет тени элемента. Цвет по умолчанию — черный.

Примечание. Браузерам Android и более старым версиям iPhone Safari требуется префикс -webkit- для корректной работы CSS свойства box-shadow.

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

Примеры box-shadow

Чтобы вы лучше поняли всю силу и прелесть свойства CSS box-shadow, мы покажем несколько примеров, которые можно смело применять на практике. Данное свойство способно сильно преобразить обычный блок!

box-shadow

На этой странице

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

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Свойство box-shadow позволяет вам задать тень для почти любого элемента. Если элементу задано свойство border-radius , то тень также будет с закруглёнными углами. Расположение теней по оси z будет такое же, как и при применении свойства text-shadow (первая тень будет впереди остальных).

Генератор box-shadow generator — интерактивный инструмент, позволяющий вам генерировать box-shadow .

Синтаксис

Чтобы задать одну тень, можно использовать:


  • Два, три и четыре значения .
    • Если задано только два значения, они интерпретируется как «> values.
    • Если задано третье значение, оно понимается как «> .
    • Если задано чертвёртое значение, оно интерпретируется «> .
  • Дополнительно, можно задать ключевое слово inset .
  • Дополнительно, можно задать значение «> .

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

Значения

…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.

Интерполяция

Each shadow in the list (treating none as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not inset , then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one inset and the other not inset , the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is transparent , all lengths are 0 , and whose inset (or not) matches the longer list.

Свойство CSS3 box-shadow

Введение

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

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

title > Box-Shadow title >

style type =»text/css»>

div class =»button left»> div >

div class =»button center»> div >

div class =»button right»> div >

В результате получим три зеленые кнопочки на фоне, который мы применили к телу нашего документа.

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

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

CSS | Свойство box-shadow


Свойство box-shadow в CSS используется для придания теневой эффект рамкам элемента.

Синтаксис:

Стоимость имущества:

  • h-offset: требуется установить положение тени по горизонтали. Положительное значение используется для установки тени на правой стороне окна, а отрицательное значение используется для установки тени на левой стороне окна.
  • v-offset: требуется установить положение значения тени по вертикали. Положительное значение используется для установки тени ниже для прямоугольника, а отрицательное значение используется для установки тени над прямоугольником.
  • размытие: это необязательный атрибут, работа этого атрибута заключается в размытии тени поля.

Свойство box-shadow

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

Листинг 3.6. Добавление к полю тени

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

-webkit-border-radius: 20px; border-radius: 20px;

-moz-box-shadow: rgb(150,150,150) 5px 5px;

-webkit-box-shadow: rgb(150,150,150) 5px 5px; box-shadow: rgb(150,150,150) 5px 5px;

Font: bold 36px verdana, sans-serif;

Свойству box-shadow необходимо передать минимум три значения. Первое, которое вы видите в листинге 3.6, — это цвет. Для формирования данного значения мы использовали функцию rgb(), передав ей необходимые аргументы в десятичной системе счисления, однако вы можете просто записать нужный цвет в шестнадцатеричном представлении (как мы делали раньше в этой книге для других параметров).

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

Для тестирования различных параметров и возможностей создания тени рядом с полем скопируйте код из листинга 3.5 в CSS-файл и откройте HTML-файл с шаблоном из листинга 3.1 в своем браузере. Теперь поэкспериментируйте со значениями свойства box-shadow. Тот же самый код вы сможете использовать для проверки новых параметров, которые мы изучим в дальнейшем.

Пока что тень получается сплошной, без градиентов или эффекта прозрачности, и, следовательно, не очень похожей на настоящую. Мы можем добавить еще несколько параметров и улучшить ее внешний вид. Четвертое значение, которое принимает данное свойство, задает радиус размытия. Благодаря этому эффекту тень выглядит как настоящая. Попробуйте применить данный параметр со значением 10 пикселов, добавив его в правило из листинга 3.6, как в листинге 3.7.

Листинг 3.7. Добавление радиуса размытия к свойству box-shadow box-shadow: rgb(150,150,150) 5px 5px 10px;

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

Добавьте значение 20px в конце стиля из листинга 3.7, объедините этот код с кодом из листинга 3.6 и протестируйте в браузере.

Не забывайте, что эти свойства пока что находятся на этапе разработки. Если вы планируете использовать их, всегда добавляйте к ним префикс — moz — или — webkit — в зависимости от того, какой браузер используете (то есть Firefox или Google Chrome).

Последнее возможное значение свойства box-shadow — это не число, а ключевое слово inset. Оно превращает внешнюю тень во внутреннюю, создавая эффект вдавленного поля.

Листинг 3.8. Внутренняя тень box-shadow: rgb(150,150,150) 5px 5px 10px inset;

Стиль из листинга 3.8 определяет внутреннюю тень на расстоянии 5 пикселов от рамки поля, которая дополнительно размывается на 10 пикселов.

Стили из листингов 3.7 и 3.8 — это всего лишь примеры.

Для проверки эффекта в браузере вам понадобится внести соответствующие изменения в полный набор правил из листинга 3.6.

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

Илон Маск рекомендует:  Перевернутая таблица
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL