Добавляем обводку и окрашиваем текст на веб странице с помощью css

Готовое css решение для окрашивания текста в цвета градиентом и добавления обводки с пояснениями.

В графических редакторах довольно легко добавить тексту такие эффекты, как градиентный цвет и обводку. Тексты с этими эффектами при грамотном подходе могут выгодно отличать дизайн от аналогов и стать его изюминкой. Это создает для дизайнеров соблазны применять данные эффекты.

Но на этапе верстки реализация градиента и обводки текста может стать проблемой. Дело в том, что в css градиент задается с помощью значения, записанное в функции linear-gradient для свойств background и background-image.

background: linear-gradient(90deg, #ff5656 0%, #161ff3 100%);

 Для свойства color, с помощью которого задается цвет текста linear-gradient не работает.

С обводкой дела обстоят не лучше. В какой бы тег не был обернут непосредственно сам текст применяя стандартные методы мы не получим ожидаемого эффекта. Свойство border применит обводку к блоку, в котором находится непосредственно текст, но не к самому тексту.

Для совместимости с браузерами, использующими движок рендеринга WebKit будут использоваться вендорные префиксы css.

Вендорные префиксы — являются дополнительными фрагментами, которые добавляются к css коду для совместимости со специфичными браузерами. В данном случае идет речь о совместимости с браузерами, использующие движок WebKit.

Стилизовать я буду заголовок h1. Для этого в html добавим не хитрую разметку:

<h1>Hello World</h1>

Для начала добавим с помощью css градиентный цвет тексту:

h1 {

  background: linear-gradient(to right, #FF5656, #161FF3);

  background-clip: text;

  -webkit-background-clip: text;

  color: transparent;

}

В результате получим заголовок, окрашенный в градиентные цвета.

Разберем css код подробнее:

1. С помощью уже знакомой css функции linear-gradient прописываем значение градиента свойству background, что окрасит фон теста.
2. Свойство background-clip: text; обрежет фон текстового блока так, что он не будет выступать за границы текста.
3. -webkit-background-clip: text; — здесь является вендорным префиксом для свойства background-clip. В данном случае применяется для кроссбраузерности — совместимости с WebKit-браузерами, такими как Safari и Chrome.
4. color: transparent; — сделает текст прозрачным.

 Теперь добавим тексту обводку. Для этого достаточно будет использовать всего одно свойство.

h1 {

  -webkit-text-stroke: 1px rgb(255, 255, 255);

}

Это универсальное свойство, в котором перечисляются свойства толщины и цвета обводки. В результате получаем результат в браузере.

Несмотря на то, что свойство webkit-text-stroke может заставить сомневаться в кроссбраузерности такого решения боятся применять его не стоит. Во всяком случае поддержка данного свойства на сегодняшний день составляет более 96%.

И раз уж пошла речь про текстовые эффекты с помощью css, то стоит упомянуть про тень для текста. Дело в том, что наиболее часто используемое свойство box-shadow применит тень к текстовому блоку, но не к самому тексту.

Для корректного отображения используем свойство text-shadow и тогда все задуманное получится.

.text-with-shadow {

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}

И на этом все.