Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

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

Обводка текста CSS или создание эффекта контурного текста

Обводка текста CSS основана на свойстве -webkit-text-stroke, которое принимает в качестве значений ширину и цвет:

.outline {
    -webkit-text-stroke: 2px cyan;
}

Значение width указывает, какой толщины будет контур. Значение color определяет цвет контура. Все довольно просто. Пример применения этого свойства:

.outline {
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: cyan;
}

Следует отметить, что у свойства text-stroke есть префикс webkit. Это может показаться странным, но это единственная версия, поддерживаемая всеми браузерами. Даже браузеры, не использующие webkit, такие как Firefox и Edge, поддерживают это свойство.

  • Размещаем все вместе
  • Работа со старыми браузерами
  • Заключение

Мы рассмотрели свойство -webkit-text-stroke и его использование. Теперь проиллюстрируем все это.

Перед тем, как сделать обводку текста CSS, создайте новый документ HTML и добавьте в него следующую разметку:

<!DOCTYPE html>
<html>
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Text Outline</title>
    <style>
        body {
            background-color: #0F1020;
            padding: 100px;
        }
         #textContainer p {
            font-family: sans-serif;
            font-size: 64px;
            fong-weight: 100;
            color: #E6E8E6;
            margin: 0;
        }
    </style>
</head>
 <body>
    <div>
        <p>Did you know that your
            fingerprint is unique?
            <span>Of course you did!</span></p>
    </div>
</body>
 </html>

Сохраните веб-страницу, а затем откройте ее в браузере. Вы должны увидеть примерно следующее:

Взгляните на разметку, отвечающую за CSS обводку текста белым цветом, который мы видим:

<div>
    <p>Did you know that your
        fingerprint is unique?
        <span>Of course you did!</span></p>
</div>

Мы хотим разместить текст внутри элемента span и отобразить его с эффекта контура, о котором говорили ранее. Обводка должна быть шириной 1 пиксель и иметь зеленовато-лимонный цвет. Для этого добавьте следующий код в нижнюю часть блока style (ниже существующих правил стиля):

#textContainer .outline {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #AFFC41;
}

После этого сохраните веб-страницу и откройте (обновите) ее в браузере. Вы должны увидеть появившийся контур:

Если хотите отобразить только контур текста, все, что нужно сделать, это присвоить CSS свойству color значение transparent:

#textContainer .outline {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #AFFC41;
    color: transparent;
}

После этого текст «Of course you did!» будет отображен только с помощью контура!

Свойство text-stroke поддерживается браузерами хорошо. Но, возможно, вы захотите отобразить альтернативный вариант для тех пользователей, которые используют старые версии браузеров. В этих случаях нужно «закрасить» текст сплошным цветом. Это можно сделать, комбинируя свойства color и -webkit-fill-color:

#textContainer . outline {
    color: #E6E8E6;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #AFFC41;
}

В этом случае текст будет отображаться сплошным цветом для старых свойств (с помощью свойства color). Если поддерживаются свойства -webkit-text, то webkit-text-fill-color переопределит свойство цвета и отобразит контур с прозрачным цветом заливки.

Свойство -webkit-text-stroke упрощает создание обводки текста CSS. Раньше, если бы мы хотели сделать это, пришлось бы полагаться на изображения, хитрости с тенями, использование специального контурного шрифта. Теперь нам не нужно все это делать!

МЛМария Логутенкоавтор-переводчик статьи «Creating a Text Outline Effect»

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

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

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

Почта

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

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

Почта

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

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

текстовый штрих | 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.

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

Рабочий стол
Chrome Firefox IE Edge Safari
4* 49* No 15* 3.1*

Mobile / Tablet
Android Chrome Android Firefox Android IOS Safari
110* 110* 2,1* 4,0-4.1*

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

    Подробнее

      .

      0024
    • Добавление обводки к веб-тексту
    • Live Editor

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

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

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

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

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

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

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

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

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

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

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

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

    Свойство CSS text-stroke — использование, синтаксис, примеры

    ❮ Пред. Следующий ❯

    Свойство text-stroke — это экспериментальное свойство, предоставляющее варианты оформления текста. Это сокращение для следующих свойств:

    • text-stroke-width
    • цвет обводки текста

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

    Вы можете выбрать цвета здесь: Цвета HTML.

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

    Свойство text-stroke используется только с префиксом -webkit-vendor. Это свойство не является стандартным. Это работает не для каждого пользователя. Существуют несовместимости между реализациями, и поведение может измениться в будущем.

     штрих-текст: длина | цвет | начальная | наследовать;

    Пример свойства text-stroke: 

      <голова>Название документа <стиль> п {
 размер шрифта: 2.5em;
 маржа: 0;
 -webkit-text-stroke: 2px #1c87c9;
 }   <тело>
    Пример свойства штриха текста
    Lorem Ipsum — это просто фиктивный текст.
Оставить комментарий

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

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