Блог Тимура Казанского

Как сделать эффектную тень текста с помощью css


Всем доброго времени суток. Сегодня пойдет речь о том, как сделать тень текста с помощью одного лишь CSS свойства text-shadow, которое имеет в своем арсенале 4 значения, а именно: смещение по горизонтали, смещение по вертикали, необязательное значение радиус размытия и цвет.

Давайте перейдем к примеру и вам сразу все станет ясно.

Тень текста

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Пример использования свойства text-shadow</title>
<style>
p {
text-shadow: 0.5em 0.6em 0.1em grey;
}
</style>
</head>
<body>
<p>Посмотрите на тень текста</p>
</body>
</html>

Тень текста пример

И так, как мы видим, первое значение свойства «text-shadow» сместило тень текста на 0.5 em вправо (отрицательное значение сместит тень влево, т.е. -0.5em), второе значение сместило тень вниз на 0.6em (отрицательное значение сместит тень вверх), третье значение установило размытие в 0.1em (отрицательного значения не существует), и четвертое значение «grey» установило цвет тени серым.

И пример тени, при использовании отрицательных значений (т.е. противоположное смещении):

Тень текста наоборот

text-shadow: -0.5em -0.6em 0.1em grey;

Отрицательные значения тени

Эффектные тени текста

 Эффектные тень текста

Чтобы сделать тень текста эффектной, нам нужно применить сразу несколько теней к тексту одновременно. Для этого мы устанавливаем к свойству «text-shadow» значения одной тени, затем ставим запятую и следом указываем вторую тень, которая соответственно наложится на первую тень и так далее, тем самым изменяя значения цвета, смещения и размытости каждой тени, мы можем создавать весьма интересные тени, например:

h1 { text-shadow: -0em -0em 0.2em red, -0em -0em 0.25em blue, -0.05em -0.05em 0em pink,
-0.1em -0.1em 0.1em red, -0.15em -0.15em 0.2em pink, -0em -0em 1em blue,
-0em -0em 2em green, 0.05em 0.05em 0em pink, 0.1em 0.1em 0.1em green,
0.15em 0.15em 0.2em pink; color: white; }

Играясь со значениями теней, можно создавать не только красивые и эффектные тени, но и красивые надписи на уровне фотошопа. Но имейте в виду, что чрезмерное использование теней в вашем тексте не есть хорошо, так как, во-первых, это затруднит чтение текста, во-вторых, увеличит скорость загрузки вашей страницы, поэтому используйте тени умеренно.

На этом я буду заканчивать данную статью, надеюсь, она оказалась вам полезной, если что-то непонятно обязательно пишите в комментариях, с вами был Тимур Казанский и увидимся в следующих статьях данного блога.

Категория: Уроки CSS для чайников

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 0