6.1 Свойство box-shadow
Свойство box-shadow в CSS используется для добавления тени к элементам. Это свойство позволяет создавать разнообразные визуальные эффекты, улучшая внешний вид веб-страниц. Рассмотрим подробно синтаксис, значения и примеры использования box-shadow.
Синтаксис box-shadow
Свойство box-shadow принимает одно или несколько значений, каждое из которых задает параметры тени. Общий синтаксис выглядит так:
element {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
Значения:
offset-x: горизонтальное смещение тени. Положительные значения смещают тень вправо, отрицательные — влевоoffset-y: вертикальное смещение тени. Положительные значения смещают тень вниз, отрицательные — вверхblur-radius: радиус размытия тени. Чем больше значение, тем более размытой будет тень. Значение по умолчанию — 0 (тень без размытия)spread-radius: радиус расширения тени. Положительные значения увеличивают размер тени, отрицательные — уменьшают. Значение по умолчанию — 0color: цвет тени. Поддерживаются все цветовые форматы CSS
6.2 Примеры использования
Основная тень:
.shadow-basic {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-basic">Основная тень</div>
</body>
Тень с размытием:
.shadow-blur {
width: 200px;
height: 200px;
background-color: #2ecc71;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-blur">Тень с размытием</div>
</body>
Тень с распространением:
.shadow-spread {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-spread">Тень с распространением</div>
</body>
Внутренняя тень:
.shadow-inset {
width: 200px;
height: 200px;
background-color: #f1c40f;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-inset">Внутренняя тень</div>
</body>
6.3 Настройки box-shadow
Детали настройки box-shadow:
Смещение тени (offset-x и offset-y)
- Положительные значения: тень смещается вправо (
offset-x) и вниз (offset-y) - Отрицательные значения: тень смещается влево (
offset-x) и вверх (offset-y)
Размытие тени (blur-radius)
- Значение 0: тень будет четкой, без размытия
- Положительные значения: чем больше значение, тем более размытой будет тень
Распространение тени (spread-radius)
- Положительные значения: тень увеличивается в размерах
- Отрицательные значения: тень уменьшается в размерах
Цвет тени (color)
Цвет может задаваться в различных форматах: название цвета, шестнадцатеричный код, RGB, RGBA, HSL, HSLA.
Внутренняя тень (inset)
Ключевое слово inset создает тень внутри элемента, что может использоваться для создания вдавленного эффекта.
Несколько теней с разными параметрами:
.multiple-shadows {
width: 200px;
height: 200px;
background-color: #bdc3c7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.3);
margin: 20px;
}
<body>
<div class="multiple-shadows">Несколько теней</div>
</body>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