Свойство box-shadow CSS
box-shadow CSS - это свойство, которое позволяет создать практически для любого элемента эффект тени.
Синтаксис
Свойство box-shadow принимает значение, состоящее из пяти различных частей:
box-shadow: offset-x offset-y blur spread color position;Свойство box-shadow является единым свойством. Это означает, что важно учитывать порядок, в котором объявляются значения, в частности, длины.
offset-x
Первое указываемое значение - это горизонтальное смещение тени, то есть положение тени по оси x. Положительные значения задают положение тени справа от элемента, а отрицательные - слева от элемента.
CSS
.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }
.right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }
offset-y
Второе значение, в CSS shadow - это вертикальное смещение тени, то есть положения тени по оси y. Положительные значения задают тень ниже элемента, тогда как отрицательные значения задают положение тени над элементом.
CSS
.left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }
.right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }
blur
Задает радиус размытия тени, которое, в частности, можно получить с помощью фильтра «Размытие по Гауссу» в Photoshop. Значение 0 означает, что тень полностью однородная и резкая, без размытия. Чем больше значение размытия, тем менее резкой и размытой будет тень. Отрицательные значения не допускаются и приводятся к значению 0.
CSS
.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }
.middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
.right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }
spread
Определяет размер тени. Это значение box shadow CSS также можно представить себе, как расстояние от края тени до элемента. Положительные значения задают распространение тени за пределы элемента во всех направлениях на указанное значение.
Отрицательные значения уменьшают размеры тени относительно элемента. Значение по умолчанию равно 0, при котором тень будет иметь тот же размер, что и элемент.
CSS
.left { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
.middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) }
.right { box-shadow: 0px 50px 20px -20px rgba(0,0,0,0.5) }
color
Значение color задает цвет тени. В CSS inner shadow он может задаваться различными способами.
CSS
.left { box-shadow: 0px 0px 20px 10px #67b3dd }
.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) }
position
Заключительная часть значения свойства box-shadow - это необязательное ключевое слово, которое определяет положение тени. По умолчанию это значение не задано, что означает, что тень является внешней. Можно сделать тень внутренней, используя ключевое слово inset.
CSS
.left { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset }
.right { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) }
Несколько теней
С помощью свойства box-shadow можно задать несколько теней для одного элемента. Каждая новая тень добавляется к свойству box-shadow CSS как разделенный запятыми список.
CSS
.foo {
box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* внутренняя тень */
20px 20px 10px 0px rgba(0,0,0,0.5); /* внешняя тень */
}
}
Тень с закругленными углами
Радиус закругления углов тени задается свойством border-radius.
CSS
.foo {
box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5);
border-radius: 50%;
}
Подводя итоги
С помощью свойства box-shadow можно создавать удивительные эффекты.
Не воздействующая на остальные элементы рамка
Можно использовать свойства box-shadow и CSS text shadow, чтобы создать вокруг элемента рамку, которая не будет воздействовать на остальные элементы страницы. Кроме этого можно создать разные рамки на разных сторонах элемента.
CSS
.simple {
box-shadow: 0px 0px 0px 40px indianred;
}
.multiple {
box-shadow: 20px 20px 0px 20px lightcoral,
-20px -20px 0px 20px mediumvioletred,
0px 0px 0px 40px rgb(200,200,200);
}
Pop-Up эффект
Применяя к box-shadow CSS свойства преобразования, можно создать иллюзию перемещения элемента.
CSS
.popup {
transform: scale(1);
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
transition: box-shadow 0.5s, transform 0.5s;
}
.popup:hover {
transform: scale(1.3);
box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3);
transition: box-shadow 0.5s, transform 0.5s;
}
Эффект движения
Также можно добавить box-shadow к псевдо-элементу :after для создания эффекта взлета и опускания элемента.
CSS
.floating {
position: relative;
transform: translateY(0);
transition: transform 1s;
}
.floating:after {
content: "";
display: block;
position: absolute;
bottom: -30px;
left: 50%;
height: 8px;
width: 100%;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.2);
transform: translate(-50%, 0);
transition: transform 1s;
}
/* Состояния наведения */
.floating:hover {
transform: translateY(-40px);
transition: transform 1s;
}
.floating:hover:after {
transform: translate(-50%, 40px) scale(0.75);
transition: transform 1s;
}
Существует еще много эффектов, которые можно создать с помощью свойства box-shadow. Например, в этой демо-версии данное свойство применено для создания восьми различных эффектов листа бумаги. Хотя CSS shadow в первую очередь предназначено для создания простых теней, с его помощью можно реализовывать гораздо более сложные эффекты.