Тени

Тени блока

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

1. горизонтальное смещение (обязательно)
2. вертикальное смещение (обязательно)
3. размытие
4. размер
5. цвет (обязательно)
6. расположение

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

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

Чтобы часть тени стала видна, ей задаются смещения. Они сдвигают тень вправо и вниз. Любое смещение может иметь и отрицательные значения. Тогда тень, соответственно, сдвигается влево и вверх. Для примера создадим такой блок:

Стиль:

div
  {
  width: 150px;
  height: 100px
  margin: 50px;
  box-shadow: 10px 10px #707070;
  background-color: Blue;
  }

HTML код:

<div></div>

Попробуйте установить другие смещения. Задайте отрицательные значения.

Следующий параметр - это размытие. Оно делает плавный переход от цвета тени к цвету фона. Размытие занимает отдельное место, поэтому увеличивает размер тени. У него нет отрицательных значений. Добавим этот параметр в пример. Блок получится такой:

Установка такой тени выглядит так:

box-shadow: 10px 10px 5px #707070;

Далее следует изменение размера. Положительное значение увеличивает размер тени, а отрицательное уменьшает. Совместно со смещением этот параметр позволяет создавать различные эффекты. Пример:

box-shadow: 50px 30px 1px -23px #707070;

В CSS существует возможность создать внутреннюю тень. Если в значении свойства box-shadow указать слово inset, то тень располагается не снаружи блока, а внутри. Из-за этого блок становится как бы вогнутым. На мой взляд, внутренняя тень выглядит не очень красиво, поэтому используется не часто. Тень отображается на фоне блока, но находится под содержимым. Слово пишется после всех остальных параметров. При этом изменение размера устанавливается по-другому - положительное значение уменьшает размер тени. Оно позволяет отобразить тени со всех сторон блока.

box-shadow: 6px 6px 30px 10px #707070 inset;

Тени текста

Тексту также можно задать тень. Это делается с помощью свойства text-shadow. Значение этого свойства указывается практически так же, как для блоков. Только оно имеет меньше параметров. Они перечисляются в следующем порядке:

1. горизонтальное смещение
2. вертикальное смещение
3. размытие
4. цвет

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

Текст

Он создаётся так:

Стиль:

p
  {
  margin: 50px;
  font: bold 60px Verdana;
  text-shadow: 3px 3px #AAA;
  }

HTML код:

<p>Текст</p>

Если тени текста установить размытие с большим значением, то она может выглядеть совсем по-другому. Пример:

Текст

text-shadow: 4px 4px 10px #FF053A;