Box shadow css что это

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

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

Синтаксис

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

 CSS div { box-shadow: offset-x offset-y blur spread color position; } 

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

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

Первое значение offset-x — смещение тени по оси X. Положительное значение сместит тень вправо, а отрицательное — влево.

 CSS .box-1 { box-shadow: -15px 0 10px 0 rgba(0,0,0,0.2); } .box-2 { box-shadow: 15px 0 10px 0 rgba(0,0,0,0.2); } 

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

Второе значение offset-y — смещение тени по оси Y. Положительное значение сместит тень вниз, а отрицательное — наверх.

 CSS .box-1 { box-shadow: 0 15px 10px 0 rgba(0,0,0,0.2); } .box-2 { box-shadow: 0 -15px 10px 0 rgba(0,0,0,0.2); } 

Размытие

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

 CSS .box-1 { box-shadow: 0 5px 0 0 rgba(0,0,0,0.2); } .box-2 { box-shadow: 0 5px 15px 0 rgba(0,0,0,0.2); } .box-3 { box-shadow: 0 5px 30px 0 rgba(0,0,0,0.2); } 

Растяжение

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

 CSS .box-1 { box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); } .box-2 { box-shadow: 0 0 5px 5px rgba(0,0,0,0.2); } .box-3 { box-shadow: 0 0 5px -15px rgba(0,0,0,0.2); } 

Цвет

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

 CSS .box-1 { box-shadow: 0 10px 5px -5px #e6ecc1; } .box-2 { box-shadow: 0 10px 5px -5px rgba(30, 129, 204, 0.2); } 

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

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

 CSS .box-1 { box-shadow: 10px 10px 10px 2px rgba(34, 60, 80, 0.2) inset; } .box-2 { box-shadow: 10px 10px 10px 2px rgba(34, 60, 80, 0.2); } 

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

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

 CSS .box-1 { box-shadow: 10px 10px 10px 2px rgba(34, 60, 80, 0.2) inset, 10px 10px 10px 2px rgba(34, 60, 80, 0.2); } 

Круглая тень

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

 CSS .box-1 { box-shadow: 10px 10px 10px 0px rgba(34, 60, 80, 0.2); border-radius: 50%; } 

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

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

 CSS .box-1 { transform: scale(1); box-shadow: 0 0 5px 5px rgba(34, 60, 80, 0.2); transition: box-shadow 0.5s, transform 0.5s; } .box-1:hover { ransform: scale(1.2); box-shadow: 0 0 15px 7px rgba(34, 60, 80, 0.2); transition: box-shadow 0.5s, transform 0.5s; } 

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

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

 CSS .box-1 { position: relative; transform: translateY(0); transition: transform 1s; } .box-1::after { content: ""; display: block; position: absolute; bottom: -30px; left: 50%; height: 8px; width: 100%; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4); border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); transform: translate(-50%, 0); transition: transform 1s; } .box-1:hover { transform: translateY(-40px); transition: transform 1s; } .box-1:hover::after { transform: translate(-50%, 40px) scale(0.75); transition: transform 1s; } 

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

Тень возможно сделать не только на элементах в виде блока или круга, но и на более сложных формах с использованием свойства clip-path . Правда свойство box-shadow при этом не сработает и нам придется заменить его другим. Приступим, создадим элемент box-1.

 CSS .box-1 { clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 30px 100%, 0 50%); } 

В CSS существует фильтр, который тоже делает CSS тень блока — drop-shadow() . Но у вас не поучится использовать его непосредственно на элементе, так как clip-path просто отрежет эту тень. Поэтому создаем родительский блок и наложим тень на него.

 HTML   

 CSS .box-1__wrapper { filter: drop-shadow(-1px 6px 3px rgba(34, 60, 80, 0.2)); } .box-1 { clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 30px 100%, 0 50%); } 

• Студия Профессиональная разработка сайтов под заказ Подробнее
• Иконки Прекрасный способ визуально выразить главную мысль Подробнее
• Сервисы Полезные инструменты для веб разработчиков Подробнее
• Блог Делимся в опытом и знанием в IT сфере Подробнее
• Поделиться ВконтактеFacebook Контакты support@active-vision.ru

© 2019 — 2024 Active-Vision. Политика конфиденциальности. Вся информация на сайте носит справочный характер и не является публичной офертой, определяемой статьей 437 ГК РФ

Свойство box-shadow

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

Синтаксис

Параметры

