Как добавить обводку текста в 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 сверстать такой текст? Чтобы была обводка и свечение, как на картинке.

Отслеживать
12.9k 10 10 золотых знаков 40 40 серебряных знаков 77 77 бронзовых знаков
задан 2 дек 2022 в 9:56
FrontEnder007 FrontEnder007
175 8 8 бронзовых знаков

можно сделать обводку text-shadow: 3px 0 #a54cd9, -2px 0 #a54cd9, 0 2px #a54cd9, 0 -2px #a54cd9, 1px 1px #a54cd9, -1px -1px #a54cd9, 0px -1px #a54cd9, -1px 1px #a54cd9; а со свечением не уверена, попробовать делать абсолютно позиционированный текст с черным колором и делать ему обводку прозрачную сиреневую, больше ничего не приходит в голову. Либо старым добрым способом свг или пнг

2 дек 2022 в 10:40

2 ответа 2

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

Есть более простой и удобный способ сделать это используя возможности webkit, предлагаю такое решение:

body < background: rgb(19, 18, 24); >.glowing-text

БОНУС 
100 FS 150%

Объяснение

Сначала сделаем саму обводку текста, цвет обводки берётся из переменной —color которая указывается в inline-стилях (Стили указанные в HTML, в атрибуте style ). Далее делаем сам эффект свечения, он делается благодаря свойству text-shadow в котором мы просто делаем тень размытой, цвет также взят с той же переменной. После чего мы делаем цвет текста прозрачным чтобы можно было увидеть фон сзади текста. После всё по вкусу, но если требуется объяснение, то вот: сделал текст более гладким с помощью шрифтов Arial и Segoe UI и сам текст большим (65 пикселей).

Отслеживать
ответ дан 4 дек 2022 в 17:28
3,349 2 2 золотых знака 9 9 серебряных знаков 28 28 бронзовых знаков
Я уже нашел такое же решение ранее 🙂 Спасибо, это то, что нужно.
6 дек 2022 в 6:07
@FrontEnder007 всё возможно, я его и до этого писал для codepen :p
6 дек 2022 в 6:07

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap'); body < background-color: #1c2555; >.text-light < vertical-align: top; display: inline-block; font-size: 80px; font-family: 'Roboto', sans-serif; font-weight: 700; white-space: nowrap; color: rgba(28, 37, 85); --os: 2px; /* outline size */ --osc: #fff; /* outline color */ --osb: 20px; /* outline shadow blur */ --osbc: rgba(255,255,255,.75); /* outline shadow blur color */ text-shadow: calc(var(--os) * 1.306562965) calc(var(--os) * .541196101) 0 var(--osc), calc(var(--os) * 1.414213562) 0 0 var(--osc), calc(var(--os) * 1.306562965) calc(var(--os) * -.541196101) 0 var(--osc), calc(var(--os) * 1) calc(var(--os) * -1) 0 var(--osc), calc(var(--os) * .541196101) calc(var(--os) * -1.306562965) 0 var(--osc), 0 calc(var(--os) * -1.414213562) 0 var(--osc), calc(var(--os) * -.541196101) calc(var(--os) * -1.306562965) 0 var(--osc), calc(var(--os) * -1) calc(var(--os) * -1) 0 var(--osc), calc(var(--os) * -1.306562965) calc(var(--os) * -.541196101) 0 var(--osc), calc(var(--os) * -1.414213562) 0 0 var(--osc), calc(var(--os) * -1.306562965) calc(var(--os) * .541196101) 0 var(--osc), calc(var(--os) * -1) calc(var(--os) * 1) 0 var(--osc), calc(var(--os) * -.541196101) calc(var(--os) * 1.306562965) 0 var(--osc), 0 calc(var(--os) * 1.414213562) 0 var(--osc), calc(var(--os) * .541196101) calc(var(--os) * 1.306562965) 0 var(--osc), calc(var(--os) * 1) calc(var(--os) * 1) 0 var(--osc), 0 0 var(--osb) var(--osbc); >.text-lignt--color-1 < --osc: #20bde0; --osbc: rgba(32,189,224, .75); margin-right: 1ch; >.text-lignt--color-2

БОНУС
100 FS
 
150%

Но лучше такое сделать на SVG, предварительно конвертировать текст в кривые.

По просьбе комментатора делаю описание кода)

