Css обводка шрифта: Как сделать обводку текста в CSS?

Leave a Comment / Css / By /

outline — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется
    1. outline-width
    2. outline-style
    3. outline-color
  4. Подсказки
  5. На практике
    1. Алёна Батицкая советует

Кратко

Скопировано

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

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

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

Пример

Скопировано

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

.block {  /* Чтобы видеть границы элемента */  border: 1px solid black;  /* Сплошная обводка шириной 5 пикселей зелёного цвета */  outline: 5px solid green;  /* От края элемента до края обводки 10 пикселей */  outline-offset: 10px;}
          .block {
  /* Чтобы видеть границы элемента */
  border: 1px solid black;
  /* Сплошная обводка шириной 5 пикселей зелёного цвета */
  outline: 5px solid green;
  /* От края элемента до края обводки 10 пикселей */
  outline-offset: 10px;
}
Открыть демо в новой вкладке

Как пишется

Скопировано

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

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

outline-width

Скопировано

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

outline-style

Скопировано

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

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

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

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

Открыть демо в новой вкладке

outline-color

Скопировано

  • любое доступное значение цвета в вебе, включая ключевые слова transparent
    , currentColor
  • 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 можно задать только одно значение, указывающее на стиль обводки. Без него обводка не будет отображаться. Если задано только одно значение, то цвет будет совпадать с цветом текста (подражание ключевому слову currentColor), а размер будет соответствовать ключевому слову medium (что, в свою очередь, равно 3 пикселям).

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

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

Подсказки

Скопировано

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

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

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

На практике

Скопировано

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

Скопировано

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

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

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

border-width

alt + ←

→

outline-color

alt + →

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

Приветствую вас, дорогие посетители сайта Impuls-Web!

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

Навигация по статье:

Обводка теста css-свойством text-shadow

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

По заданию параметров, данное свойство очень похоже на box-shadow и имеет следующий вид:

Эксперимент с тенью

Так же, как и в случае с тенью для блока, если нам нужна обводка текста css по контуру, то нам нужно задать тень четыре раза.

Вот как это будет выглядеть:

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

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

Онлайн-генератор теней

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

Здесь все просто:

  1. 1. Переходите на страницу сервиса
  2. 2. Рабочая область поделена на две части. В левой части вам нужно задать параметры для текста, а в правой вы можете посмотреть, что в результате получится.

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

Кто-то в комментариях попросил меня рассказать как на пестром фоне сделать более видимым текст. Решила дать урок. Может кому-то пригодится.

Посмотрите ниже пример двух рамок с пестрым фоном и текстом. В верхней рамке текст написан с обводкой и поэтому его легче читать, а в нижней рамке текст написан обычным способом и читается с трудом. О том как сделать обводку мы сегодня и поговорим.

Код будет выглядеть вот так (см. фото А)

Код дан с обводкой черного цвета. Код цвета обводки выделен красной рамочкой. Вместо цифр 000000 вставляете код(6 знаков) нужного вам цвета. Вместо слов «Здесь будет Ваш текст» вставляете свой текст, всё копируете и вставляете в рамочку.

Если надо вставить текст без рамки.
Копируем в окошечке код.

Код будет выглядеть вот так (см. фото Б)

В код добавился параметр размера (синяя рамочка) и цвета (зеленая рамочка) шрифта. Их нужно заменить на свои.

Вот и всё! Удачи!

Существуют различные методы привлечь внимание читателя к определенной части текста . Один из этих методов – сделать обводку . С поддержкой программы Photoshop эту задачу дозволено исполнить несколькими методами.

Вам понадобится

  • – Программа Photoshop.

Инструкция

1. При помощи команды “New” («Новейший») из меню “File” («Файл») сделайте новейший документ в программе Photoshop. Можете сделать то же действие, применяя сочетание клавиш “Ctrl”+”N”. В палитре «Инструменты» выберите инструмент “Horizontal Type Tool” («Горизонтальный текст»). Разместите указатель курсора на сделанный документ, щелкните левой кнопкой мыши в необходимом месте и напишите текст. Переведите написанный текст в растр. Для этого щелкните правой кнопкой мыши по текстовому слою в палитре “Layers” («Слои») и выберите опцию “Rasterize Type” («Растрировать текст»).Исполните обводку текста . Для этого воспользуйтесь командой “Stroke” («Обводка») из меню “Edit” («Редактирование»). В открывшемся окне настроек выберите ширину обводки в пикселях, цвет обводки и ее расположение: внутри обводимого силуэта, по центру либо снаружи силуэта. Нажмите кнопку “ОК”. Сбережете сделанный документ при помощи команды “Save” («Сберечь») в меню “File” («Файл»).

