Как сделать текст с обводкой границ в 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
 

Отслеживать
ответ дан 22 июл 2022 в 17:42
Neverm1ndo Neverm1ndo
1,687 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 серебряных знаков 65 65 бронзовых знаков
Почему-то думал, что у него плохая поддержка. Удивили)
23 июл 2022 в 8:14
Я придумал, как его применить без повтора текста в разметке.
23 июл 2022 в 12:27

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

body < background: black; >h1

About us

Отслеживать
ответ дан 22 июл 2022 в 17:55
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
Даа, точно что я хотел, благодарю
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
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков

• html
• css
• css3

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

Связанные

Похожие

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

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

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

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

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

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

Приветствую вас, дорогие посетители сайта Impuls-Web!

Сегодня я хотела бы продолжить тему форматирования и показать, как можно сделать обводку текста CSS.

Навигация по статье:

• Обводка теста css-свойством text-shadow
• Онлайн-генератор теней

Обводка теста css-свойством text-shadow

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

По заданию параметров, данное свойство очень похоже на box-shadow и имеет следующий вид:

text-shadow:

Эксперимент с тенью

#content .teni p < font-size : 25px ; color : #fff !important ; text-shadow : 1px 1px 1px #000 ;

Эксперимент с тенью

Так же, как и в случае с тенью для блока, если нам нужна обводка текста css по контуру, то нам нужно задать тень четыре раза.

Вот как это будет выглядеть:

Обводка текста в CSS

#content .obvod p< font - size : 30px ; color : #E2A126!important; text - shadow : 1px 0 1px #000, 0 1px 1px #000, - 1px 0 1px #000, 0 - 1px 1px #000;

Обводка текста в CSS

В принципе, ни чего сложного. Если понять закономерность и немного поэкспериментировать, то у вас обязательно получиться добиться нужного вам результата.

По заданию цветов на сайте у меня есть отдельные статьи, которые так же могут быть для вас полезными:
Изменение цвета шрифта в CSS. Коды цветов HTML и CSS
Как определить цвет на сайте

Онлайн-генератор теней

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

Здесь все просто:

1. 1. Переходите на страницу сервиса
2. 2. Рабочая область поделена на две части. В левой части вам нужно задать параметры для текста, а в правой вы можете посмотреть, что в результате получится.

Если вы не знаете как определить класс или идентификатор элемента на странице, то вам будет полезна эта статья с видеоинструкцией:
Как определить ID и класс элемента на странице?

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

Хорошего вам дня! И до скорых встреч!

С уважением Юлия Гусарь

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

От автора: CSS3 развивается таким образом, что мы можем перевести в код CSS почти все, что создается в Photoshop’е. Тем не менее, до сих пор нам не удавалась обводка текста (text-stroke). Можно было добавлять к тексту тени, но до настоящего момента не существовало жизнеспособного решения проблемы обводки. Сейчас в webkit появился ответ на этот вопрос, представляющий обводку текста с помощью одного лишь CSS.

Браузерная поддержка

Это свойство пока экспериментальное и не является безопасным для всех браузеров, но можно установить некие свойства по умолчанию, которые станут срабатывать лишь при применении пользователем неподдерживающего это свойство браузера (имеются в виду Firefox и IE). Важно понимать, что text-stroke – это не прогрессивное улучшение, вам потребуется резервный вариант для неподдерживающих браузеров, и ниже я раскрою вам существующее, к счастью, решение этой проблемы. Кроме того, в настоящее время text-stroke не фигурирует в спецификациях W3C, оно было наскоро включено под названием text-outline, но вскоре удалено и до сих пор заново не добавлено.

Свойство

Это – на самом деле очень простое в применении свойство, немного похожее на свойство border, да и пишется почти так же. Для назначения обводки текста потребуются лишь text-stroke-color и text-stroke-width с нужными вам значениями: например, если для всех тэгов-ссылок требуется черная обводка шириной в 2 пикселя, то вы напишете:

Заливка и обводка

