Разное

Текст с обводкой: Добавить текст на фото с обводкой надпись красивым шрифтом с эффектом обводки

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

Вопрос задан

Изменён 2 года 1 месяц назад

Просмотрен 2k раз

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

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

.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

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

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

Почта

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

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

Почта

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

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

Добавление тени или контура к тексту в Pages на Mac

Pages

Поиск по этому руководству

Руководство пользователя Pages для Mac

  • Добро пожаловать!
    • Основные сведения о приложении Pages
    • Текстовый документ или документ с макетом страницы?
    • Основные сведения об изображениях, диаграммах и других объектах
      • Создание первого документа
      • Основные сведения о создании книги
      • Использование шаблонов
    • Поиск документов
    • Открытие или закрытие документа
    • Сохранение документа и присвоение ему имени
    • Печать документа или конверта
      • Отмена и повтор изменений
      • Использование боковых панелей
      • Быстрая навигация
      • Просмотр знаков форматирования и направляющих макета
      • Линейки
      • Изменение режима просмотра
      • Панель Touch Bar для Pages
      • Настройка панели инструментов
      • Установка настроек Pages
      • Создание документа с помощью VoiceOver
      • Просмотр комментариев и отслеживание изменений с помощью VoiceOver
    • Выбор текста и размещение точки вставки
    • Добавление и замена текста
    • Копирование и вставка текста
      • Добавление, изменение или удаление поля слияния
      • Изменение информации об отправителе
      • Добавление, изменение и удаление исходного файла в Pages на Mac
      • Заполнение и создание нескольких версий документа
    • Использование диктовки для ввода текста
    • Диакритические знаки и специальные символы
      • Форматирование документа для другого языка
      • Использование фонетической транскрипции
      • Использование двунаправленного текста
      • Использование вертикального текста
    • Добавление даты и времени
    • Добавление математических уравнений
    • Закладки и ссылки
    • Добавление ссылок
    • Изменение шрифта или размера шрифта
    • Выбор шрифта по умолчанию
    • Жирный шрифт, курсив, подчеркивание и зачеркивание
    • Изменение цвета текста
    • Добавление тени или контура к тексту
    • Изменение регистра текста
      • Основные сведения о стилях абзацев
      • Применение стиля абзаца
      • Создание, переименование или удаление стиля абзаца
      • Обновление или возврат стиля абзаца
      • Использование сочетания клавиш для применения стиля текста
    • Копирование и вставка стиля текста
      • Автоматическое форматирование дробей
      • Создание и использование стилей символов
      • Лигатуры
      • Добавление буквиц
      • Поднятие и опускание символов и текста
      • Форматирование текста (китайский, японский, корейский)
    • Добавление эффекта выделения в текст
    • Формат переносов, тире и кавычек
    • Установка межстрочного интервала и интервала между абзацами
    • Установка полей для абзаца
    • Форматирование списков
    • Установка табуляторов
    • Выравнивание текста по краям и по ширине
    • Настройка разбивки на страницы и добавление разрывов строк и страниц
    • Форматирование столбцов текста
    • Связывание текстовых блоков
    • Добавление границ и линий
    • Задание размера бумаги и ориентации
    • Установка полей для документа
    • Настройка разворота
    • Шаблоны страниц
      • Добавление страниц
      • Добавление и форматирование разделов
      • Изменение порядка страниц или разделов
      • Дублирование страниц или разделов
      • Удаление страниц или разделов
      • Оглавление
      • Библиография
      • Постраничные и заключительные сноски
      • Верхние и нижние колонтитулы
    • Добавление номеров страниц
    • Изменение фона страницы
    • Добавление границы вокруг страницы
    • Добавление водяных знаков и фоновых объектов
    • Создание пользовательского шаблона
      • Добавление изображения
      • Добавление галереи изображений
      • Редактирование изображения
      • Добавление и редактирование фигуры
      • Объединение или разъединение фигур
      • Рисование фигуры
      • Сохранение фигуры в медиатеке фигур
      • Добавление и выравнивание текста внутри фигуры
    • Добавление линий и стрелок
    • Анимация, публикация и сохранение рисунков
      • Добавление аудио и видео
      • Запись звука
      • Редактирование аудио- и видеофайлов
    • Выбор формата фильма или изображения
      • Размещение и выравнивание объектов
      • Размещение объектов с текстом
      • Использование направляющих линий
      • Наложение, группировка и закрепление объектов
    • Изменение прозрачности объекта
    • Заливка фигуры или текстового блока цветом или изображением
    • Добавление границы объекта
    • Добавление подписи или заголовка
    • Добавление отражения или тени
    • Использование стилей объектов
    • Изменение размеров, поворот и зеркальное отражение объектов
      • Добавление и удаление таблицы
      • Выбор таблиц, ячеек, строк и столбцов
        • Добавление и удаление строк и столбцов таблицы
        • Перемещение строк и столбцов таблицы
        • Изменение размера строк и столбцов таблицы
      • Объединение и разделение ячеек таблицы
        • Изменение внешнего вида текста в таблице
        • Отображение, редактирование и скрытие заголовка таблицы
        • Изменение линий сетки и цветов таблицы
        • Использование стилей таблицы
      • Изменение размера, перемещение и открепление
      • Добавление и редактирование содержимого ячейки
        • Форматирование дат, значений валют и других типов данных
        • Создание произвольного формата ячейки таблицы
        • Форматирование таблиц с двунаправленным текстом
      • Условное выделение ячеек
      • Сортировка по алфавиту и сортировка данных таблицы
      • Расчет значений по данным в ячейках таблицы
      • Использование справки по формулам и функциям
      • Добавление или удаление диаграммы
      • Изменение одного типа диаграммы на другой
    • Изменение данных диаграммы
    • Перемещение, изменение размера и поворот диаграммы
      • Изменение внешнего вида серий данных
      • Добавление легенды, линий сетки и других меток
      • Изменение внешнего вида текста и меток на диаграмме
      • Добавление рамки и фона к диаграмме
      • Использование стилей диаграммы
    • Проверка правописания
    • Поиск определения слова
    • Поиск и замена текста
    • Автоматическая замена текста
    • Просмотр количества слов и другой статистики
    • Просмотр аннотаций
    • Задание имени автора и цвета комментариев
    • Выделение текста цветом
    • Добавление и печать комментариев
    • Отслеживание изменений
    • Отправка документа
    • Публикация книги в Apple Books
      • Основные сведения о совместной работе
      • Приглашение к совместной работе
      • Совместная работа над общим документом
      • Просмотр последних действий пользователей в общем документе
      • Изменение настроек общего документа
      • Закрытие общего доступа к документу
      • Общие папки и совместная работа
      • Использование Box для совместной работы
    • Использование iCloud Drive с приложением Pages
    • Экспорт в Word, PDF или другой формат
    • Открытие книги iBooks Author в Pages
    • Уменьшение размера файла документа
    • Сохранение большого документа в виде файла пакета
    • Восстановление более ранней версии документа
    • Перемещение документа
    • Удаление документа
    • Установка защиты для документа
    • Защита документа паролем
    • Создание собственных шаблонов и управление ими
      • Перенос документов с помощью AirDrop
      • Перенос документов с помощью Handoff
      • Перенос документов через Finder
    • Если не удается добавить или удалить страницу
    • Если не удается удалить элемент из документа
    • Если не удается найти кнопку или элемент управления
    • Нежелательные изменения форматирования
    • Сочетания клавиш
    • Символы сочетаний клавиш
  • Авторские права

