Как сделать обводку шрифта в css
Перейти к содержимому

Как сделать обводку шрифта в css

  • автор:

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

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

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

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

Как сделать обводку текста в Zero Block на Tilda?

Модификация добавит обводку для текста в Zero block. Сам текст при этом можно сделать прозрачным или залить другим цветом

Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block

Генератор кода

Класс для текста
Толщина обводки
Оставить только обводку?
Цвет обводки
Войдите в аккаунт чтобы получить доступ к генератору кода
КОПИРОВАТЬ КОД
. ti-outline .tn-atom

  • Инструкция
  • Пример

1. Создаем Zero Block с текстом

2. Назначаем тексту класс ti-outline
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка «Add CSS Class Name» и далее, справа в настройках указываем класс

3. Указываем дополнительные настройки в генераторе:
Толщина обводки — указываем толщину линий обводки;
Цвет обводки — указываем цвет обводки;
Оставить только обводку — при влаченной опций делаем цвет текста прозрачным, оставляя только обводку;

4. Копируем готовый код и вставляем HTML блок T123

Примечание! В генераторе задается только цвет обводки. Если вы не указали в генераторе «сделать текст прозрачным», то сам текст будет цвета который указан в Zero Block

Генератор границы текста CSS text-border онлайн бесплатно.

vkontakte

Код для вставки:
text-shadow:0px 1px 0 rgb(0,0,0),0px -1px 0 rgb(0,0,0),1px 0px 0 rgb(0,0,0),-1px 0px 0 rgb(0,0,0),1px 1px 0 rgb(0,0,0),1px -1px 0 rgb(0,0,0),-1px 1px 0 rgb(0,0,0),-1px -1px 0 rgb(0,0,0);
-webkit-text-shadow:0px 1px 0 rgb(0,0,0),0px -1px 0 rgb(0,0,0),1px 0px 0 rgb(0,0,0),-1px 0px 0 rgb(0,0,0),1px 1px 0 rgb(0,0,0),1px -1px 0 rgb(0,0,0),-1px 1px 0 rgb(0,0,0),-1px -1px 0 rgb(0,0,0);
-moz-text-shadow:0px 1px 0 rgb(0,0,0),0px -1px 0 rgb(0,0,0),1px 0px 0 rgb(0,0,0),-1px 0px 0 rgb(0,0,0),1px 1px 0 rgb(0,0,0),1px -1px 0 rgb(0,0,0),-1px 1px 0 rgb(0,0,0),-1px -1px 0 rgb(0,0,0);
font-size:55px;
font-family:Verdana, Geneva, sans-serif;
>

Данный генератор, создает CSS код, который в последствии необходимо будет применить к нужному вам тексту у которого вы хотите создать границы.

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

Используйте панель «Обводка» ( Окно > Обводка ), чтобы указать, является ли линия сплошной или пунктирной, последовательность штрихов и другие параметры штрихов, если она пунктирная, толщина штрихов, выравнивание штрихов, пределы срезов, наконечники стрелок, профили ширины, а также стили соединения линий и концов линий.

Панель «Обводка»

Можно применить параметры обводки ко всему объекту или использовать группы с быстрой заливкой и применить разные обводки к разным краям объекта.

В этом руководстве сотрудник журнала Layers Magazine Дэйв Кросс (Dave Cross) показывает, как применять заливку и обводку в Illustrator, а также пользоваться удобными комбинациями клавиш для работы с заливкой и обводкой.

Применение цвета, ширины или выравнивания обводки

Выделите объект. (чтобы выделить край в группе с быстрой заливкой, используйте инструмент «Выделение быстрых заливок»).

Нажмите поле «Обводка» на панели «Инструменты», «Цвет» или «Управление». Это действие подразумевает, что будет применена обводка, а не заливка.

Поле «Обводка»

Выберите цвет на панели «Цвет» или образец на панели «Образцы» или «Управление». Либо дважды нажмите поле «Обводка», чтобы выбрать цвет с помощью инструмента «Палитра цветов».

Примечание.

Если необходимо использовать текущий цвет в поле «Обводка», можно просто перетащить этот цвет из поля на объект. Перетаскивание цвета не работает для групп с быстрой заливкой.

Выберите толщину обводки на палитре «Обводка» или панели «Управление».

Если объект представляет собой замкнутый контур (а не группу с быстрой заливкой), выберите параметр на панели «Обводка», чтобы выровнять обводку относительно контура.

  • Обводка по центру линии
  • Обводка внутри линии
  • Обводка снаружи линии

Примечания.

  • В текущей версии Illustrator опция Обводка внутри линии применяется по умолчанию при создании веб-документа. В некоторых более ранних версиях Illustrator по умолчанию используется Обводка по центру линии .
  • Контуры, для которых используются разные варианты выравнивания обводки, могут быть выровнены неточно. Если необходимо добиться точного совпадения краев при выравнивании, убедитесь в том, что настройки выравнивания обводки для контуров совпадают.

Создание обводок с переменной шириной

Инструмент «Ширина» на панели «Инструменты» позволяет создавать обводку с переменной шириной и сохранять переменную ширину в виде профиля для последующего применения к другим обводкам. Теперь можно легко настраивать или расширять обводки с переменной шириной с меньшим количеством опорных точек, поскольку Illustrator применяет упрощенные контуры к обводкам.

При наведении инструмента «Ширина» на обводку, на контуре появляется значок в виде бриллианта и маркеры. С помощью этих элементов пользователь может изменить ширину обводки, а также перемещать, дублировать и удалять точку ширины. При наличии нескольких обводок инструмент «Ширина» применяется только к активной обводке. Если требуется изменить обводку, убедитесь, что она задана «Оформление» на панели как активная.

Чтобы создать или изменить ширину в точке в диалоговом окне «Изменение ширины в данной точке», дважды нажмите обводку инструментом «Ширина» и измените значения для точки. При выборе параметра «Скорректировать ширину в соседних точках» изменения, примененные к выбранной точке ширины, затрагивают и соседние точки.

Чтобы выбрать параметр «Скорректировать ширину в соседних точках» автоматически, дважды нажмите точку ширины, удерживая клавишу Shift. При изменении переменной ширины инструмент «Ширина» различает прерывные и непрерывные точки ширины.

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

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