CSS Box Shadow: Techniques for Creating Beautiful Shadows
CSS свойство box-shadow позволяет добавлять теневые эффекты к элементам веб-страницы. Оно позволяет создавать тени вокруг элементов, делая страницу более интересной и привлекательной для пользователя.
Синтаксис свойства box-shadow:
box-shadow: [горизонтальное смещение] [вертикальное смещение] [размытие] [расстояние тени] [цвет тени];
Где:
- горизонтальное смещение - это число, которое указывает на расстояние, на которое тень должна быть смещена вправо или влево. Он может иметь отрицательное значение, чтобы сместить тень влево.
- вертикальное смещение - аналогично горизонтальному, но указывает на вертикальное смещение.
- размытие (blur) - это значение, которое указывает на сглаживание тени. Чем больше это значение, тем более размыта тень.
- расстояние тени - это расстояние между элементом и тенью.
- цвет тени - это цвет тени.
Например, следующий CSS-код добавляет красную тень к элементу
div {
box-shadow: 5px 5px 5px 0px rgba(255,0,0,1);
}
Результат - элемент
- горизонтальное смещение = 5px
- вертикальное смещение = 5px
- размытие = 5px
- расстояние тени = 0px
- цвет тени = красный.
Box-shadow может быть использован не только на блочных элементах, но и на тексте. Например, следующий код добавляет тень к тексту внутри элемента
:
h1 {
box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
}
Результат - текст в элементе
будет обладать тенью со следующими параметрами:- горизонтальное смещение = 2px
- вертикальное смещение = 2px
- размытие = 2px
- расстояние тени = 0px
- цвет тени = черный с прозрачностью 0,3.
Также можно использовать несколько теней для одного элемента, указывая каждую тень в отдельной строке. Например:
div {
box-shadow:
2px 2px 2px 0px rgba(0,0,0,0.3),
-2px -2px 2px 0px rgba(255,0,0,0.3);
}
Здесь мы добавляем две тени к элементу
- первая тень имеет горизонтальное и вертикальное смещение вправо, размытие 2px и цвет черный с прозрачностью 0,3.
- вторая тень имеет горизонтальное и вертикальное смещение влево, размытие 2px и красный цвет с прозрачностью 0,3.
С помощью свойства box-shadow можно достичь различных эффектов для элементов на веб-странице. Оно позволяет создавать тени разных форм и цветов, тем самым подчеркивая элементы и улучшая их визуальный вид.