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

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

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

 div 
Щ

Примеры

Контуры букв

  

Текст

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

  

Текст

Окантовка

  Текст

Красивый

  Красивый

345-45-45

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

Обводка текста CSS: создание эффекта контурного текста

Обводка текста CSS основана на свойстве -webkit-text-stroke , которое принимает в качестве значений ширину и цвет:

.outline

Значение width указывает, какой толщины будет контур. Значение color определяет цвет контура. Все довольно просто. Пример применения этого свойства:

.outline

Следует отметить, что у свойства text-stroke есть префикс webkit . Это может показаться странным, но это единственная версия, поддерживаемая всеми браузерами. Даже браузеры, не использующие webkit , такие как Firefox и Edge , поддерживают это свойство.

Обновлено: 2022-05-19 14:46:40 МЛ Мария Логутенко автор материала

Размещаем все вместе

Мы рассмотрели свойство -webkit-text-stroke и его использование. Теперь проиллюстрируем все это.

Перед тем, как сделать обводку текста CSS , создайте новый документ HTML и добавьте в него следующую разметку:

    Text Outline body < background-color: #0F1020; padding: 100px; >#textContainer p  

Did you know that your fingerprint is unique? Of course you did!

Сохраните веб-страницу, а затем откройте ее в браузере. Вы должны увидеть примерно следующее:

Размещаем все вместе

Взгляните на разметку, отвечающую за CSS обводку текста белым цветом, который мы видим:

 

Did you know that your fingerprint is unique? Of course you did!

Мы хотим разместить текст внутри элемента span и отобразить его с эффекта контура, о котором говорили ранее. Обводка должна быть шириной 1 пиксель и иметь зеленовато-лимонный цвет. Для этого добавьте следующий код в нижнюю часть блока style ( ниже существующих правил стиля ):

#textContainer .outline

После этого сохраните веб-страницу и откройте ( обновите ) ее в браузере. Вы должны увидеть появившийся контур:

Размещаем все вместе - 2

Если хотите отобразить только контур текста, все, что нужно сделать, это присвоить CSS свойству color значение transparent :

#textContainer .outline

После этого текст « Of course you did! » будет отображен только с помощью контура!

Работа со старыми браузерами

Свойство text-stroke поддерживается браузерами хорошо . Но, возможно, вы захотите отобразить альтернативный вариант для тех пользователей, которые используют старые версии браузеров. В этих случаях нужно « закрасить » текст сплошным цветом. Это можно сделать, комбинируя свойства color и -webkit-fill-color :

#textContainer .outline

В этом случае текст будет отображаться сплошным цветом для старых свойств ( с помощью свойства color ). Если поддерживаются свойства -webkit-text , то webkit-text-fill-color переопределит свойство цвета и отобразит контур с прозрачным цветом заливки.

Заключение

Свойство -webkit-text-stroke упрощает создание обводки текста CSS . Раньше, если бы мы хотели сделать это, пришлось бы полагаться на изображения, хитрости с тенями, использование специального контурного шрифта. Теперь нам не нужно все это делать!

МЛ Мария Логутенко автор-переводчик статьи «

CSS Magic #3. Обводка для текста (text-stroke effect)

Привет! Обводка для текста делается довольно легко, однако прежде чем начнем — стоит понимать, что данный метод не сработает в IE. Если Вам не особо нужен IE — либо игнорим проблему, либо выкручиваемся (я покажу как это можно сделать). Поехали!

HTML

div class="no-ie">Text with stroke.div>
div class="ie">Text with stroke.div>

Самая обыкновенная разметка. Даже и останавливаться на ней неохота, разве что тут два текста, один будет под IE, другой — под все остальное.

CSS

.no-ie  
font-size: 4em;
-webkit-text-stroke: 1px darkgrey;
-webkit-text-fill-color: transparent;
margin-bottom: 2em;
>

.ie
font-size: 4em;
color: #fff;
text-shadow:
-0 -1px 0 #000000,
0 -1px 0 #000000,
-0 1px 0 #000000,
0 1px 0 #000000,
-1px -0 0 #000000,
1px -0 0 #000000,
-1px 0 0 #000000,
1px 0 0 #000000,
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
1px 1px 0 #000000,
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
1px 1px 0 #000000;
>

Используем два -webkit-свойства -webkit-text-stroke и -webkit-text-fill-color для достижения нужного результата. Текст будет прозрачным и будет иметь красивую, нужную нам, обводку. Под IE идем другим путем — придется задать цвет тексту и text-shadow . Конкретно такой код может не сработать, поэтому вот вам генератор тени для текста.

Определять браузер можно любым доступным способом (благо их полно в интернете), но если нужно — я расскажу в отдельной статье как)

И по традиции пен:

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

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

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