Показать Меню
falbar CSS3 тени

Способы задания теней блочным элементам при помощи CSS3

CSS3 тени

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

Первым примером использования этого свойства будет стандартная тень. Для того чтобы добавить её к элементу необходимо прописать вот такую строчку:

box-shadow: 15px 15px  0 #000;

В ней мы указали смещение по вертикали и по горизонтали, а также убрали размытие и задали цвет. В результате получили:

Стандартная тень

Для того чтобы придать тени больше реалистичности необходимо указать размытие.

Тень с размытием

Свойство box-shadow не ограничивается тремя параметрами. У него есть ещё один параметр, который отвечает за расширение или сужение тени.

box-shadow: 15px  15px  15px  15px #000;

Расширение тени

box-shadow: 50px  50px  15px  -15px #000;

Сужение тени

Box-shadow позволяет нам задать не одну тень блочному элементу, а несколько, перечислив их через запятую.

box-shadow: 15px 25px 5px #000,
			-10px -10px 5px green,
			40px 4px 5px red;

Несколько теней у одного элемента

Для большей реалистичности теней, мы можем использовать прозрачность при указании цвета.

box-shadow: 15px 25px 5px rgba(0, 0, 0, 0.6),
			-10px -10px 5px rgba(255,0,0, 0.6),
			40px 4px 5px rgba(0,128,0, 0.6);

Тени с прозрачностью

Предыдущие примеры были связанны с использованием внешних теней. Всё то - же самое можно осуществить и с внутренним вариантом, только стоит дописать перед параметрами inset.

box-shadow: inset 2px 5px 5px #000,
			inset -2px -5px 5px #000;

Внутренние тени

При этом нам не никто не запрещает комбинировать внешние и внутренние тени.

box-shadow: inset 2px 5px 5px black,
			inset 0px -5px 5px red,
			inset 6px 0px 5px blue,
			inset -5px 0px 5px yellow,
			2px 5px 5px black,
			0px -5px 5px red,
			6px 0px 5px blue,
			-5px 0px 5px yellow;

Комбинированные тени

Вот так легко можно управлять тенями при использовании CSS3 свойства box-shadow.

Подписаться на обновления

Комментариев еще не оставлено