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

Leave a Comment / Css / By /

html — Обводка текста на чистом СSS

Хочу сделать обводку текста как на макете, но никак не выходит.
Вот как должно быть:

Что получилось у меня:

.box-design {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: $boxGray;
  font-family: GBold;
  font-size: 150px;
}
<div>
  <p>DES</p>
</div>
  • html
  • css
  • вёрстка
  • svg
  • svg-animation

1

Для разнообразия можно рассмотреть использование SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" >
    <rect fill="#111111" />
    <text x="10" y="150" font-size="150px" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES </text>
</svg>

Добавляем буквально одну строчку и можно сделать анимацию обводки

<svg version="1.
 
 1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" >
    <rect fill="#111111" />
    <text x="10" y="150" font-size="150px" stroke-dasharray="25" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES 
         <!-- Анимация обводки -->
      <animate attributeName="stroke-dashoffset" dur="2s" values="300;0" repeatCount="indefinite" />
    </text>
</svg>

+SVG Filter

Для обводки используются SVG фильтры: feColorMatrix и feMorphology

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" >
    <filter 
            x="-20%" y="-20%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="4" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="1" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 0.
  2
                             0 0 0 0 0.1
                             0 0 0 0 0.5
                             0 0 0 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
    <rect fill="#111111" />
    <text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="0" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES 
        
    </text>
</svg>

Тот же вариант + анимация строки

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" >
    <filter 
            x="-20%" y="-20%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="5" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="1" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 0.
 
 2
                             0 0 0 0 0.1
                             0 0 0 0 0.9
                             0 0 1 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
    <rect fill="#111111" />
    <text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="20" font-family="sans-serif" fill="none" stroke="silver" stroke-width="4"  > DES 
         <!-- Анимация обводки -->
       <animate attributeName="stroke-dashoffset" dur="5s" values="300;0" repeatCount="indefinite" />
    </text>
</svg>

5

Используйте text-shadow

.box-design {
  text-shadow: 
    -1px 0 0 red, /* Тень влево */
    0 -1px 0 red, /* Тень вверх */
    1px 0 0 red, /* Тень вправо */
    0 1px 0 red; /* Тень вниз */
  font-size: 150px;
  color: #fff;
  margin: 0;
}
<div>
  <p>DES</p>
</div>

1

Можно использовать text-shadow, как в соседнем ответе, но тогда не будет прозрачности у самих букв.

Поэтому, всё таки -webkit-text-stroke:

body { background: radial-gradient(#d808, #000f) no-repeat; }
.box-design {
  margin: 0;
  font: 150px Arial;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 2px white;
}
<div>
  <p>DES</p>
</div>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

outline — CSS — Дока

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

Кратко

Скопировано

Что-то вроде 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

Скопировано

  • Ключевые слова 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

ctrl + alt + ←

→

outline-color

ctrl + alt + →

текстовый штрих | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

text-stroke — это экспериментальное свойство, которое предоставляет параметры оформления текста, подобные тем, которые можно найти в Adobe Illustrator или других приложениях для векторного рисования.

В настоящее время он не включен ни в одну из спецификаций W3C или WHATWG . По состоянию на июнь 2013 года он реализован только за -webkit 9.Префикс поставщика 0006, хотя будущие версии Firefox и Internet Explorer могут поддерживать это свойство (вероятно, под своими собственными префиксами).

 знак {
  обводка текста: 2px красного цвета;
}

Свойство text-stroke на самом деле является сокращением для двух других свойств:

  1. text-stroke-width , которое принимает единичное значение (1px, 0.125em, 4in и так далее) и описывает толщину штриха. эффект.
  2. text-stroke-color , который принимает значение цвета (hex, rgb/rgba, hsl/hsla и так далее).

text-stroke также имеет сопутствующее свойство,

text-fill-color , которое переопределяет свойство color , позволяя изящно откатиться к другому цвету текста в браузерах, которые не поддерживают text- ход .

Точки интереса

  • Штрих, нарисованный с помощью text-stroke , выравнивается по центру текстовой фигуры (как по умолчанию в Adobe Illustrator), и в настоящее время нет возможности установить выравнивание внутри или вне формы. К сожалению, это делает его гораздо менее пригодным для использования, так как независимо от того, что теперь штрих мешает форме буквы, разрушая замысел дизайнеров оригинального шрифта. Настройка была бы идеальной, но если бы нам пришлось выбирать одну, внешний удар был бы гораздо полезнее.
  • в Webkit, text-stroke можно анимировать с помощью переходов и анимации CSS, но только цвет обводки, а не ширина обводки.
  • Более совместимая с браузером (и, возможно, надежная) замена эффекта text-stroke использует text-shadow , который описан в этой статье CSS-Tricks.

Поддержка браузера

Рабочий стол
90 076
Chrome Firefox IE Edge Safari
4* 49* № 15* 3. 1*

Мобильный телефон/планшет
Android Chrome Android Firefox Android iOS Safari
112* 110* 2.1* 4.0-4.1*

Дополнительная информация

  • Surfin' Safari: знакомство с Text-Stroke
  • Добавление обводки к веб-тексту
  • Live Editor

украшение текста

.element { украшение текста: подчеркивание; }

строка оформления текста

.element {строка-украшения-текста: подчеркивание; }

стиль оформления текста

.element { стиль оформления текста: волнистый; }

толщина оформления текста

.element {толщина украшения текста: 2px; }

смещение подчеркивания текста

. element { text-underline-offset: 0.5em; }

позиция подчеркивания текста

.element { text-underline-position: under; }

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

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

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

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

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

Значения

<длина>

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

<цвет>

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

Начальное значение как каждое из свойств сокращенной записи:
  • -webkit-text-stroke-width : 0
  • -webkit-text-stroke-color : currentcolor
    • 9005 7
Относится ко всем элементам
Унаследовано да
Вычисленное значение как каждое из свойств стенографии:
  • -webkit-text-stroke-width : absolute 90 006
  • -webkit-text-stroke-color : вычисленный цвет
Тип анимации как каждое из свойств сокращения:
  • -webkit-text- ширина хода : дискретный
  • -webkit-text-stroke-color : цвет
 -webkit-text-stroke = 
  || 
 <цвет> 
 "> = 
 <длина [0,∞]> | 
 тонкий | 
 средний | 
 толстый

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

HTML 
Обводка этого текста красная.

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

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