drop-shadow()

drop-shadow()

The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a .

Try it

A drop shadow is effectively a blurred, offset version of the input image’s alpha mask, drawn in a specific color and composited below the image.

Note: This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element’s entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.

Syntax

drop-shadow(offset-x offset-y blur-radius color) 

The drop-shadow() function accepts a parameter of type (defined in the box-shadow property), with the exception that the inset keyword and spread parameters are not allowed.

Parameters

The color of the shadow, specified as a . If unspecified, the value of the color property is used.

Examples

Setting a drop shadow using pixel offsets and blur radius

/* Black shadow with 10px blur */ drop-shadow(16px 16px 10px black) 

Setting a drop shadow using rem offsets and blur radius

/* Reddish shadow with 1rem blur */ drop-shadow(.5rem .5rem 1rem #e23) 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

drop-shadow()

Функция drop-shadow() добавляет тень к изображениям. В отличие от свойства box-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. Обратите внимание, что тень повторяет линии изображения.

Примечание

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

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

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

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

Браузеры

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

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

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

См. также

Рецепты

Справочник CSS

• !important
• ::after
• ::backdrop
• ::before
• ::first-letter
• ::first-line
• ::placeholder
• ::selection
• :active
• :blank
• :checked
• :default
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-within
• :fullscreen
• :hover
• :in-range
• :indeterminate
• :invalid
• :lang
• :last-child
• :last-of-type
• :link
• :not
• :nth-child
• :nth-last-child
• :nth-last-of-type
• :nth-of-type
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :placeholder-shown
• :read-only
• :read-write
• :required
• :root
• :target
• :valid
• :visited
• @charset
• @document
• @font-face
• @import
• @keyframes
• @media
• @page
• @supports
• @viewport
• 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
• height
• 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
• 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

Источник

Тень в фигме: как сделать красивую тень от объекта в Figma

В этом уроке вы научитесь делать красивую тень от любого объеткта в фигме.

Для создания тени в фигме, выберите нужный объект. В правой панели напротив надписи «Effects» нажмите иконку «+». По умолчанию будет выбрана надпись «Drop shadow», что означает «Внешняя тень». Стандартная тень не очень красивая, поэтому давайте её изменим.

Нажмите на иконку солнца, и поставьте следующие параметры тени:

• X = 0
• Y = 8
• Blur = 24
• Spread = 0
• Цвет = 8187BD
• Прозрачность = 15%

Если выберите из списка вместо значения «Drop shadow» «Inner shadow», то у объекта появится внутренняя тень.

Вот пример того, что получится если задать значение «Inner shadow».

Какую тень делать для цветных объектов в Figma?

Тень следует подбирать на основании цвета объекта. К примеру, если у вас есть синий круг, то следует задать цвет тени, как у этого объекта. Простыми словами сделайте тень синим цветом. Аналогично с другими цветаи.

Как сохранить стиль тени в фигме и использовать повторно в других проектах?

Если вы хотите сохранить стиль тени, чтобы использовать в других проектах, то нажмите на иконку с четырьмя точками напротив надписи «Effects». Затем на плюс. Появится всплывающее окно, где можно сохранить стиль тени. Укажите название стиля (например внешняя тень) и нажмите на синюю кнопку «Create style».

Если ни один объект не выбран, то в правой панели можно увидеть стиль этой тени.

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

Если хотите использовать этот стиль в других проектах, то нажмите на вкладку «Accets», затем на пиктограмму книги. В появившемся окне жмите на кнопку «Publish». Затем на надпись «Publish style only». Если создадите новый проект, затем нажмете на иконку книги, то можно будет включить тумблер напротив этого проекта. Таким образом вы подключите стили и сможете их использовать повторно.

Заключение

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

P.S. Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке.

P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).

Источник