Тень в CSS3. Как сделать тень в CSS3 для блока (div)

Тень под блочным элементом на странице обычно применяется для создания эффекта трёхмерности, привлечения внимания к элементу или как часть дизайна. Небольшая тень под элементами придаёт также странице объём и глубину.

Для добавления тени используется свойство box-shadow, у которого имеется шесть значений, из них только два являются обязательными.

Значения свойства box-shadow:

				
					box-shadow: inset 5px 5px 10px 3px #ccc;
				
			

На данном примере показано свойство box-shadow со всеми возможными значениями, каждое значение имеет свою идентификацию:

  1. Ключевое слово inset устанавливает тень внутри элемента;
  2. Сдвиг тени по горизонтали (5px — вправо, -5px — влево);
  3. Сдвиг по вертикали (5px — вниз, -5px — вверх);
  4. Радиус размытия тени (0 — резкая тень);
  5. Растяжение тени (5px — растяжение, -5px — сжатие);
  6. Цвет тени.

Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета. За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней.

Для того чтобы тень работала во всех браузерах, используйте значение CSS со следущими свойствами:

				
					box-shadow:                inset 5px 5px 10px 3px #ccc;
-webkit-box-shadow:   inset 5px 5px 10px 3px #ccc;  /*Для Safari и Chrome*/
-moz-box-shadow:       inset 5px 5px 10px 3px #ccc;  /*Для Firefox*/
				
			

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Евгений

Здравствуйте! Чем я могу вам помочь?

Заполнить бриф

Заполнение брифа значительно ускоряет время на обсуждение проекта между клиентом и разработчиком.

Интересующий вас сайт
Для юридических лиц или ИП
Если вы не ЮЛ или ИП, пропустите этот шаг
Контактная информация

Оставить заявку

Перезвоню вам в течение 30-ти минут

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

Бриф на разработку сайта

Заполнение брифа значительно ускоряет время на обсуждение проекта между клиентом и разработчиком.

Контактная информация
Интересующий вас лендинг
Направленность вашего лендинга
Краткое описание проекта
Если у вас есть ТЗ, загрузите
Ссылка на сайт ваших конкурентов
Понравившиеся вам сайты

Оставить заявку

Перезвоню вам в течение 30-ти минут в рабочее время

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