Как создать реалистичные текстовые эффекты

Оцените материал
(0 голосов)

Проблема

Порой определенные украшательства текста получают в Сети огромное распространение. Например, вдавленный текст, размытие текста при наведении указателя мыши, объемный текст и т. д. Эти эффекты обычно строятся на комбинации тщательно проработанных текстовых, а также на знании того, как устроено наше зрение, — многие из них в той или иной степени основываются

 При использовании подобных эффектов очень легко позабыть о доступности текста, так что никогда не ленитесь тестировать степень контрастности оформления
на оптических иллюзиях. Если вам уже известны используемые трюки, то создавать такие эффекты очень легко, однако они не всегда поддаются простому обратному декодированию посредством инструментов разработки. Секрет посвящен созданию подобных эффектов, для того чтобы вы никогда
больше не задавались вопросом: «Как вообще это работает?!»

Эффект вдавленного текста

Эффект вдавленного текста — один из самых популярных на веб-сайтах со скевоморфным дизайном. И хотя скевоморфный дизайн уже не так популярен, как когда-то, у него всегда будут свои верные поклонники. Этот эффект лучше всего работает на умеренно светлом фоне с темным текстом, но его можно применять и к светлому тексту на темных фонах, если только текст не на 100% черный, а фон не на 100% белый или черный. В его основе тот же замысел, который используется со времен первых графических интерфейсов пользователя для создания впечатления вдавленных или выпуклых кнопок: более светлая тень внизу (или темная наверху) создает иллюзию, что объект выгравирован на основной поверхности. Схожим образом более темная тень внизу (или светлая наверху) создает иллюзию того, что объект выдавлен из основной поверхности. Причина, почему это работает, кроется в том, что мы обычно предполагаем наличие источника света наверху: таким образом, выпуклый объект должен отбрасывать тень вниз, а выгравированный объект должен быть освещен снизу. В качестве точки отсчета давайте возьмем цвета с рисунка.

Цвет текста здесь — hsl(210, 13%, 30%) , а цвет фона —  hsl(210, 13%, 60%) :
background: hsl(210, 13%, 60%);
color: hsl(210, 13%, 30%);
Когда мы используем темный шрифт на более светлом фоне (как в предыдущем примере), наилучшим образом обычно работает светлая тень внизу. Насколько светлая — зависит от конкретных цветов, работающих в вашем дизайне, а также от того, насколько заметным должен получиться эффект. Поэкспериментируйте с параметром альфа-канала, чтобы добиться наиболее привлекательного результата. В нашем примере мы остановились на 80% белом, но в вашем решении значения могут быть совершенно иными:
background: hsl(210, 13%, 60%);
color: hsl(210, 13%, 30%);
text-shadow: 0 1px 1px hsla(0,0%,100%,.8);

 В данном случае для создания эффекта мы использовали значения в пикселах, а не в единицах  em , однако если в вашем дизайне текст может быть любого размера, от крошечных до огромных букв, то вам лучше подойдут единицы длины  em:
text-shadow: 0 .03em .03em hsla(0,0%,100%,.8);

Что произойдет, если у нас будет светлый текст на темном фоне? Тень, определяемая в фрагменте кода выше, приводит к ужасным результатам в случае, когда цвета меняются местами, из-за чего текст выглядит расплывшимся.

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

CSS-код выглядит так:
background: hsl(210, 13%, 40%);
color: hsl(210, 13%, 75%);
text-shadow: 0 -1px 1px black;

ПОПРОБУЙТЕ САМИ!

http://play.csssecrets.io/letterpress

Текст с обводкой

В будущем создавать текст с контуром/обводкой будет намного проще, так как мы сможем использовать параметр размазывания свойства  text-shadow, делая тени крупнее и превращая их в подобие обводки — аналогично тому, как мы имитируем контуры посредством размазывания  box-shadow.

К сожалению, поддержка браузерами этого параметра в настоящее время очень ограниченна, и нам приходится полагаться на другие способы имитировать обводку, дающие более или менее приемлемые результаты. Самый распространенный способ — накладывать друг на друга несколько теней  text-shadow с немного отличающимися значениями смещения, например так:


background: deeppink;
color: white;
text-shadow: 1px 1px black, -1px -1px black,
1px -1px black, -1px 1px black;

В качестве альтернативы можно было бы использовать несколько слегка размытых теней без смещения:
text-shadow: 0 0 1px black, 0 0 1px black,
0 0 1px black, 0 0 1px black,
0 0 1px black, 0 0 1px black;

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


background: deeppink;
color: white;
text-shadow: 3px 3px black, -3px -3px black,
3px -3px black, -3px 3px black;


Конечно, для решения задачи всегда можно прибегнуть к помощи формата SVG, но он сильно замусоривает разметку. Предположим, что мы хотим использовать код SVG для стилизации заголовка первого уровня. HTML-код будет выглядеть так:
SVG
<h1><svg width="2em" height="1.2em">
<use xlink:href="#css" />
<text id="css" y="1em">CSS</text>
</svg></h1>
А CSS-код придется написать примерно такой:
h1 {
font: 500%/1 Rockwell, serif;
background: deeppink;
color: white;
}
h1 text {
fill: currentColor;
}
h1 svg { overflow: visible }
h1 use {
stroke: black;
stroke-width: 6;
stroke-linejoin: round;
}

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

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/stroked-text