Основная масса кода — text-shadow , много параметров, т.к. они создают обводку вокруг текста, несмотря на то, что есть как -webkit-text-stroke , но оно полностью не поддерживается IE, если требуется его поддержка, то придётся костылить засчёт text-shadow .

Первая строчка text-shadow просто белая подложка, чтобы прозрачный цвет не сливался с обводной.
Со второй до предпоследней — специально высчитанный мной код, чтобы сделать обводку более плотной, там каждый цвет располагается на определённый угол, кол-во строк == кол-ву сегментов (для примера скрин — где текст имеет обводку из 4х теней (4х сегментов), 12 и 40. Но в данном коде выше, используется 16 сегментов и этот параметр не изменяется. Код генерировался тут (Миксин outline text для Stylus)).
Последняя строчка отвечает уже за свечение текста.

CSS переменные используются для удобной «кастомизации» всех значений:
—os — размер «обводки»
—osc — цвет обводки
—osb — размер размытия свечения
—osbc — цвет свечения

Каждый параметр может быть общим для всех и\или изменятся для конкретного элемента.

Обводка текста на чистом СSS

Хочу сделать обводку текста как на макете, но никак не выходит.
Вот как должно быть: Что получилось у меня:

.box-design

Отслеживать
7,291 5 5 золотых знаков 27 27 серебряных знаков 69 69 бронзовых знаков
задан 26 окт 2020 в 10:00
Purple Pig Purple Pig
153 14 14 бронзовых знаков
а где картинка?
26 окт 2020 в 10:02

3 ответа 3

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

Для разнообразия можно рассмотреть использование SVG

Добавляем буквально одну строчку и можно сделать анимацию обводки

+SVG Filter

Для обводки используются SVG фильтры: feColorMatrix и feMorphology

Тот же вариант + анимация строки

Отслеживать
ответ дан 26 окт 2020 в 12:30
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
Хороший вариант, спасибо!
26 окт 2020 в 12:59
@VadimChorniy сейчас ещё добавлю с SVG filter
26 окт 2020 в 13:00

@VadimChorniy Хотите добавлю ещё ответ с интересными вариантами анимаций уже самих .букв. Мне кажется, что текстовый эффекты, если они конечно, «не вырви глаз», могут оживить веб страничку

26 окт 2020 в 13:27
Очень хочу! Заранее спасибо
27 окт 2020 в 6:16

@VadimChorniy это будет дополнительный ответ, так как совершенно другие эффекты, не обводка, а сами буквы.

27 окт 2020 в 6:34

.box-design < text-shadow: -1px 0 0 red, /* Тень влево */ 0 -1px 0 red, /* Тень вверх */ 1px 0 0 red, /* Тень вправо */ 0 1px 0 red; /* Тень вниз */ font-size: 150px; color: #fff; margin: 0; >

Отслеживать
ответ дан 26 окт 2020 в 11:16
Nikita Galadiy Nikita Galadiy
1,460 1 1 золотой знак 8 8 серебряных знаков 24 24 бронзовых знака
Спасибо, ваш вариант помог!)
26 окт 2020 в 12:59

Можно использовать text-shadow , как в соседнем ответе, но тогда не будет прозрачности у самих букв. Поэтому, всё таки -webkit-text-stroke :

body < background: radial-gradient(#d808, #000f) no-repeat; >.box-design

Отслеживать
7,291 5 5 золотых знаков 27 27 серебряных знаков 69 69 бронзовых знаков
ответ дан 26 окт 2020 в 11:38
33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак
по поводу className.. проект на Реакте, забыл изменить тут.
26 окт 2020 в 12:36

• html
• css
• вёрстка
• svg
• svg-animation

Важное на Мете

Похожие

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

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

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

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

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

Для создания обводки текста в CSS, вы можете использовать свойство text-stroke .

Пример текста с обводкой

В этом примере текст белого цвета с обводкой в 1 пиксель черного цвета. Обратите внимание, что свойство -webkit-text-stroke используется для браузеров, основанных на WebKit (например, Safari), в то время как свойство text-stroke используется для остальных браузеров. Также обратите внимание, что не все браузеры поддерживают это свойство.

Кроме свойства text-stroke , существуют и другие способы создания обводки текста в CSS, например, с помощью свойства text-shadow .

Пример текста с обводкой тенью

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

Также можно использовать комбинацию свойств “text-stroke” и “text-shadow” для создания более сложной обводки текста.

Пример текста с двойной обводкой