Как добавить обводку текста в html
Перейти к содержимому

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

  • автор:

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

введите сюда описание изображения

Есть макет Вот html

РАСПРОДАЖА

.double_text h2

Как этому тексту можно сделать обводок белого цвета толщиной в 3 пикселя?

Отслеживать

задан 4 сен 2021 в 14:09

1,701 14 14 серебряных знаков 28 28 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Для браузеров на движке для отображения веб-страниц WebKit подходит такой вариант с использованием ‘-webkit-text-stroke`

body < background: black; >h2 < font-family: 'Playfair Display', serif; font-size: 104px; line-height: 110px; font-weight: 700; background: #503012; background: -webkit-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%); background: -moz-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%); background: linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; >@supports (-webkit-text-stroke: 3px white) < h2 < -webkit-text-stroke: 3px white >>

РАСПРОДАЖА

Возможно вам подойдет вариант с text-shadow для поддержки других браузеров, где свойтсва -webkit не поддерживаются:

body < background: black; >h2

РАСПРОДАЖА

Обводка текста при помощи 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, вы можете использовать свойство text-stroke .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как подготовить интернет-магазин к «черной пятнице»? — 21.11.2021

Блокчейн: что это такое, как он работает и области применения — 09.07.2021

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

Как использовать A/B-тестирование для улучшения сайта? — 20.08.2021

5 способов увеличить конверсию интернет-магазина — 15.09.2021

Создаем описания похожих товаров правильно! — 15.09.2021

Как добавить видео на сайт — 11.06.2020

Как создать название интернет-магазина, которое запомнится покупателям? — 18.09.2021

Хостинг. Платный или бесплатный? — 18.06.2021

Пользовательский опыт в Blockchain — 09.08.2021

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

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