Параметр	Описание
inset	Необязательный параметр. Если он задан, то тень будет внутри контейнера, если не задан — то снаружи.
сдвиг по x	Задает смещение тени по оси X. Положительное значение смещает вправо, отрицательное — влево.
сдвиг по y	Задает смещение тени по оси Y. Положительное значение смещает вниз, отрицательное — вверх.
размытие	Задает размытие тени. Чем больше значение — тем более размытой будет тень. Необязательный параметр. Если не задан — тень будет четкой.
размер тени	Задает размер тени. Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Необязательный параметр. Если не задан — тень будет такого же размера, что и элемент.
цвет	Задает цвет тени в любых единицах для цвета. Необязательный параметр. Если не задан — цвет тени совпадает с цветом текста.

Смещения по осям, размытие и размер тени задаются в любых единицах для размеров, кроме процентов.

Пример

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

Пример . Четкая тень

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

Пример . Равномерная тень

В данном примере тень не сдвинута, но к ней добавлено размытие:

Пример . Размер тени

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

Пример . Размытие + размер тени

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

Пример . Внутренняя тень

В данном примере тень находится внутри контейнера:

Смотрите также

• свойство text-shadow ,
  которое задает тень тексту

drop-shadow()

Функция drop-shadow() добавляет тень к изображениям. В отличие от свойства box-shadow во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом.

Синтаксис

filter: drop-shadow(   );

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

<сдвиг по x>Смещение тени по горизонтали относительно картинки. Положительное значение этого параметра задаёт сдвиг тени вправо, отрицательное — влево. Обязательный параметр. <сдвиг по y>Смещение тени по вертикали относительно картинки. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх. Обязательный параметр. Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой. Цвет тени в любом доступном CSS формате, по умолчанию тень чёрная. Необязательный параметр.

При пустом значении все параметры воспринимается как 0. Цвет тени по умолчанию такой же, как значение свойства color .

Пример

.shadow

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

Рис. 1. Тень в изображении

Примечание

Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1 поддерживают свойство -webkit-filter .

Спецификация

Спецификация	Статус
Filter Effects Module Level 1	Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

13

18

53

15

40

6

9.1

35

4.4

35

37

6.1

9.3

В таблице браузеров применяются следующие обозначения.

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

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

См. также

Рецепты

• Как размыть изображение?
• Как размыть текст?
• Как размыть фоновую картинку?
• Как сделать картинку чёрно-белой?

Справочник CSS

• !important
• ::after
• ::backdrop
• ::before
• ::first-letter
• ::first-line
• ::marker
• ::placeholder
• ::selection
• :active
• :blank
• :buffering
• :checked
• :default
• :dir
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-within
• :fullscreen
• :hover
• :in-range
• :indeterminate
• :invalid
• :is()
• :lang()
• :last-child
• :last-of-type
• :link
• :muted
• :not()
• :nth-child()
• :nth-last-child()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :paused
• :placeholder-shown
• :playing
• :read-only
• :read-write
• :required
• :root
• :seeking
• :stalled
• :target
• :valid
• :visited
• :volume-locked
• @charset
• @document
• @font-face
• @import
• @keyframes
• @media
• @page
• @supports
• @viewport
• accent-color
• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• block-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-decoration-break
• box-shadow
• box-sizing
• caption-side
• caret-color
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-kerning
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• gap
• height
• hyphenate-character
• hyphenate-limit-chars
• hyphens
• image-rendering
• justify-content
• left
• letter-spacing
• line-clamp
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• marks
• max-height
• max-width
• min-height
• min-width
• mix-blend-mode
• object-fit
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• pointer-events
• position
• quotes
• resize
• right
• row-gap
• scroll-behavior
• tab-size
• table-layout
• text-align
• text-align-last
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-fill-color
• text-indent
• text-orientation
• text-overflow
• text-shadow
• text-stroke
• text-stroke-color
• text-stroke-width
• text-transform
• top
• transform
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• visibility
• white-space
• widows
• width
• word-break
• word-spacing
• word-wrap
• writing-mode
• z-index
• zoom

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

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

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

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

box-shadow: inset 4px 4px 8px 5px #333333;

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

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

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

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

box-shadow: 15px 15px 20px #8b0163, inset 15px 15px 20px #630046;

Примеры box-shadow

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

Легкая тень

box-shadow: 0 2px 4px rgba(0, 0, 0, .25);

Эффект бумаги

box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6), inset 0 0 40px rgba(0, 0, 0, .1);

Несколько слоев

box-shadow: 6px 6px #ccc, 12px 12px #a3a3a3;

Тройная рамка

box-shadow: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0.6), 0 0 0 21px rgba(118, 46, 177, 0.4);

Уголки

box-shadow: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Как видите, свойство box-shadow предоставляет огромное поле для фантазии. Вы можете преображать блоки как угодно — главное, иметь чувство меры! ��

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