2. Иной метод создания обводки дает вероятность не переводить текст в растр. Напротив говоря, вы сумеете редактировать текст с обводкой, сделанной как жанр слоя. Для этого сделайте слой с текстом, воспользовавшись инструментом «Горизонтальный текст».Кликните правой кнопкой мыши по текстовому слою и выберите опцию “Blending Options” («Опции наложения»). Поставьте галочку в чекбоксе “Stroke” («Обводка»). Кликните по этой вкладке левой кнопкой мыши. В открывшейся вкладке настроек выберите ширину обводки в пикселях. Данный параметр дозволено настроить, вводя чистовые значения в поле “Size” («Размер»), либо передвигая ползунок. Из раскрывающихся списков выберите позицию обводки и режим наложения. В раскрывающемся списке “Fill Type” («Тип заливки») выберите, чем будет заполняться обводка: цветом, градиентом либо текстурой. В открывшейся палитре настройте цвет, градиент либо текстуру для обводки. Итог метаморфозы параметров будет отображаться в документе, тот, что вы сотворили. Нажмите кнопку “ОК”.Сбережете текст с обводкой при помощи команды “Save” («Сберечь») в меню “File” («Файл»).

Размещение спрятанных блоков текста улучшает визуальное воспринятие страницы веб-сайта – она загружается в браузер именно в том виде, тот, что разработал дизайнер, самостоятельно от помещенного объема информации. Помимо того, это комфортнее посетителю – в поисках надобного блока информации ему не доводится просматривать каждый массив, а только лишь небольшие «верхушки айсбергов».

Вам понадобится

  • Базовые познания языков HTML и JavaScript.

Инструкция

1. Используйте пользовательскую функцию на языке JavaScript, дабы организовать в HTML-странице сокрытие и отображение необходимых блоков текста . Всеобщая для всех блоков функция гораздо комфортнее, чем добавление кода к всем из них по отдельности. В заголовочную часть начального кода страницы разместите открывающий и закрывающий теги script, а между ними сделайте пустую пока функцию с наименованием, скажем, swap и одним непременным входным параметром id:<script>function swap(id) </script>

2. Добавьте две строки JavaScript-кода в тело функции – между фигурными скобками. Первая строка должна считывать нынешнее состояние блока текста – включена его видимость либо отключена. Таких блоков в документе может быть несколько, следственно всякий должен иметь личный идентификатор – именно его функция получает в качестве исключительного входного параметра id. По этому идентификатору она и ищет в документе надобный блок, присваивая значение видимости/невидимости (состояние свойства display) переменной sDisplay:sDisplay = document.getElementById(id).style.display;

3. Вторая строка должна менять качество display необходимого блока текста на противоположное – скрывать, если текст видим, и отображать, если спрятан. Это дозволено делать таким кодом:document.getElementById(id).style.display = sDisplay == ‘none’ ? ” : ‘none’;

4. Разместите в заголовочную часть еще и такое изложение жанров:<style type=”text/css”>a </style>Оно потребуется для верного отображения указателя мыши при наведении курсора на неполный тег ссылки. С поддержкой таких ссылок вы организуете в странице переключение видимости/невидимости текстовых блоков.

5. Поместите в тексте эти ссылки-переключатели перед всем спрятанным блоком, а в блоки – в конце текста – добавьте аналогичную ссылку. Заметный текст заключите в теги span, у которых в признаках style задана невидимость. Скажем:Раскройте текст <a onclick=”swap(‘hiddenTxt’)”>+++</a> <span style=”display: none”>Это спрятанный текст <a onclick=”swap(‘hiddenTxt’)”>—</a></span>В этом примере щелчок по ссылке из 3 плюсов будет вызывать описанную выше функцию по событию onClick, передавая ей идентификатор блока, тот, что необходимо сделать видимым. А вовнутрь блока размещена ссылка из 3 минусов с такими же функциями – щелчок по ней будет скрывать текст.

6. Сделайте необходимое число текстовых блоков, схожих описанному в предыдущем шаге, не забывая при этом менять идентификаторы в признаке id тега span и в переменной, передаваемой функции по событию onClick в 2-х ссылках.

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

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

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

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

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

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

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

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

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

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

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

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

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

-webkit-text-stroke — CSS: каскадные таблицы стилей

Свойство CSS -webkit-text-stroke определяет ширину и цвет штрихов для текстовых символов. Это сокращенное свойство полных свойств -webkit-text-stroke-width и -webkit-text-stroke-color .

 /* Значения ширины и цвета */
-webkit-text-stroke: 4px темно-синий;
обводка текста: темно-синий 4px;
/* Глобальные значения */
-webkit-text-stroke: наследовать;
-webkit-text-stroke: начальный;
-webkit-text-stroke: не установлено;
текстовый штрих: наследовать;
текстовый штрих: начальный;
текстовый штрих: не установлен;

Это свойство является сокращением для следующих свойств CSS:

  • -webkit-text-stroke-color
  • -webkit-text-stroke-width

Значения

<длина>

Ширина штриха.

<цвет>

Цвет обводки.

Исходное значение as each of the properties of the shorthand:
  • -webkit-text-stroke-width : 0
  • -webkit-text-stroke-color : currentcolor
Applies до Все элементы
Унаследованные Да
Вычисленные значения Как каждый из свойств Shorthand:
  • -WEBKIT-TELSH-WIDTHTHTHTHTHTHTHTHTHTHTHTHTHERTHE
    • . 0004 <Длина>
    • -WEBKIT-TEXT-TROKE-Color : Computed Color
