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

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

We inspire people to run their businesses with the help of top technologies and innovative management systems

Keep your customer base in one place. Try the fastest way to communicate

  /*Контур для CR07*/ .t153__title 

Доступ на 1 месяц
ко всем видео ( список )
400 р. / мес

• Поддержка
• Советы
• Подсказки

Подписаться на 1 месяц
Доступ на 1 год
ко всем видео ( список )
1800 р. / год

• Поддержка
• Советы
• Подсказки
• Скидка на курсы 10%

Подписаться на 1 год
Бесконечный доступ
ко всем видео ( список )

• Поддержка
• Советы
• Подсказки
• Скидка на курсы 20%

Подписаться без ограничений
Content Oriented Web

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

Обводка текста в zero block

Модификация добавляет обводку тексту, а цвет делает прозрачным. Применить можно к тексту в zero block.

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

1. Укажи тексту в zero block, которому нужно сделать обводку, класс text-stroke. Инструкция по добавлению своего класса элементу.
2. Укажи цвет текста в настройках zero block, он применится к обводке.
3. Укажи в настройках ниже толщину обводки.
4. Скопируй этот код и вставь на свой сайт. Памятка по вставке кода.

Как сделать обводку текста в Adobe Premier Pro?

В инструменте Text должна быть толщина рамки или сама рамка.

Остальные ответы

. если пользуете инструмент Текст, открыжьте Stroke, выберите цвет и толщину обводки.
Если создаете титр (File>New>Legacy title) то там в окне аналогично.

Похожие вопросы

Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.

Как сделать с помощью CSS обводку текста

С появлением стандартов WEB 2.0 и CSS3 возможности веб-технологий значительно увеличились. Сейчас разработчик может создавать любые элементы страницы с помощью каскадных таблиц стилей. Нет необходимости в отдельном моделировании заголовков, кнопок или баннеров в графических редакторах. Работая только с CSS, обводка текста, подчеркивание, эффекты свечения или размытия создаются с помощью одной строчки кода.

Два главных свойства при работе с текстом

Если вы регулярно пользуетесь интернетом, то наверняка замечали, как привлекают внимание цветастые баннеры, надписи, заголовки. Текст – это мощный инструмент, помогающий указать посетителям сайта на рекламу или важную информацию. Научившись грамотно работать со шрифтом, его размером и выделением, можно значительно увеличить конверсию сайта и привлечь новых читателей.

Один из самых простых способов выделить любое слово с помощью CSS – сделать обводку текста. Для этого вам понадобиться запомнить всего два свойства. Первое – это text-stroke, а второе – это text-shadow. Вы можете использовать одно из них, или оба одновременно, создавая потрясающие эффекты.

Использование свойства text-stroke

Text-stroke – это невероятно простой способ декорирования. Он позволяет оформлять заголовки и параграфы не хуже графических редакторов Adobe. Чтобы добавить с помощью CSS обводку текста, нужно указать только два параметра — ширину и цвет. Ширина задается в любых величинах, с которыми вам приятно или удобно работать. Это могут быть пиксели, проценты или rem.

С цветом обводки тоже все очень просто. Вы можете назначить тон, используя стандартные HEX, RGB или добавить альфа-канал и сделать обводку полупрозрачной. Чтобы увидеть свойство в действии, создайте документ в любом текстовом редакторе и пропишите следующую разметку:

       
Мы рады украшать интернет-страницы и не устанем это делать!
  

Сохраните документ в формате html и откройте его с помощью Google или Firefox.

Что может пойти не так

Если вы откроете предыдущий документ в Explorer, то будете очень разочарованы. Этот браузер оставит все ваши усилия без внимания и отобразит обыкновенный текст без намека на обводку. Все потому что свойство пока еще является экспериментальным и не включено консорциумом W3W в официальные стандарты.

Также обратите внимание на вендорные префиксы:

-webkit-text-stroke: 2rem yellow; text-stroke: 2 rem yellow;

Отдельно префиксов Mozilla, Opera и Explorer на 2018 год не существует. Поэтому применять CSS обводку текста желательно крайне осторожно. Не назначайте text-stroke жизненно важным элементам страницы, от которых будет зависеть смысл сайта. Добавляйте декорирование второстепенному контенту и обязательно проводите кросс-браузерное тестирование своих страниц.

Как добавить обводку с помощью text-shadow

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

Свойство принимает четыре значения:

• вертикальное смещение по оси X;
• второе – это Y-координата, отвечающае за смещение по горизонтали;
• третье значение – это величина радиуса размытия и чем он меньше, тем четче становится тень и наоборот;
• последняя величина задает цвет.

В HTML-документе стили записываются следующим образом:

Первые две величины, отвечающие за смещения по осям координат, принимают как положительные, так и отрицательные значения. Например, запись ниже создаст тень серого цвета на шесть пикселей ниже и пять пикселей левее основного текста.

Чтобы добиться полного визуального соответствия обводки текста, CSS-свойству text-shadow можно добавлять несколько значений, создавать не одну тень, а сразу несколько. Так станицы сайта обогатятся элементами с эффектами 3D, свечения или вдавленного текста. Откройте следующий код в браузере, чтобы увидеть все о чем написано на практике:

     body < background: rgba(0, 105, 255, 1); display: flex; justify-content: center; align-items: center; >h1 
TEXT WITH 3D
  

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