Как сделать обводку вокруг текста css
Перейти к содержимому

Как сделать обводку вокруг текста css

  • автор:

Как сделать контурный текст?

Контурный текст выглядит так, будто каждую букву обвели цветной тушью. Обычно такой способ оформления применяется к заголовкам с рубленым шрифтом и крупными буквами (рис 1). Для мелкого текста, как правило, контурные буквы не используются, поскольку снижают читаемость и восприятие текста.

Вид контурного текста

Рис. 1. Вид контурного текста

Ниже рассмотрим три метода создания контурных заголовков:

  • через свойство text-stroke;
  • через свойство text-shadow;
  • с помощью SVG.

Свойство text-stroke

Для создания контурных заголовков применяется два стилевых свойства:

  • text-stroke-width — устанавливает толщину контура ( text-stroke-width: 2px );
  • text-stroke-color — задаёт цвет контура ( text-stroke-color: red ).

Вместо этих двух свойств можно написать и одно универсальное text-stroke. В качестве значения через пробел пишем толщину и цвет контура ( text-stroke: 2px red ).

Эти свойства официально не входят в спецификацию CSS и браузерами поддерживаются только с префиксом -webkit- (даже в Firefox). В примере 1 показана стилизация заголовков с помощью оранжевого контура толщиной в два пикселя.

Пример 1. Использование -webkit-text-stroke

Контурный текст

Функция Вейерштрасса

Обычный текст.

Цвет текста можно менять через привычное нам свойство color. И если это значение, как в примере, установить прозрачным, то будет отображаться только контур.

Данный метод создания контура является наиболее универсальным и поддерживается всеми современными браузерами. При этом следует учитывать, что свойство text-stroke нестандартное и не входит официально в спецификацию CSS.

Свойство text-shadow

text-shadow добавляет к тексту тень, но при определённых значениях свойства такая тень напоминает контур. Используем следующий синтаксис:

text-shadow: 0 0 2px

Толщина в два пикселя подобрана опытным путём; если установить большее значение, то контур станет выглядеть размытым. Но даже в этом случае тень слабо похожа на контур. Для усиления цвета надо повторить одни и те же параметры тени несколько раз через запятую. Четырёх раз вполне достаточно, хотя при желании можно сделать и больше. На рис. 2 показан вид контуров с разным числом теней. Первым сверху идёт текст с одной тенью, для каждого следующего текста количество теней увеличивается на единицу.

Вид контура в зависимости от тени

Рис. 2. Вид контура в зависимости от тени

В примере 2 показано создание контурного заголовка через тень.

Пример 2. Использование text-shadow

Контурный текст

Функция Вейерштрасса

Обычный текст.

Поскольку этот метод лишь имитирует создание контура, цвет текста должен явно совпадать с цветом фона. Тем самым буквы перекрывают часть тени, оставляя только внешний контур, идущий по внешнему краю букв.

Данный метод создаёт фиктивный контур за счёт использования тени вокруг букв, из-за чего такой контур не имеет чётких очертаний и слегка размыт. Чтобы усилить цвета приходится повторять параметры тени несколько раз. Зато свойство text-shadow работает во всех браузерах, включая устаревшие версии.

Использование SVG

SVG предлагает дополнительные возможности для оформления текста по сравнению с CSS. К тому же SVG поддерживают все браузеры, включая устаревший Internet Explorer.

Для создания контурного текста внутрь контейнера вставляем элемент и для него задаём свойство stroke-width , определяющее толщину контура, и свойство stroke , которое устанавливает цвет этого контура (пример 3).

Пример 3. Использование SVG

В браузере Opera текст отображается белым цветом с оранжевым контуром. Чтобы оставить только контур, используем свойство fill со значением none .

Использование SVG для стилизации текстовых заголовков имеет как свои плюсы, так и минусы. В частности, у нас больше возможностей по управлению видом текста, но при этом некоторые вещи из HTML, вроде автоматического переноса текста, для SVG не работают.

См. также

  • text-shadow
  • text-stroke
  • text-stroke-color
  • text-stroke-width
  • Свойства текста в CSS

Обводка буквы

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

 div 
Щ

Примеры

Контуры букв

  

Текст

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

  

Текст

