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

Обводка текста при помощи HTML и CSS

Stroke in HTML

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

Когда дошло дело до верстки того самого элемента, текст в котором нужно было обвести, выяснилось, что text-stroke доступен только в webkit’ах, а это всего-лишь 20-30% браузеров.
Решение проблемы было придуманно довольно быстро: использовать множественную тень.

Если вам стало интересно то добро пожаловать под кат.

Для множественной тени (так-же применимо в современных браузерах и к background) следует описать все тени (я их использовал 4) через запятую, следующим образом:
body text-shadow: #000 1px 0 0px, #000 0 1px 0px, #000 -1px 0 0px, #000 0 -1px 0px;
>
в результате получаем правую, нижнюю, левую и верхнюю тени
text-shadow имеет следующий синтакс: #цвет сдвиг_по_х сдвиг_по_у размер_размытости; являеться CSS2.1 свойством.

4 shadows

Для большей наглядности используем сдвиг по больше и раскрасим тень в разные цвета:
body color: #000;
text-shadow: text-shadow: #f00 40px 0px 0px, #0f0 0px 20px 0px, #00f 0px -20px 0px, #f0f -40px 0px 0px;
>
Получим следующий результат:

Также можно поиграться с размером шрифта, сдвигом, размытием для получения желаемого результата. К примеру для получения изображения в начале поста использовался следующий вариант:
body font: 40px Tahoma;
color: #e7e7e7;
text-shadow: #000 2px 0px 2px, #000 0px 2px 2px, #000 0px -2px 2px, #000 -2px 0px 2px;>

Надеюсь эта информацию будет кому-то полезной.
Файл с примерами

Обводка текста 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 . Раньше, если бы мы хотели сделать это, пришлось бы полагаться на изображения, хитрости с тенями, использование специального контурного шрифта. Теперь нам не нужно все это делать!

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

Текст и тень

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

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

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

Параметры text-shadow

Рис. 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, отвоевывая рыночный сегмент. Инвестиция синхронизирует ролевой социальный статус, повышая конкуренцию. Торговая марка естественно обуславливает план размещения, используя опыт предыдущих кампаний.

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

CSS-стили – важная часть каждого сайта. Благодаря стилям портал становится узнаваемым и дружелюбнее к посетителям. Цветовая гамма, расположение блоков сайта, красивый дизайн объектов – все это возможности CSS. До недавнего времени обводка текста в CSS оставалась только мечтой. Но с приходом CSS3 мечта стала реальностью.

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

Обводка текста – это элегантный контур вокруг слова и как их использовать»>слов или части текста. Здесь могут быть тени вокруг букв, контуры, окантовки и много другое. До выхода CSS3 и параметров webkit такой дизайн текста можно было увидеть только в текстовых и графических редакторах или Adobe Photoshop и Adobe Illustrator. Теперь же это возможно и в сайтостроении.

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

Обводка текста в CSS пока на экспериментальной стадии и безопасен не для всех браузеров. Пока свойство плохо поддерживается Firefox и IE. При этом хорошо работает в браузерах Google Chrome 1.0 и выше, а также Safari 3.0 и выше. Также стоит отметить такие моменты использования этого свойства:

Чтобы сделать обводку кроссбраузерно, требуется делать толщину линии в 1px;
Для ряда отдельных браузеров обводку возможно сделать только через Javascript.

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

Свойства

Стоит отметить что атрибут -webkit-text-stroke возможно применить ко всем элементам на странице, будь то ссылки a, блоки div или span, параграфы p или заголовки h1-h6. При этом свойство нельзя наследовать и невозможно применить значение по умолчанию.

Для работы используются следующие свойства данного параметра:

text-stroke-color;
text-stroke-width;
text-fill-color.

Примеры их использования описаны ниже.

Применение параметра в верстке

Применение обводки в css не сложное. Достаточно использовать одного из параметров: text-stroke-color и text-stroke-width. К примеру, требуется сделать обводку заголовка и подзаголовков текста для выделения среди остального текста. На практике это выглядит следующим образом:

h1 -webkit-text-stroke-color: #000; 
-webkit-text-stroke-width: 2px; 
>

h2 -webkit-text-stroke-color: #FF0000; 
-webkit-text-stroke-width: 1px; 
>

Но этот же код возможно написать и компактнее:

h1 -webkit-text-stroke: 2px #000; 
>

h2 -webkit-text-stroke: 1px #FF0000; 
>

В то же время если требуется сделать прозрачный текст с обводкой черного цвета, то код будет уже чуть сложнее чтобы одинаково отобразить свойство в браузерах. К примеру, фон сайта белый и хотите сделать прозрачность букв тех же заголовков. Для начала используем свойство color для задания общего цвета заголовков. Затем применяем свойство text-fill-color для задания «прозрачности» тексту. Если так не сделать, то текст заголовков будет сливаться с фоном на неподдерживаемых это свойство браузерах. Если перевести все в код, то это будет выглядеть следующим образом:

h1 color: #000; 
-webkit-text-stroke: 2px #000; 
-webkit-text-fill-color: #fff; 
>

С помощью этого свойства и фантазии возможно сделать много чего. К примеру, вот так возможно сделать симпатичную красную окантовку черного текста:

h1 position: relative; 
color: #000; 
-webkit-text-stroke: 2px #000; 
>

h1::before content: attr(data-text); 
position: absolute; 
left: 0; 
right: 0; 
-webkit-text-stroke: 8px #FF0000; /* задаем значение размера внешней обводки и цвета */ 
>

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

Далее требуется вывести красную окантовку перед текстом. Чтобы это сделать будем использовать псевдоатрибут before. Во-первых, указываем что обводка текста должна повторять тот же текст, что и в теге h1. Затем выводим обводку в той же позиции и с теми же размерами что и заголовок h1. Далее убираем отступы слева и справа чтобы обводка не сместилась в стороны. И напоследок задаем значение размера внешней обводки в 8 пикселей и красного цвета.

Заключения

Исходя из выше указанного делаем следующий вывод. CSS стилизация развивается и скоро через стили возможно будет сделать практически все, что возможно сделать в Photoshop. И атрибут text-stroke тому доказательство.

Свойство text-stroke в некотором роде похоже на свойство border. На момент написания статьи оно не включено ни в одну из спецификаций W3C или WHATWG. Атрибут пока возможно использовать только в некоторых браузерах семейства webkit, но вместе с тем свойство даёт неведомые до теперь возможности обводки текста. Конечно, ещё не всё так гладко как хотелось бы и text-stroke только экспериментальное нововведение в CSS3, но мир сайтостроительства стремительно развивается и вместе с ним развивается дизайн. Возможно будущие версии таких браузеров как Mozilla Firefox, IE и Opera также будут использовать это свойство, но с использованием собственной приставки вместо -webkit.