Есть несколько способов раскрасить фигуры SVG (в т.ч. с указанием атрибутов объекта), используя инлайн-CSS, встроенную CSS-секцию, или внешний файл CSS. Большая часть SVG, которую вы встретите в интернете, использует встроенный CSS, однако преимущества и недостатки есть у каждого типа.

Атрибуты заливки и обводки (Fill and Stroke Attributes)

Раскраска (Painting)

Основная раскраска может быть сделана установкой двух свойств на ноде — fill и stroke. Fill — устанавливает цвет внутри объекта, а stroke задаёт цвет линии, которая рисуется вокруг объекта. Вы можете использовать CSS-наименования цветов, что и в HTML — названия цветов (например, red), rgb-значения, hex-значения, rgba-значения и т.д.

rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/> 

Кроме того, вы можете задать прозрачность заливке и обводке по отдельности в SVG. Их прозрачность управляется атрибутами fill-opacity, stroke-opacity.

Примечание: Замечание: в Firefox 3+ допустимы rgba-значения и это даёт такой же эффект прозрачности, но для совместимости с другими просмотрщиками часто лучше определить прозрачность обводки/заливки отдельно. Если вы укажете и rgba-значение и значение fill-opacity/stroke-opacity — будут применены оба.

Обводка (Stroke)

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

svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> svg> 

Свойство stroke-width определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображён розовым, а обводка — черным.

Второй атрибут, влияющий на обводку — свойство stroke-linecap. Демонстрируется выше. Свойство управляет отображением концов линий.

Есть три возможных значения для stroke-linecap:

• butt обрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.
• square в основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка — это половина заданного значения stroke-width.
• round задаёт закруглённые углы по краям обводки. Радиус этих кривых также управляется параметром stroke-width.

Используйте stroke-linejoin , чтобы определить, как соединять обводку двух сегментов линии.

svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/> polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> svg> 

Каждая из этих полилиний имеет два сегмента. Соединение, где они встречаются, управляется атрибутом stroke-linejoin . Есть три возможных значения для этого атрибута:

• miter продолжает линию обводки дальше её обычной ширины, чтобы создать единственный квадратный угол.
• round создаёт закруглённый сегмент линии
• bevel создаёт новый угол для помощи в переходе между двумя сегментами

Наконец, вы можете использовать пунктирные линии в обводке, определив атрибут stroke-dasharray .

svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> svg> 

В качестве аргумента атрибут stroke-dasharray принимает последовательность чисел, разделённых запятой.

Примечание: Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).

Первое число определяет длину штриха, второе — длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берёт эти числа дважды, чтобы создать чётный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми «пикселями». Затем паттерн повторяется.

Также есть дополнительные stroke и fill свойства: fill-rule , которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя; stroke-miterlimit , which determines if a stroke should draw miters и stroke-dashoffset , который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)

Использование CSS (Using CSS)

В дополнение к установке атрибутов объектов, вы также можете использовать CSS для стилизации заливки и обводки. Не все атрибуты могут быть установлены через CSS. Но атрибуты взаимодействия с раскраской и заливкой обычно доступны, так что fill , stroke , stroke-dasharray и т.д. могут быть заданы этим способом, также как и градиенты, и паттерны, что показано ниже. Атрибуты вроде width , height или команд для путей SVG не могут быть установлены через CSS. Проще всего просто протестировать и узнать, что доступно, а что нет.

Примечание: Спецификация SVG строго разделяет атрибуты на свойства и другие атрибуты. Первые могут быть изменены через CSS, а вторые — нет.

CSS может использоваться инлайн через атрибут style :

rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> 

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

svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> defs> style type="text/css"> ]]>style> defs> rect x="10" height="180" y="10" width="180" id="MyRect"/> svg> 

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

#MyRect:hover  stroke: black; fill: blue; > 

Также можно определить отдельный файл стилей для ваших CSS-правил через обычный XML-stylesheet синтаксис:

 svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> rect height="10" width="10" id="MyRect"/> svg> 

где style.css выглядит примерно так

#MyRect  fill: red; stroke: black; > 

• « Предыдущая статья
• Следующая статья »

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 6 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.