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

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

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

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

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

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

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

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

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

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

Обводка текста в 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.

Специализация в копирайтинге: возможность или необходимость? — 20.01.2022

Google My Business card — используйте потенциал этой услуги! — 05.09.2021

6 причин использовать краудфандинг — 29.08.2021

Диверсификация каналов интернет-маркетинга — 15.07.2021

Действительно ли органический трафик бесплатный? — 11.07.2021

Комплексные услуги SMM-продвижения — 20.06.2021

Оптимизация и позиционирование фотографий на сайте — 28.11.2021

Узнать ссылку на свой канал в YouTube — 05.05.2020

Как получить трафик из органических результатов? — 24.11.2021

Как сделать сайт — 12.05.2020

Маркетинг и PR: в чем разница? — 30.11.2021

Как снизить показатель отказов? — 03.09.2021

Когда стоит позиционировать не только в Google? — 23.07.2021

Как решить проблему дублирования контента? — 23.11.2021

Создание простого HTML-сайта — 12.06.2020

URL-адрес: недооцененный, но важный элемент SXO сайта — 17.09.2021

Как начать позиционировать интернет-магазин? — 12.07.2021

Популярные методы позиционирования, которые не стоит использовать — 19.07.2021

Как осуществлять поиск по изображениям — 05.07.2021

Как сгладить края в Photoshop после вырезания — 01.05.2020

CSS: Прозрачный текст с обводкой

Свойства меняющие цвет заливки и обводки текста с помощью CSS.

CSS 06.03.2021 2.7 г. Просмотров: 12.6k
Оценить код:

Как сделать обводку или тень в блоке ТЕ100 для Tilda?

Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.

Связаться с нами
Задать вопрос
Купить шаблон

Стоимость 400 руб
Вы получаете данный пример на свой аккаунт в Тильда, сможете редактировать и изменять его под свои задачи
(доступно для аккаунтов Tilda Personal и выше)

Заказать установку примера

Стоимость услуги от 3000 руб
Вы можете заказать интеграцию данного примера, его модификацию под свои задачи, комбинацию для другой модификации или разработку кастомного решения.