CSS Shadow Effects
Тень коробки
С CSS вы можете создавать эффекты теней!
Эффекты тени CSS
С помощью CSS можно добавить тень к тексту и к элементам.
В этой главе вы узнаете о следующих свойствах:
text-shadowbox-shadow
Тень текста CSS
Свойство CSS text-shadow применяет тень к тексту.
В самом простом использовании, вы только определяете горизонтальную тень (2px) и вертикальную тень (2px):
Эффект тени текста!
Пример
h1
{
text-shadow: 2px 2px;
}
Затем добавьте цвет к тени:
Эффект тени текста!
Пример
h1
{
text-shadow: 2px 2px red;
}
Затем добавьте эффект размытия в тень:
Эффект тени текста!
Пример
h1
{
text-shadow: 2px 2px 5px red;
}
В следующем примере показан белый текст с черной тенью:
Эффект тени текста!
Пример
h1
{
color: white;
text-shadow: 2px 2px 4px #000000;
}
В следующем примере показана красная Неоновая тень свечения:
Эффект тени текста!
Пример
h1
{
text-shadow: 0 0 3px #FF0000;
}
Множественные тени
Чтобы добавить в текст более одной тени, можно добавить список теней с разделителями-запятыми.
В следующем примере показана красная и синяя Неоновая тень свечения:
Эффект тени текста!
Пример
h1
{
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
В следующем примере показан белый текст с черным, синим и даркблуе тенью:
Эффект тени текста!
Пример
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-свойство тени
Свойство CSS box-shadow применяет тень к элементам.
В самом простом использовании, вы только определяете горизонтальную тень и вертикальную тень:
Пример
div
{
box-shadow: 10px 10px;
}
Затем добавьте цвет к тени:
Пример
div
{
box-shadow: 10px 10px grey;
}
Затем добавьте эффект размытия в тень:
Пример
div
{
box-shadow: 10px 10px 5px grey;
}
Вы также можете добавить тени в:: 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; /* hide shadow behind
image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one
half of the remaining 30% */
height: 100px;
bottom: 0;
}
Карты
Пример использования свойства box-shadow для создания бумажных карточек:
1
January 1, 2016
Hardanger, Norway
Пример
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;
}
Свойства тени CSS
В следующей таблице перечислены свойства тени CSS:
| Свойство | Описание |
|---|---|
| box-shadow | Добавление одной или нескольких теней к элементу |
| text-shadow | Добавление в текст одной или нескольких теней |