Обводка текста CSS: создание эффекта контурного текста

  1. Статьи
  2. Верстка сайта
  3. CSS
0 ∞ 1

Обводка текста 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>
Создание эффекта отражения при помощи CSS3 и reflection.js

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

Размещаем все вместе

Взгляните на разметку, отвечающую за 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;
}
33 CSS3 эффекта при наведении, о которых вы должны знать

После этого сохраните веб-страницу и откройте (обновите) ее в браузере. Вы должны увидеть появившийся контур:

Размещаем все вместе - 2

Если хотите отобразить только контур текста, все, что нужно сделать, это присвоить 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»