Окантовка

  Текст

Красивый

  Красивый

345-45-45

  
Текст
  • Градиент букв CSS
  • Текст на изображении CSS
  • Контур вокруг текста

Как сделать обводку текста в css

Чтобы сделать обводку текста в CSS, используйте свойство text-stroke . Это свойство задает толщину и цвет обводки для текста.

Вот пример CSS кода для добавления:

.my-text  color: #000000; /* Цвет текста */ -webkit-text-stroke: 1px #FFFFFF; /* Толщина и цвет обводки */ text-stroke: 1px #FFFFFF; /* Толщина и цвет обводки (стандартное свойство) */ > 

В этом примере класс .my-text применяется к элементу с текстом, и свойство -webkit-text-stroke задает толщину обводки в 1 пиксель и цвет белый (#FFFFFF) для браузеров, использующих движок WebKit (например Google Chrome). Свойство text-stroke указывает те же значения для браузеров, которые не используют движок WebKit.

Обратите внимание, что не все браузеры поддерживают свойство text-stroke , поэтому, возможно понадобится использовать префиксы для поддержки разных браузеров.

Проверить поддерживается ли это свойство в выбранном вами браузере можно на сайте canIUse

Как сделать текст с обводкой границ в CSS

Вот как оно должно смотреться

Я хотел сделать обводку уже имеющегося текста на чистом css, но столкнулся с проблемой позиционирования и создания обводки шрифта. Есть ли у вас идеи, как сделать это правильно сделать или популярный метод решения этого вопроса

Отслеживать
задан 22 июл 2022 в 16:45
Jessuit Okkamoto Jessuit Okkamoto
55 1 1 серебряный знак 4 4 бронзовых знака

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Есть как минимум 2 варианта, как сделать такую обводку текста с помощью:

  • -webkit-text-stroke
  • svg text
body < background: black; >h1 < text-transform: uppercase; font-size: 72px; font-family: 'Aerial', sans-serif; position: relative; left: 2rem; color: white; >h1:before

About Us

ABOUT US ABOUT US

Отслеживать
ответ дан 22 июл 2022 в 17:42
Neverm1ndo Neverm1ndo
1,697 1 1 золотой знак 6 6 серебряных знаков 13 13 бронзовых знаков
И третий — text-shadow)
22 июл 2022 в 17:57
Благодарю, очень полезно было это узнать, спасли
22 июл 2022 в 18:02

Для обводки текста -webkit-text-stroke, поддержка > 97%

body < padding: 3rem; background-color: #000; >.heading < position: relative; font-family: sans-serif; >.heading__title < font-size: 8vw; color: #fff; margin: 0; position: relative; z-index: 2; text-transform: uppercase; >.heading__title--stroke
 

About us

About us

Отслеживать
ответ дан 22 июл 2022 в 17:28
27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков
Почему-то думал, что у него плохая поддержка. Удивили)
23 июл 2022 в 8:14
Я придумал, как его применить без повтора текста в разметке.
23 июл 2022 в 12:27

Не совсем оно, но без повтора текста, и на вид похоже:

body < background: black; >h1

About us

Отслеживать
ответ дан 22 июл 2022 в 17:55
123k 24 24 золотых знака 127 127 серебряных знаков 305 305 бронзовых знаков
Даа, точно что я хотел, благодарю
22 июл 2022 в 18:01
Что означает 2px в text-shadow ?
22 июл 2022 в 18:07
@Ростислав, blur. Это просто я его так нестандартно применил.
22 июл 2022 в 18:09
Спасибо, хороший способ.
22 июл 2022 в 18:11

Можно сделать основной текст обведённым, а белый — тенью:

body < background: black; >h1 < text-transform: uppercase; font-size: 3em; letter-spacing: .25ch; font-family: sans-serif; color: white; padding: .5em 1em; >@supports (-webkit-text-stroke: 1px rgba(255, 255, 255, .5)) < h1 < color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .5); text-shadow: 1ch 0 white; >>

About us

Отслеживать
ответ дан 23 июл 2022 в 12:24
123k 24 24 золотых знака 127 127 серебряных знаков 305 305 бронзовых знаков

  • html
  • css
  • css3
    Важное на Мете
Связанные
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

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

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