Тип анимации Как каждый из свойств Shorthand:
  • -WEBKIT-Styte-Styte-Whebit-Whebit-Whebit-Whebit-webkit-Wheb ширина : дискретный
  • -webkit-text-stroke-color : цвет
 -webkit-text-stroke = 
  || 
 <цвет> 
 "><ширина-линии> = 
 <длина [0,∞]> | 
 тонкий | 
 средний | 
 толстый

Добавление красной обводки текста

HTML 
 
Обводка этого текста красная.
CSS 
 #пример {
  размер шрифта: 3em;
  маржа: 0;
  -webkit-text-stroke: 2px красный;
}
Результат
Спецификация
Стандарт совместимости
# the-webkit-text-stroke

Таблицы BCD загружаются только в браузере

с включенным JavaScript.
Включите JavaScript для просмотра данных.
  • Сообщение в блоге Surfin’ Safari, объявляющее об этой функции
  • Статья CSS-Tricks, объясняющая эту функцию
  • -webkit-text-stroke-width
  • -webkit-text-stroke-color
  • -webkit-text-fill-color

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

Хотите принять более активное участие? Узнайте

, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN. css —

Линия штриха текста css — Qaru спросил

Изменено 1 год, 4 месяца назад

Просмотрено 243 раза

я хотел спросить, как мне сделать мой текст таким, как на картинке? Кто-нибудь может мне помочь? Спасибо. Это код, который я сделал до сих пор. но это не похоже на то же самое

Это мой код:

 
    
      <голова>
        <метакодировка="UTF-8" />
        
        
        <ссылка
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          отн = "таблица стилей"
        />
        <ссылка
          href="https://fonts.googleapis.com/css?family=Балу"
          отн = "таблица стилей"
        />
  
      <стиль>
        h3 {
          цвет: прозрачный;
          размер шрифта: 3em;
          маржа: 0;
          семейство шрифтов: "Baloo";
          -webkit-text-stroke: 2pt #608b31;
        }
      
    
      <тело>
         
Тестирование
 
        <скрипт
        src="https://code. jquery.com/jquery-3.6.0.js"
        целостность = "sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh37Xc0jk="
        кроссоригин = "анонимный"
      >

13

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

 h3 {
  белый цвет;
  размер шрифта: 6em;
  маржа: 0;
  семейство шрифтов: "Baloo";
  тень текста: 0.000em 0.075em #608b31, 0.0290.069em #608b31, 0.053em 0.053em #608b31, 0.069em 0.029em #608b31, 0.075em 0.000em #608b31, 0.069em -0.029em #608b31, 0.053em -0.053em #608b31, 0.053em -0.053em #608b31 , 0,000em -0,075em #608b31, -0,029em -0,069em #608b31, -0,053em -0,053em #608b31, -0,069em -0,029em #608b31, -0,075em -0,000em #608b31, -0,069em 0,029em #608b31, -0,053em 0,053em #608b31, -0,029em 0,069em #608b31;
} 
  googleapis.com/css?family=Baloo" rel="stylesheet">
 
Тестирование

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

Я написал функцию Python для генерации теней:

 def css_outline (количество точек, радиус, единицы измерения, цвет):
    из математики импортировать cos, sin, pi
    тени = []
    для i в диапазоне (num_points):
        t = я * 2 * пи / количество_точек
        х = грех (т) * радиус
        y = cos (t) * радиус
        shadows.append("%.3f%s %.3f%s %s" % (x, единицы, y, единицы, цвет))
    возврат (', '.join(тени))

CSS в приведенном выше примере был создан путем вызова css_outline(16, 0.075, 'em', '#608b31')

1

Вы не получите точно такое же изображение, как это, используя тот же шрифт, потому что эта ссылка выглядит так, что строки находятся за пределами

формы текста, а не делают сам контур шире.

По сути, шрифт — это просто векторная форма. Если вы сделаете контур видимым, как у вас есть, вы сможете увидеть, что это за форма. Чего вы не можете сделать в CSS, так это измените эту форму (например, сделайте ее «жирнее», как на исходном изображении). Поскольку ссылка на «контур», которую вы преследуете, имеет строки за пределами фактической буквы, вы не можете делать то, что хотите.

Есть несколько вариантов. Во-первых, попробуйте разные начертания шрифта (например, полужирный, черный, очень жирный и т. д.). Они будут иметь более толстые символы, поэтому контур может дать результат, более близкий к тому, что вы хотите (независимо от того, используете ли вы -webkit-text-stroke , как в исходном коде, или какой-либо вариант на text-shadow как в другом ответе).

Во-вторых, использовать изображение SVG (или даже PNG) вместо реального текста. Однако, если вы используете это для фактического контента на своей странице, вам необходимо убедиться, что вы правильно предоставили доступную информацию (атрибуты alt для изображений), чтобы люди, использующие программы чтения с экрана, могли по-прежнему использовать ваш веб-сайт.

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

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