Эффекты тени CSS
- Предыдущая страница Радиальный градиент CSS
- Следующая страница box-shadow CSS
Создавайте тени с помощью 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-shadow CSS
