Обводка текста CSS или создание эффекта контурного текста
Обводка текста CSS основана на свойстве -webkit-text-stroke, которое принимает в качестве значений ширину и цвет:
.outline {
-webkit-text-stroke: 2px cyan;
}Значение width указывает, какой толщины будет контур. Значение color определяет цвет контура. Все довольно просто. Пример применения этого свойства:
.outline {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: cyan;
}Следует отметить, что у свойства text-stroke есть префикс webkit. Это может показаться странным, но это единственная версия, поддерживаемая всеми браузерами. Даже браузеры, не использующие webkit, такие как Firefox и Edge, поддерживают это свойство.
- Размещаем все вместе
- Работа со старыми браузерами
- Заключение
Мы рассмотрели свойство -webkit-text-stroke и его использование.
Теперь проиллюстрируем все это.
Перед тем, как сделать обводку текста CSS, создайте новый документ HTML и добавьте в него следующую разметку:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text Outline</title>
<style>
body {
background-color: #0F1020;
padding: 100px;
}
#textContainer p {
font-family: sans-serif;
font-size: 64px;
fong-weight: 100;
color: #E6E8E6;
margin: 0;
}
</style>
</head>
<body>
<div>
<p>Did you know that your
fingerprint is unique?
<span>Of course you did!</span></p>
</div>
</body>
</html>Сохраните веб-страницу, а затем откройте ее в браузере. Вы должны увидеть примерно следующее:
Взгляните на разметку, отвечающую за CSS обводку текста белым цветом, который мы видим:
<div>
<p>Did you know that your
fingerprint is unique?
<span>Of course you did!</span></p>
</div>Мы хотим разместить текст внутри элемента span и отобразить его с эффекта контура, о котором говорили ранее.
#textContainer .outline {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #AFFC41;
}После этого сохраните веб-страницу и откройте (обновите) ее в браузере. Вы должны увидеть появившийся контур:
Если хотите отобразить только контур текста, все, что нужно сделать, это присвоить CSS свойству color значение transparent:
#textContainer .outline {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #AFFC41;
color: transparent;
}После этого текст «Of course you did!» будет отображен только с помощью контура!
Свойство text-stroke поддерживается браузерами хорошо. Но, возможно, вы захотите отобразить альтернативный вариант для тех пользователей, которые используют старые версии браузеров. В этих случаях нужно «закрасить» текст сплошным цветом. Это можно сделать, комбинируя свойства color и -webkit-fill-color:
#textContainer .outline { color: #E6E8E6; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #AFFC41; }
outline {
color: #E6E8E6;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #AFFC41;
}В этом случае текст будет отображаться сплошным цветом для старых свойств (с помощью свойства color). Если поддерживаются свойства -webkit-text, то webkit-text-fill-color переопределит свойство цвета и отобразит контур с прозрачным цветом заливки.
Свойство -webkit-text-stroke упрощает создание обводки текста CSS. Раньше, если бы мы хотели сделать это, пришлось бы полагаться на изображения, хитрости с тенями, использование специального контурного шрифта. Теперь нам не нужно все это делать!
Дайте знать, что вы думаете по данной теме материала в комментариях. За комментарии, дизлайки, лайки, отклики, подписки огромное вам спасибо!
МЛМария Логутенкоавтор-переводчик статьи «Creating a Text Outline Effect»
html — Обводка текста на чистом СSS
Вопрос задан
Изменён 2 года 4 месяца назад
Просмотрен 2k раза
Хочу сделать обводку текста как на макете, но никак не выходит.
Вот как должно быть:
Что получилось у меня:
.box-design {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: $boxGray;
font-family: GBold;
font-size: 150px;
}<div> <p>DES</p> </div>
- html
- css
- вёрстка
- svg
- svg-animation
1
Для разнообразия можно рассмотреть использование SVG
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" >
<rect fill="#111111" />
<text x="10" y="150" font-size="150px" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES </text>
</svg> Добавляем буквально одну строчку и можно сделать анимацию обводки
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" >
<rect fill="#111111" />
<text x="10" y="150" font-size="150px" stroke-dasharray="25" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES
<!-- Анимация обводки -->
<animate attributeName="stroke-dashoffset" dur="2s" values="300;0" repeatCount="indefinite" />
</text>
</svg> +SVG Filter
Для обводки используются SVG фильтры: feColorMatrix и feMorphology
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" > <filter x="-20%" y="-20%"> <feMorphology operator="dilate" in="SourceAlpha" radius="4" result="e1" /> <feMorphology operator="dilate" in="SourceAlpha" radius="1" result="e2" /> <feComposite in="e1" in2="e2" operator="xor" result="outline"/> <feColorMatrix type="matrix" in="outline" values="0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0 0.5 0 0 0 1 0" result="outline2"/> <feComposite in="outline2" in2="SourceGraphic" operator="over" result="output"/> </filter> <rect fill="#111111" /> <text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="0" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES </text> </svg>
Тот же вариант + анимация строки
<svg version="1.
1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" >
<filter
x="-20%" y="-20%">
<feMorphology operator="dilate" in="SourceAlpha"
radius="5" result="e1" />
<feMorphology operator="dilate" in="SourceAlpha"
radius="1" result="e2" />
<feComposite in="e1" in2="e2" operator="xor"
result="outline"/>
<feColorMatrix type="matrix" in="outline"
values="0 0 0 0 0.2
0 0 0 0 0.1
0 0 0 0 0.9
0 0 1 1 0" result="outline2"/>
<feComposite in="outline2" in2="SourceGraphic"
operator="over" result="output"/>
</filter>
<rect fill="#111111" />
<text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="20" font-family="sans-serif" fill="none" stroke="silver" stroke-width="4" > DES
<!-- Анимация обводки -->
<animate attributeName="stroke-dashoffset" dur="5s" values="300;0" repeatCount="indefinite" />
</text>
</svg>5
Используйте text-shadow
.
box-design {
text-shadow:
-1px 0 0 red, /* Тень влево */
0 -1px 0 red, /* Тень вверх */
1px 0 0 red, /* Тень вправо */
0 1px 0 red; /* Тень вниз */
font-size: 150px;
color: #fff;
margin: 0;
}<div> <p>DES</p> </div>
1
Можно использовать text-shadow, как в соседнем ответе, но тогда не будет прозрачности у самих букв. Поэтому, всё таки -webkit-text-stroke:
body { background: radial-gradient(#d808, #000f) no-repeat; }
.box-design {
margin: 0;
font: 150px Arial;
text-align: center;
color: transparent;
-webkit-text-stroke: 2px white;
}<div> <p>DES</p> </div>
1
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
текстовый штрих | CSS-трюки — CSS-трюки
DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия.
Начните с бесплатного кредита в размере 200 долларов США!
text-stroke — это экспериментальное свойство, которое предоставляет параметры оформления текста, подобные тем, которые можно найти в Adobe Illustrator или других приложениях для векторного рисования. В настоящее время он не включен ни в одну из спецификаций W3C или WHATWG . По состоянию на июнь 2013 года он реализован только за -webkit 9.Префикс поставщика 0006, хотя будущие версии Firefox и Internet Explorer могут поддерживать это свойство (вероятно, под своими собственными префиксами).
знак {
обводка текста: 2px красного цвета;
} Свойство text-stroke на самом деле является сокращением для двух других свойств:
-
text-stroke-width, которое принимает единичное значение (1px, 0.125em, 4in и так далее) и описывает толщину штриха. эффект. -
text-stroke-color, который принимает значение цвета (hex, rgb/rgba, hsl/hsla и так далее).
эффект. text-stroke также имеет сопутствующее свойство, text-fill-color , которое переопределяет свойство color , позволяя изящно откатиться к другому цвету текста в браузерах, которые не поддерживают text- ход .
Достопримечательности
- Обводка, нарисованная с помощью
text-stroke, выравнивается по центру текстовой фигуры (как по умолчанию в Adobe Illustrator), и в настоящее время нет возможности установить выравнивание по внутренней или вне формы. К сожалению, это делает его гораздо менее пригодным для использования, так как независимо от того, что теперь штрих мешает форме буквы, разрушая замысел дизайнеров оригинального шрифта. Настройка была бы идеальной, но если бы нам пришлось выбирать одну, внешний удар был бы гораздо полезнее. - в Webkit,
text-strokeможно анимировать с помощью переходов и анимации CSS, но только цвет обводки, а не ширина обводки. - Более совместимая с браузером (и, возможно, надежная) замена эффекта
text-strokeиспользуетtext-shadow, который описан в этой статье CSS-Tricks.
Поддержка браузера
Рабочий стол
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4* | 49* | No | 15* | 3.1* |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | IOS Safari |
|---|---|---|---|
| 111* | 110* | 2,1* | 4,0-4.1* |
Дополнительная информация
- Добавление обводки к веб-тексту
- Live Editor
Дополнительная информация
Подробнее
.
0024украшение текста
.element { украшение текста: подчеркивание; } строка оформления текста
.element {строка-украшения-текста: подчеркивание; } стиль оформления текста
.element { стиль оформления текста: волнистый; } толщина оформления текста
.element {толщина украшения текста: 2px; } смещение подчеркивания текста
.element { text-underline-offset: 0.5em; } позиция подчеркивания текста
.element { text-underline-position: under; } -webkit-text-stroke - CSS: каскадные таблицы стилей
-webkit-text-stroke Свойство CSS указывает ширину и цвет штрихов для текстовых символов. Это сокращенное свойство полных свойств -webkit-text-stroke-width и -webkit-text-stroke-color .
/* Значения ширины и цвета */ -webkit-text-stroke: 4px темно-синий; обводка текста: темно-синий 4px; /* Глобальные значения */ -webkit-text-stroke: наследовать; -webkit-text-stroke: начальный; -webkit-text-stroke: не установлено; текстовый штрих: наследовать; текстовый штрих: начальный; текстовый штрих: не установлен;
Это свойство является сокращением для следующих свойств CSS:
-
-webkit-text-stroke-color -
-webkit-text-stroke-width
Значения
-
<длина> Ширина штриха.
-
<цвет> Цвет обводки.
| Начальное значение | как каждое из свойств сокращенной записи:
|
|---|---|
| Applies to | all elements |
| Inherited | да |
| Вычисленное значение | как каждое из свойств стенографии:
|
| Animation type | as each of the properties of the shorthand:
|
-webkit-text-stroke =
||
<цвет>">
=
<длина [0,∞]> |
тонкий |
средний |
толстый
Добавление красной обводки текста
HTML
Обводка этого текста красная.
CSS
#пример {
размер шрифта: 3em;
маржа: 0;
-webkit-text-stroke: 2px красный;
}
Результат
| Спецификация |
|---|
| Стандарт совместимости # The Webkit-Text-Strece |
