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

Создание обводки текста 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. Раньше, если бы мы хотели сделать это, пришлось бы полагаться на картинки, хитрости с тенями, использование специального контурного шрифта. Сейчас нам не необходимо все это делать!

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *