Как сделать обводку текста в 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

Текст и тень

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow , мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Использование text-shadow

В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).

Рис. 1. Параметры text-shadow

Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.

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

К сожалению, IE до версии 10.0 не поддерживает text-shadow , так что в этом браузере мы никаких красивостей не увидим.

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

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

Рис. 2. Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

     .stroke  
 

Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).

Пример 2. Четыре тени для контура

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

     .stroke  
 

Вид такого контура показан на рис. 3. Заметно, что контур получается более выразительным.

Рис. 3. Контур с помощью четырёх теней

Трёхмерный текст

Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.

Рис. 4. Трёхмерный текст

Лично мне подобный текст напоминает надписи в стиле ретро и опять же лучше всего он подходит для заголовков, а не для основного текста веб-страницы.

Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.

Пример 3. Тень для добавления трёхмерности

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

     .stroke  
 

Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.

Тиснение текста

Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 5).

Рис. 5. Рельефный текст

Для добавления подобного эффекта нам понадобится две тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).

Пример 4. Рельефный текст

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта. Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.

 text-shadow: #333 -1px -1px 0, #fff 1px 1px 0;

Свечение

Свечение вокруг текста — это та же самая тень, только она яркая и контрастная. Таким образом, для создания эффекта свечения достаточно изменить цвет тени и поставить желаемый радиус размытия. Поскольку свечение вокруг текста должно быть равномерным, то смещение тени надо задать нулевым. На рис. 6 показан пример свечения разных цветов.

Рис. 6. Свечение текста

Пример 5. Свечение

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Размытие

Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы (рис. 7), причём степень размытия легко регулировать через параметр text-shadow .

Рис. 7. Текст с размытием

Для сокрытия оригинального текста достаточно задать цвет как transparent (пример 6). Цвет тени после этого выступает цветом текста, а радиус размытия устанавливает степень нерезкости букв.

Пример 6. Размытие текста

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Тень и псевдоклассы

Тень не обязательно добавлять непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами :hover и :first-letter . За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на неё курсора мыши. В примере 7 показаны такие приёмы.

Пример 7. Использование псевдоклассов

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

       
Нишевый проект тормозит традиционный канал, не считаясь с затратами. Структура рынка, отбрасывая подробности, стабилизирует департамент маркетинга и продаж, используя опыт предыдущих кампаний. Построение бренда, безусловно, спонтанно отталкивает конвергентный PR, отвоевывая рыночный сегмент. Инвестиция синхронизирует ролевой социальный статус, повышая конкуренцию. Торговая марка естественно обуславливает план размещения, используя опыт предыдущих кампаний.





  

Обводка текста на чистом С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 золотых знака 111 111 серебряных знаков 372 372 бронзовых знака
Хороший вариант, спасибо!
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.10.27.43697

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

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

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

 div 
Щ

Примеры

Контуры букв

  
Текст

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

  
Текст

Окантовка

  Текст

Красивый

  Красивый

345-45-45

  
Текст

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