СSS3 Тени
Бокс Тень
С помощью CSS3 вы можете создавать теневые эффекты!
CSS3 эффект тени
С помощью CSS вы можете добавить тень к тексту и элементам.
В этой главе вы узнаете о следующих свойствах:
text-shadowbox-shadow
CSS тень текста
CSS свойство text-shadow применяет тень к тексту.
В простейшем случае можно указать только горизонтальную тень (2 пикселя) и вертикальную тень (2 пикселя):
Эффект тени текста!
Сначала, добавить цвет к тени:
Эффект тени текста!
Затем добавьте эффект размытия в тень:
Эффект тени текста!
В следующем примере показан белый текст с черной тенью:
Эффект тени текста!
Следующий пример показывает красную неоновую тень:
Эффект тени текста!
Несколько теней
Чтобы добавить в текст несколько теней, нужно добавить список теней разделенные запятыми .
Следующий пример показывает красную и голубую неоновую тень:
Эффект тени текста!
В следующем примере показан белый текст с черной, синей и темно-синей тенью:
Эффект тени текста!
Пример
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Редактор кода »
Можно также использовать свойство text-shadow для создания простой границы вокруг текста (без теней):
Граница вокруг текста!
Пример
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
Редактор кода »
Свойство CSS box-shadow
CSS свойство box-shadow устанавливает тень к элементам.
В простейшем случае можно указать только горизонтальную и вертикальную тень:
Сначала, добавить цвет к тени:
Сначала, добавить эффект размытия к тени:
Вы также можете добавить тени к псевдо-элементам ::before и ::after,
чтобы создать интересный эффект:
Пример
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding:
10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* скрыть тень
изображение */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* половина оставшегося 30% */
height: 100px;
bottom: 0;
}
Редактор кода »
Карточки
Пример использования свойства box-shadow для создания красивх карточек:
1
Январь 1, 2016
Хардангер, Норвегия
Пример
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
Редактор (Карточка Текстовая ) »
Редактор (Карточка Изображения) »
Проверьте себя с помощью упражнений!
Свойства CSS3 Тени
В следующей таблице перечислены теневые свойства CSS3:
| Свойство | Описание |
|---|---|
| box-shadow | Добавляет одну или несколько теней к элементу |
| text-shadow | Добавляет одну или несколько теней к тексту |
