Тени - CSS свойства

Краткое описание свойств

text-shadow

Добавляет тень к тексту.

box-shadow

Добавляет тень к блоку.

Свойство text-shadow

Добавляет тень к тексту.

Краткая информация

Значения

Необходимо задать 4 параметра через пробел:

• Смещение по оси X. Положительное значение - тень смещается вправо, отрицательное значение - влево.
• Смещение по оси Y. Положительное значение - тень смещается вниз, отрицательное значение - вверх.
• Размытие тени. Значение 0 для чёткой тени.
• Цвет тени в любом формате, используемом в CSS.

Примечания

Можно задавать несколько теней через запятую.

Примеры

text-shadow: 1px 1px 0 #00F;

Тень смещена на 1 пиксель вправо и на 1 пиксель вниз. Размытие отсутствует. Цвет тени - синий.

Свойство box-shadow

Добавляет тень к блоку.

Краткая информация

Значения

Необходимо задать 5 параметров через пробел:

• Смещение по оси X. Положительное значение - тень смещается вправо, отрицательное значение - влево.
• Смещение по оси Y. Положительное значение - тень смещается вниз, отрицательное значение - вверх.
• Размытие тени. Значение 0 для чёткой тени.
• Размер тени. Положительное значение - размер тени увеличивается во всех направлениях, отрицательное значение - размер тени уменьшается во всех направлениях. При значении 0 размер тени равен размеру блока.
• Цвет тени в любом формате, используемом в CSS.

Примечания

Можно задавать несколько теней через запятую.

Чтобы тень была не снаружи блока, а внутри, необходимо добавить ключевое слово inset.

Примеры

box-shadow: 1px 1px 0 2px #0F0;

Тень смещена на 1 пиксель вправо и на 1 пиксель вниз. Размытие отсутствует. Размер тени больше размера блока на 2 пикселя во всех направлениях. Цвет тени - зелёный.

Пример тени внутри блока:

box-shadow: inset 1px 1px 0 0 #0F0;