Css обводка текста

Контур не изменяет ширины буквы, межбуквенного или межсловного расстояния.

Одна его половина находится на букве, вторая — вне её. Тень от буквы, при наличии, располагается под контуром, так как начинается от края буквы.

Щ

<style> div { color: green; -webkit-text-stroke: .07em rgba(0,0,0,.5); text-shadow: .07em 0 red; } </style> <div>Щ</div>

Примеры

Контуры букв

<style> @supports (-webkit-text-stroke: 1px blue) { p { color: transparent; -webkit-text-stroke: 1px blue; } } </style> <p>Текст

Полосатая тыльная сторона

<style> @supports (-webkit-text-stroke: 1px blue) { p { color: transparent; -webkit-text-stroke: 1px blue; text-shadow: -5px -2px blue, -4px -1px #fff; } } @supports (-webkit-background-clip: text) { p { background: repeating-linear-gradient(45deg, blue, blue 1px, white 2px, white 3px); -webkit-background-clip: text; } } </style> <p>Текст

Окантовка

<style> p { position: relative; color: black; -webkit-text-stroke: .04em black; } p::before { content: attr(data-text); position: absolute; /* в том же месте той же ширины */ left: 0; right: 0; -webkit-text-stroke: .02em gold; } </style> <p data-text=»Текст»>Текст

Красивый

<style> i { position: relative; letter-spacing: -0.1em; } @supports (-webkit-text-stroke: .03em DeepSkyBlue) { i { color: LightCyan; -webkit-text-stroke: .03em DeepSkyBlue; } i::before { content: attr(data-text); position: absolute; left: 0; right: 0; z-index: -1; -webkit-text-stroke: .1em RoyalBlue; } } </style> <i data-text=»К»>К</i><i data-text=»р»>р</i><i data-text=»а»>а</i><i data-text=»с»>с</i><i data-text=»и»>и</i><i data-text=»в»>в</i><i data-text=»ы»>ы</i><i data-text=»й»>й</i>

345-45-45

<style> div { position: relative; padding-left: .2em; } div::before { content: attr(data-text); position: absolute; left: 0; right: 0; padding-left: .2em; -webkit-text-stroke: .2em #E09E0C; z-index: -1; } </style> <div data-text=»Текст»>Текст</div>

Создание эффекта контурного текста

Создание обводки текста 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 id="textContainer"> <p>Did you know that your fingerprint is unique? <span class="outline">Of course you did!</span></p> </div> </body> </html>

Сохраните веб-страницу, а затем откройте ее в браузере. Вы должны увидеть примерно следующее:

Взгляните на разметку, отвечающую за CSS обводку текста белым цветом, который мы видим:

<div id="textContainer"> <p>Did you know that your fingerprint is unique? <span class="outline">Of course you did!</span></p> </div>

Мы хотим разместить текст внутри элемента span и отобразить его с эффекта контура, о котором говорили ранее. Обводка должна быть шириной 1 пиксель и иметь зеленовато-лимонный цвет. Для этого добавьте следующий код в нижнюю часть блока style (ниже существующих правил стиля):

#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; }

В этом случае текст будет отображаться сплошным цветом для старых свойств (с помощью свойства color). Если поддерживаются свойства -webkit-text, то webkit-text-fill-color переопределит свойство цвета и отобразит контур с прозрачным цветом заливки.

Заключение

Свойство -webkit-text-stroke упрощает создание обводки текста CSS. Раньше, если бы мы хотели сделать это, пришлось бы полагаться на изображения, хитрости с тенями, использование специального контурного шрифта. Теперь нам не нужно все это делать!

Перевод статьи «Creating a Text Outline Effect» был подготовлен дружной командой проекта Сайтостроение от А до Я.

.

Добавить комментарий

Закрыть меню