Когда дело доходит до веб-дизайна, визуальная привлекательность вашего контента играет жизненно важную роль в привлечении и удержании внимания вашей аудитории. Одним из аспектов дизайна, который может существенно повлиять на общую эстетику и читабельность вашего веб-сайта, является стиль текста.
Стиль текста выходит за рамки простого выбора шрифта и цвета шрифта. Он включает в себя тщательное сочетание различных свойств CSS для достижения желаемого эффекта, например, использование контуров текста, чтобы сделать ваш текст визуально ярким.
В этой статье мы углубимся в искусство стилизации контура текста с помощью CSS и рассмотрим, как это работает, а также различные параметры, которые вы можете использовать.
Понимание веб-текстов
Веб-текст — это текст, отображаемый на веб-странице. Шрифты играют жизненно важную роль в отображении текста в Интернете. Эти шрифты по сути представляют собой векторную графику, что означает, что пиксельные данные не ограничивают их и могут отображаться в различных размерах, сохраняя при этом четкость и четкость.
Одним из захватывающих аспектов шрифтов, являющихся векторной графикой, является возможность применять штрихи или контуры вокруг отдельных символов. Подобно тому, как вы можете обвести фигуру в векторных программах, таких как Adobe Illustrator, CSS предоставляет средства для достижения того же эффекта в веб-тексте.
2 метода добавления контура текста с помощью CSS
Когда дело доходит до добавления эффекта контура к вашему тексту с помощью CSS, вы можете использовать два метода. Давайте рассмотрим и посмотрим на недостатки этих методов и способы их использования.
1. Использование свойства text-stroke
text-stroke — это свойство CSS, которое вы можете использовать для добавления структуры к вашим текстам. Это позволяет указать контур width и color. Это свойство поддерживается только браузерами на основе WebKit, и для его использования необходимо добавить -webkit- префикс.
Например, давайте добавим обводку к h1 текст заголовка — «Добро пожаловать в Kinsta»:
<h1>Welcome to Kinsta</h1>Вот как text-stroke свойство будет использоваться с -webkit- префикс:
h1 {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;
}-webkit-text-stroke-width и -webkit-text-stroke-color указать ход width и color, соответственно. Он устанавливает width к 3px и color к black.
Эти два свойства выше могут быть объединены с сокращенным свойством -webkit-text-strokeчто одновременно задает ход color и width.
h1 {
-webkit-text-stroke: 3px black;
}Это даст тот же результат.
Поддержка свойства text-stroke
По словам caniuse, нет поддержки text-stroke свойства в браузере Internet Explorer.
Если вы используете text-stroke чтобы установить контур ваших текстов, и пользователь использует неподдерживаемый браузер, то такой текст может быть не виден, если его цвет совпадает с цветом фона.
Чтобы исправить это, вы можете использовать -webkit-text-fill-color свойство для установки color для текста и установите резервный цвет с помощью color свойство:
h1 {
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke: 3px black;
}
Когда браузер не поддерживает text-stroke свойство, оно использует цвет, установленный color свойство.
Другим вариантом будет подтверждение того, что браузер поддерживает -webkit-text-stroke перед добавлением стиля.
@supports (-webkit-text-stroke: 3px black) {
h1 {
-webkit-text-fill-color: white;
-webkit-text-stroke: 3px black;
}
}2. Использование свойства text-shadow
Если вы не хотите обрабатывать различия в поддержке, вы можете использовать text-shadow свойство, которое поддерживает все последние версии популярных браузеров.
Для text-shadow свойство, мы будем использовать четыре тени, каждая из которых в правом верхнем углу, верхний левый, Нижний левыйи Нижний правый.
h1 {
color: #fff;
text-shadow:
3px 3px 0 #000,
-3px 3px 0 #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}В этом примере мы используем четыре тени для создания эффекта контура текста. Каждая тень имеет смещение в 3 пикселя от текста, а цвет установлен на черный (#000). Этот эффект аналогичен тому, который создается первым методом.
Накладывая тени на все четыре угла текста, мы добиваемся четкого контура. Не стесняйтесь настраивать смещения пикселей, цвета теней или цвета текста в соответствии с вашими предпочтениями в дизайне.
Этот метод дает вам дополнительное преимущество, поскольку вы можете настроить горизонтальные и вертикальные тени в соответствии с текстом. Вы также можете добавить немного радиуса размытия:
h1 {
color: #fff;
text-shadow:
3px 3px 2px #000,
-3px 3px 2px #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}
Одним из ограничений использования текстовых теней является то, что вы можете столкнуться с эффектом прерывистой обводки, когда длина тени превышает 1 пиксель (вы увидите это, если сравните его с text-stroke метод).
Сочетание свойств text-stroke и text-shadow
Вы можете комбинировать оба свойства для достижения визуально ошеломляющего эффекта, который сочетает в себе идеальный контур текста с легким размытием и дополнительными эффектами, предлагаемыми text-shadow свойство. Эта комбинация обеспечивает универсальный и настраиваемый подход к улучшению внешнего вида вашего текста.
h1 {
-webkit-text-stroke: 1px black;
color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
Вы также можете избавиться от необходимости добавлять отдельные тени к каждому углу и применить общую тень одной линией:
#heading-1{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 1px 4px #23430C;
}
#heading-2{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 2px 4px red;
}
#heading-3{
color: #333;
-webkit-text-stroke: 1px #282828;
text-shadow: 0px 4px 4px #282828;
}
Краткое содержание
Оба text-stroke и text-shadow свойства предлагают ценные возможности для добавления контуров к вашему тексту. Выбор между ними зависит от совместимости браузера, желаемых эффектов и уровня контроля, необходимого для вашего дизайна.
Поэкспериментируйте с различными техниками и найдите наилучший подход для создания привлекательных и визуально привлекательных контуров текста. Вы можете объединить возможности хостинга Kinsta со своим полным проектом для привлекательного присутствия в Интернете.
Поделитесь своим опытом! Использовали ли вы какие-либо другие подходы, не описанные в этой статье? Дайте нам знать об этом в комментариях.
