CSS Эффекты тени
Тени
С помощью CSS вы можете создавать эффекты тени!
CSS Эффекты тени
С помощью 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;
}
Попробуйте сами »
