Типографика – это один из самых любимых инструментов в веб-дизайне. И что самое приятное, так это то, что CSS дает нам возможность «играть» с текстом, особенно его тенью. Причем на первый взгляд, это может казаться простым элементом, но в сочетании с общей картиной принять действительно приятный глазу эффект.
Мы попытаемся рассмотреть несколько вариантов теней с помощью свойства text-shadow для текста. Все это можно будет скопировать и вставить в свою работу.
Базовая тень.
Свойство text-shadow достаточно хорошо работает на всех современных браузерах. Ну а если вы хотите определить (на всякий случай), что то или иное свойство будет восприниматься браузерами более старого поколения, то можете воспользоваться ресурсом https://modernizr.com/
- Синтаксис.
Синтаксис для создания простой тени показан ниже. У вас есть четыре переменные для работы, первые две устанавливают положение вашей тени, в третьей - устанавливается степень размытия и в четвертой - цвет тени.
text-shadow: horizontal-offset vertical-offset blur color;
Теперь на практике: тень была опущена на 2 пикселя, сдвинута вправо на 4 пикселя с размытием в 4 пикселя черным цветом с прозрачностью 30%
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
В результате мы получили простую, но в то же время весьма привлекательную тень.
- Почему rgba?
Вы можете использовать то, к чему привыкли и что больше нравиться. Но, как нам кажется, rgba позволяет добавить еще одну переменную к свойству. Поэтому можно установить не только цвет тени, но и ее прозрачность без увеличения кода.
Иллюзия вдавленного текста.
Самое замечательное в работе с text-shadow заключается в том, что она дает больше возможностей, чем свойство shadow. Например, создание иллюзии вдавленного текста.
Для начала нужно задать тексту цвет, который будет темнее основного фона. Затем применим text-shadow. Зададим белый цвет с минимальной прозрачностью.
body {
background: #222;
}
#text h1 {
color: rgba(0,0,0,0.6);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}
Как вы могли заметить, мы задали основному фону цвет #222, а тексту – черный с прозрачностью 60%. А наша белая тень была расположена немного ниже и правее основного текста.
Жесткая тень.
Помните, что совсем не обязательно размывать тень. Не стесняйтесь экспериментировать, например, с жесткими ретро-текстами.
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
Двойная тень.
Реальное удовольствие можно получить от осознания того, что вы не ограничены одной тенью. С помощью text-shadow можно через запятую задавать новую тень.
Посмотрите на основной синтаксис и обратите внимание, что тени отделяются запятыми, и в конце привычные точка с запятой.
text-shadow: shadow1, shadow2, shadow3;
Для примера можно сделать так, как показано на рисунке, получив винтажный текст для газеты.
Убираем вниз и увеличиваем дистанцию.
Как только начинаешь экспериментировать с text-shadow, результаты с каждым разом становятся все более впечатляющими. Можно даже попробовать создавать 3D тексты.
text-shadow: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);
Подчеркивая значимость.
И еще один пример применения нескольких теней в одном свойстве. Но на этот раз, их меньше и они находятся ближе к основному тексту. Все это создает эффект значимости теста.
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
Помощник.
Просматривая то, что предлагают другие дизайнеры в использовании теней, было найдено два способа, которые отлично подходят под наш небольшой раздел «Помощник».
1. Серьезный 3D текст.
Здесь для получения необходимого результата используется 12 отдельных теней.
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
2. Вжатый текст.
Ранее мы уже рассматривали тень такого рода. Но есть более сложная практика, и при этом более правильная и создающая лучший эффект.
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
Еще несколько забавных теней.
Теперь, когда вы увидели основные смыслы работы с text-shadow, посмотрите еще несколько примеров применения этого свойства.
- Светящаяся.
text-shadow: 0px 0px 6pxrgba(255,255,255,0.7);
- Супергерой.
text-shadow: -10px 10px 0px #00e6e6,
-20px 20px 0px #01cccc,
-30px 30px 0px #00bdbd;
- Несколько источников света.
text-shadow: 0px 15px 5px rgba(0,0,0,0.1),
10px 20px 5px rgba(0,0,0,0.05),
-10px 20px 5px rgba(0,0,0,0.05);
- Мягкое теснение.
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
И в заключении.
Как и большинство эффектов CSS, text-shadow достаточно прост в реализации. Экспериментируйте, например, используя запятые в качестве разделителя между тенями, придавайте своему тексту интерес и проявляйте реалистичность!
Источник https://designshack.net/
Читайте также:
5 простых дизайнерских лайфхаков для "прокачки" вашей страницы в социальных сетях.
Комментарии (1)