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

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

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

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

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

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

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

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

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

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

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

outline

Что-то вроде border на стероидах. Не влияет на размеры элемента, можно отодвинуть от границ на любое расстояние.

Присутствует в стандартных стилях браузера для акцента на сфокусированных интерактивных элементах. Типа размеры не меняются, вёрстка страницы не ломается, но пользователь наглядно видит, какой элемент в фокусе. Ситуация win-win!

Естественно, можно задавать это свойство любому элементу и без всяких фокусов ��

Пример

Скопировать ссылку «Пример» Скопировано

Добавим элементу обводку, которая будет отодвинута от края на 10 пикселей. Для этого мы используем дополнительное свойство outline — offset . Оно идёт рука об руку с outline .

Зададим обводку шириной 5 пикселей зелёного цвета. Отодвинем её от края элемента на 10 пикселей. Рамку зададим для наглядности.

 .block  border: 1px solid black; outline: 5px solid green; outline-offset: 10px;> .block  border: 1px solid black; outline: 5px solid green; outline-offset: 10px; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

outline на самом деле шорткат — короткое свойство для записи сразу нескольких значений. Внутри себя оно содержит свойства outline — width , outline — style и outline — color .

Разберём доступные значения для каждого из свойств, а потом соберём всё в одну коробку:

outline — width

Скопировать ссылку «outline-width» Скопировано

• Ключевые слова thin , medium , thick — задают тонкую, среднюю или толстую ширину. Значения в пикселях на усмотрение браузера, но обычно соответствует 1, 3 и 6 пикселям соответственно.
• Конкретный размер — размер в любых единицах измерения, доступных в вебе. Например, 10px или 0 . 2em .

outline — style

Скопировать ссылку «outline-style» Скопировано

• none — обводка не отображается, даже если задано значение для outline — width .
• dotted — обводка будет состоять из точек. Круглых точек, вроде такого •••••
• dashed — обводка будет в виде пунктирной линии.
• solid — значение по умолчанию, если не задано иное. Сплошная линия.
• double — двойная сплошная линия.

Дальше создателей спецификации понесло в творчество и они придумали несколько фигурных обводок. Освещение таких рамок идёт сверху под прямым углом. И на это никак не повлиять:

• groove — обводка будет отображаться так, будто рамка объёмная, с вдавленной серединой и подсвечена. Цвет обводки (если он отличен от чёрного) станет двухцветным.
• ridge — обводка отобразится объёмной, её центр будет приподнят. Противоположно groove .
• inset — объёмная рамка, края направлены внутрь элемента.
• outset — объёмная рамка, края направлены наружу элемента, противоположно inset .

Проще всего понять на примерах:

outline — color

Скопировать ссылку «outline-color» Скопировано

• любое доступное значение цвета в вебе, включая ключевые слова transparent , current Color .
• invert — ключевое слово, устанавливающее противоположный цвету фона элемента цвет обводки. Удобно для достижения максимальной контрастности.

Собираем все значения в шорткат.

Указано одно обязательное значение для outline — style :

 .selector  outline: solid;> .selector  outline: solid; >    Скопировать Скопировано Не удалось скопировать   

outline — color | outline — style :

 .selector  outline: #f66 dashed;> .selector  outline: #f66 dashed; >    Скопировать Скопировано Не удалось скопировать   

outline — style | outline — width :

 .selector  outline: inset thick;> .selector  outline: inset thick; >    Скопировать Скопировано Не удалось скопировать   

outline — color | outline — style | outline — width :

 .selector  outline: green solid 3px;> .selector  outline: green solid 3px; >    Скопировать Скопировано Не удалось скопировать   

Как можно понять из примера выше, для свойства outline можно задать только одно значение, указывающее на стиль обводки. Без него обводка не будет отображаться. Если задано только одно значение, то цвет будет совпадать с цветом текста (подражание ключевому слову current Color ), а размер будет соответствовать ключевому слову medium (что, в свою очередь, равно 3 пикселям).

Заодно посмотрим на доступные значения для outline — offset :

• Может принимать в качестве значения любое указание размера в любых единицах измерения. Можно задать отрицательное значение и тогда обводка будет сдвинута внутрь. Тогда стоит учитывать ширину самой обводки, поскольку свойство outline — offset указывает расстояние от края элемента до внутреннего края обводки.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� В отличие от border обводка всегда квадратная (прямоугольная), её углы нельзя скруглить. На сентябрь 2021 года обводка подстраивается под форму обводимого элемента! �� Во всех актуальных версиях браузеров, кроме Safari ��

�� Обводка без зазрения совести накладывается на рядом стоящие элементы, не замечая их.

�� Если задать обводку для многострочного текста, то каждая строка будет обведена своим прямоугольником. Лучше уж задать обводку для родителя.

На практике

Скопировать ссылку «На практике» Скопировано

Егор Левченко советует

Скопировать ссылку «Егор Левченко советует» Скопировано

��️ Если ваш дизайнер просит сбросить обводку у элементов в фокусе, не пользуйтесь outline : none , даже если это кажется самым простым способом.

Воспользуйтесь свойством outline — color со значением transparent .

Обводка в фокусе пропадёт, если пользователь не включил режим высокой контрастности. В контрастном режиме обводка будет на месте, а вот цвета и красивые дизайнерские тени — нет.

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Если вам не нравится обводка у элементов при фокусе, то не сбрасывайте её совсем, а попросите дизайнера или придумайте более уместный для вашего сайта стиль.

�� При помощи сочетания border и outline можно создать множественную рамку вокруг элемента.