Для выделения текста можно добавить тени и обводку.

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

  1. Выберите текст, который нужно изменить.

  2. В верхней части боковой панели «Формат»  нажмите кнопку «Стиль».

    Если текст расположен в текстовом блоке, таблице или фигуре, сначала нажмите вкладку «Текст» в верхней части боковой панели, затем кнопку «Стиль».

  3. В разделе «Шрифт» нажмите , затем установите или снимите флажок «Контур».

  4. При добавлении контура используйте элементы управления, чтобы изменить тип линии, цвет и ширину.

Совет. Чтобы создать эффект контура без цвета внутри, нажмите всплывающее меню «Цвет шрифта» под заголовком «Стили символов», затем выберите «Нет».

Добавление и удаление тени

  1. Выберите текст, который нужно изменить.

  2. В верхней части боковой панели «Формат»  нажмите кнопку «Стиль».

    Если текст расположен в текстовом блоке, таблице или фигуре, сначала нажмите вкладку «Текст» в верхней части боковой панели, затем кнопку «Стиль».

  3. В разделе «Шрифт» нажмите , затем установите или снимите флажок «Тень».

  4. Можно настроить внешний вид добавленной тени, используя следующие элементы управления.

    • Размывание. Увеличьте или уменьшите резкость тени нажатием стрелок.

    • Сдвиг. Увеличьте или уменьшите промежуток между текстом и тенью нажатием стрелок.

    • Непрозрачность. Нажимайте стрелки, чтобы увеличить или уменьшить степень прозрачности тени.

    • Угол. Перетяните круговой регулятор «Угол», чтобы изменить направление источника света. Можно также ввести значения в поле рядом с круговым регулятором.

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

См. такжеОсновные сведения о стилях абзацев в Pages на MacОбновление или возврат стиля абзаца в Pages на Mac

Максимальное количество символов: 250

Не указывайте в комментарии личную информацию.

Максимальное количество символов: 250.

Благодарим вас за отзыв.

текстовый штрих | 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
108* 107* 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 — это просто фиктивный текст...

Попробуй сам "

Результат

Пример свойства text-stroke с несколькими значениями: 

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

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

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