Сияющий текст

Сияние — довольно распространенный эффект. Часто так отображаются ссылки при наведении на них указателя мыши или же заголовки на определенных

веб-сайтах. Кроме того, это один из самых легких в создании эффектов. В своей простейшей форме он требует всего лишь парочки наложенных друг на друга теней  text-shadow безо всяких сдвигов и того же цвета, что и основной текст:
background: #203;
color: #ffc;
text-shadow: 0 0 .1em, 0 0 .3em;
Если вы создаете эффект для состояния ссылки, когда на нее наводится указатель мыши, то нужно также добавить переход, например так:
a {
background: #203;
color: white;
transition: 1s;
}
a:hover {
text-shadow: 0 0 .1em, 0 0 .3em;
}
Вы можете определить еще более интересный эффект, скрывая сам текст при срабатывании  :hover и, по сути, создавая иллюзию того, что буквы плавно расплываются:


a {
background: #203;
color: white;
transition: 1s;
}
a:hover {
color: transparent;
text-shadow: 0 0 .1em white, 0 0 .3em white;
}
Однако помните, что зависимость от  text-shadow в вопросе отображения текста таит в себе опасность: у этого решения нет элегантного обходного пути. Если  text-shadow не поддерживается, то вообще никакой текст визуализирован не будет. Таким образом, необходимо проявлять осторожность и применять это только в тех окружениях, которые поддерживают  text-shadow . Или же размывать текст с помощьфильтров CSS:

a {
background: #203;
color: white;
transition: 1s;
}
a:hover {
filter: blur(.1em);
}


Возможно, в этом варианте поддержка браузерами будет хуже, но, по крайней мере, ничего не сломается, если поддержка будет отсутствовать вовсе.

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/glow

Объемный текст

Еще один популярный (пожалуй, даже слишком) эффект скевоморфного дизайна — это объемный текст.

Главная идея заключается в использовании большого количества наложенных друг на друга теней: каждая чуть темнее предыдущей, без размытия и со сдвигом только на  1px . В самом же низу «стопки» должна находиться сильно размытая темная тень, имитирующая тень, которую отбрасывала бы вся эта конструкция. Давайте возьмем в качестве отправной точки текст на рисунке выше, для стилизации которого применяется этот простой CSS-код:

background: #58a;
color: white;

Теперь добавим несколько теней  text-shadow , постепенно делая их темнее:
background: #58a;
color: white;
text-shadow: 0 1px hsl(0,0%,85%),
0 2px hsl(0,0%,80%),
0 3px hsl(0,0%,75%),
0 4px hsl(0,0%,70%),
0 5px hsl(0,0%,65%);


Как видно на рисунке, мы уже приближаемся к желаемому результату, но эффект все еще смотрится недостаточно реалистично. Верите или нет, но для того, чтобы достичь результата, показанного на рисунке, нам нужно всего лишь добавить еще одну тень внизу:
background: #58a;
color: white;
text-shadow: 0 1px hsl(0,0%,85%),
0 2px hsl(0,0%,80%),
0 3px hsl(0,0%,75%),
0 4px hsl(0,0%,70%),
0 5px hsl(0,0%,65%),
0 5px 10px black;

Такой повторяющийся громоздкий код — первый кандидат на преобразование в препроцессорную примесь. Один из вариантов, как это можно было бы сделать в SCSS, показан далее:
SCSS
@mixin text-3d($color: white, $depth: 5) {
$shadows: ();
$shadow-color: $color;
@for $i from 1 through $depth {
$shadow-color: darken($shadow-color, 10%);
$shadows: append($shadows,
0 ($i * 1px) $shadow-color, comma);
}
color: $color;
text-shadow: append($shadows,
0 ($depth * 1px) 10px black, comma);
}
h1 { @include text-3d(#eee, 4); }


Существует множество вариаций этого эффекта. Например, если сделать все тени черными (цвет  black ) и убрать последнюю размытую тень, то можно имитировать эффект вдавленного текста, часто используемый для имитации старых табличек или оформления их в ретростиле:


color: white;
background: hsl(0,50%,45%);
text-shadow: 1px 1px black, 2px 2px black,
3px 3px black, 4px 4px black,
5px 5px black, 6px 6px black,
7px 7px black, 8px 8px black;

Этот вариант проще преобразовать в примесь или — что в данном случае более удобно — в функцию:
SCSS
@function text-retro($color: black, $depth: 8) {
$shadows: (1px 1px $color,);
@for $i from 2 through $depth {
$shadows: append($shadows,
($i*1px) ($i*1px) $color, comma);
}
@return $shadows;
}
h1 {
color: white;
background: hsl(0,50%,45%);
text-shadow: text-retro();
}

Десерт на сегодня - четвероногий робот от Boston Dynamics продолжает совершенствоваться. Кто знает, может, через несколько лет такие роботы поступят в продажу? А может, это начало Скайнета из "Терминатора"

Прочитано 155 раз Последнее изменение Суббота, 22 апреля 2017 13:51
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

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

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Поиск по сайту

Google+