A- A A+
CSS - box-shadow

На очереди box-shadow, которое добавляет тень к элементам сайта. Более того, это свойство CSS поддерживает множественные тени, которые мы также рассмотрим.

Добавление тени

Итак, возьмем для примера блок зеленого цвета.

CSS - box-shadow

Добавим к нему свойство box-shadow со следующим значением: box-shadow: 5px 6px 10px 4px #000. Разберем значения:

  • 1 значение (5px) - смещение тени по горизонтали слева направо
  • 2 значение (6px) - смещение тени по вертикали сверху вниз
  • 3 значение (10px) - радиус размытия тени
  • 4 значение (4px) - растяжение тени
  • 5 значение (#000) - цвет тени

CSS - box-shadow

Смотрим результат.

CSS - box-shadow

Смещение тени

Мы рассмотрели тень, которая была смещена слева направо и сверху вниз.

Для смещения тени в направлении справа налево и снизу вверх, необходимо выставить отрицательные значения - box-shadow: -5px -6px 10px 4px #000.

CSS - box-shadow

Множественность теней

Можно добавить несколько теней используя запятую. Например, box-shadow: -5px -6px 10px 4px #000, 10px 20px 15px 3px

CSS - box-shadow

Обязательные параметры box-shadow

В примерах было использовано пять значений для данного свойства.

Из них обязательными является только первые два, отвечающие за смещение тени по осям X и Y.

Проверяем в таком варианте box-shadow: 5px 6px. Все работает, хотя без размытия смотрится так себе.

CSS - box-shadow

Смело пробуйте изменять значения и найдете наиболее приемлемый для себя вариант.

 

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!