Как задать тень для текста
Недавно мы с Вами рассматривали тему, и я Вам рассказывал о том, как задать тень для элемента. В этом же уроке мы рассмотрим, как задать тень для текста. CSS свойство, которое устанавливает тень для текста, называется text-shadow. Оно является довольно популярным, и при его помощи можно достигать довольно интересных результатов с текстом. Но мы с Вами сегодня рассмотрим основы использования данного свойства, а опираясь на полученные знания, в дальнейшем Вы можете попытаться реализовывать различные эффекты. Приступим к написанию кода.
<html>
<head>
<title>Тень</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<p>Текст с тенью</p>
</body>
</html>
Задаем тень для текста:
p {
font-size: 25px;
text-shadow: 3px 2px 4px #000, 0 0 1px #909;
}
Для начала мы создали обыкновенный абзац с некоторым текстом, к которому и будем применять CSS свойства. Первым делом устанавливаем размер шрифта равный двадцать пять пикселей, для того чтобы текст не выглядел миниатюрно, а пользователь мог нормально рассмотреть дальнейший эффект тени. И вторым действием, мы устанавливаем тень для текста, при помощи CSS свойства text-shadow.
Где первым и вторым параметром соответственно указывается смещение по оси Х и по оси Y. Третий параметр отвечает за размытие тени. Все значения я указывал в пикселях, хотя это совсем необязательно, Вы можете использовать и другие единицы. И последний параметр отвечает за цвет тени, которая будет применяться к элементу. Также через запятую мы указали вторую тень для того же самого элемента. Вот этим и примечательно данное свойство, что мы можем указывать несколько теней для одного элемента и получать при этом красивый результат. Теперь посмотрим на экран и убедимся в том, что все у нас сработало правильно.
Как видите, мы получили тень черного цвета с небольшим фиолетовым отливом, что смотрится довольно примечательно. Думаю, Вам все предельно ясно в изучаемой теме, теперь после ее изучения Вы можете пробовать придавать различные эффекты для текста. Надеюсь, Вам понравится, и Вы будете использовать свойство text-shadow в своей практике.
