drop-shadow()

Тень — это фактически размытая, смещённая версия альфа-маски входящего изображения, нарисованная определённым цветом и наложенная под изображением.

/* Two length values */
/* drop-shadow( <length> <length> ) */
drop-shadow(5px 5px)

/* Three length values */
/* drop-shadow( <length> <length> <length> ) */
drop-shadow(5px 5px 15px)

/* Two length values and a color */
/* drop-shadow( <length> <length> <color> ) */
drop-shadow(5px 5px red)

/* Three length values and a color */
/* drop-shadow( <length> <length> <length> <color> ) */
drop-shadow(5px 5px 15px red)

/* The order of color and length values can be changed */
/* drop-shadow( <color> <length> <length> <length> ) */
drop-shadow(#e23 0.5rem 0.5rem 1rem)

Функция drop-shadow() принимает параметр типа <shadow> (определённый в свойстве box-shadow), за исключением того, что ключевое слово inset и параметры spread не допускаются.

<color> Необязательно

Указывает цвет тени. Если не указан, используется значение свойства color, определённое в родительском элементе.

<length>

Указывает смещение тени. Этот параметр принимает два или три значения. Если указано два значения, они интерпретируются как <offset-x> (горизонтальное смещение) и <offset-y> (вертикальное смещение). Отрицательное значение <offset-x> помещает тень слева от элемента. Отрицательное значение <offset-y> помещает тень над элементом. Если не указано, используется значение 0 для отсутствующего значения. Если указано третье значение, оно интерпретируется как <standard-deviation>, что представляет собой значение стандартного отклонения для функции гауссова размытия. Большее значение <standard-deviation> создаёт более широкую и размытую тень. Отрицательные значения <standard-deviation> недопустимы.

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )  

<div>drop-shadow(16px 16px)</div>
<div>drop-shadow(16px 16px red)</div>
<div>drop-shadow(red 1rem 1rem 10px)</div>
<div>drop-shadow(-16px -16px red)</div>

div {
  display: inline-block;
  margin: 0 0.5rem 2rem 1rem;
  padding: 0.5rem;
  height: 100px;
  width: 190px;
  vertical-align: top;
  background-color: #222;

  color: lime;
}

div:nth-child(1) {
  filter: drop-shadow(16px 16px);
}

div:nth-child(2) {
  filter: drop-shadow(16px 16px red);
}

div:nth-child(3) {
  filter: drop-shadow(red 1rem 1rem 10px);
}

div:nth-child(4) {
  filter: drop-shadow(-16px -6px red);
}

В отсутствие значения <color> в функции drop-shadow() в первой коробке тень использует значение свойства color элемента (lime). Вторая и третья тени иллюстрируют, что значения длины и цвета могут быть указаны в любом порядке. Третья тень показывает эффект размытия, когда задаётся третье значение <length>. Четвёртая тень использует отрицательные смещения, которые смещают тень влево и вверх.

Другие функции <filter-function>, доступные для использования в значениях свойств filter и backdrop-filter, включают:

• blur()
• brightness()
• contrast()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• box-shadow свойство
• text-shadow свойство