Обводка текста html: Текст и тень | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

Текст и тень | htmlbook.ru

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow, мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Использование text-shadow

В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).

Рис. 1. Параметры text-shadow

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

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

К сожалению, IE до версии 10.0 не поддерживает text-shadow, так что в этом браузере мы никаких красивостей не увидим.

Контурный текст

Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.

Рис. 2. Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .stroke {
    font: 2em Arial, sans-serif;
    text-shadow: red 0 0 2px;
   }
  </style>
 </head>
 <body>
   <p>Контурный текст</p>
 </body>
</html>

Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).

Пример 2. Четыре тени для контура

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .  stroke {
    font: 2em Arial, sans-serif;
    text-shadow: red 1px 1px 0, red -1px -1px 0, 
                 red -1px 1px 0, red 1px -1px 0;
   }
  </style>
 </head>
 <body>
  <p>Контурный текст</p>
 </body>
</html>

Вид такого контура показан на рис. 3. Заметно, что контур получается более выразительным.

Рис. 3. Контур с помощью четырёх теней

Трёхмерный текст

Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.

Рис. 4. Трёхмерный текст

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

Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.

Пример 3. Тень для добавления трёхмерности

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .stroke {
    font: bold 3em Arial, sans-serif;
    color: #0d3967;
    text-shadow: #cad5e2 1px 1px 0, #cad5e2 2px 2px 0, 
                 #cad5e2 3px 3px 0, #cad5e2 4px 4px 0, 
                 #cad5e2 5px 5px 0;
   }
  </style>
 </head>
 <body>
  <h2>Десятикамерный холодильник</h2>
 </body>
</html>

Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.

Тиснение текста

Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 5).

Рис. 5. Рельефный текст

Для добавления подобного эффекта нам понадобится две тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).

Пример 4. Рельефный текст

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   body {
    background: #f0f0f0; /* Цвет фона веб-страницы */
   }
   .stroke {
    font: bold 3em Arial, sans-serif;
    color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */
    text-shadow: #fff -1px -1px 0, 
                 #333 1px 1px 0;
   }
  </style>
 </head>
 <body>
  <h2>Рельефный текст</h2>
 </body>
</html>

Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта. Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.

 text-shadow: #333 -1px -1px 0, 
              #fff 1px 1px 0;

Свечение

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

Поскольку свечение вокруг текста должно быть равномерным, то смещение тени надо задать нулевым. На рис. 6 показан пример свечения разных цветов.

Рис. 6. Свечение текста

Пример 5. Свечение

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .light {
    text-shadow: #5dc8e5 0 0 10px; /* Свечение голубого цвета */
    color: #0083bd;
   }
   .dark {
    text-shadow: red 0 0 10px; /* Свечение красного цвета */
   }
  </style>
 </head>
 <body>
  <h2>Светлая сторона</h2>
  <h2>Тёмная сторона</h2>
 </body>
</html>

Размытие

Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы (рис. 7), причём степень размытия легко регулировать через параметр text-shadow.

Рис. 7. Текст с размытием

Для сокрытия оригинального текста достаточно задать цвет как transparent (пример 6). Цвет тени после этого выступает цветом текста, а радиус размытия устанавливает степень нерезкости букв.

Пример 6. Размытие текста

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .blur {
    text-shadow: #000 0 0 5px;
    color: transparent; /* Прозрачный цвет текста */
   }
  </style>
 </head>
 <body>
  <h2>Нерезкий текст</h2>
 </body>
</html>

Тень и псевдоклассы

Тень не обязательно добавлять непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами :hover и :first-letter. За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на неё курсора мыши. В примере 7 показаны такие приёмы.

Пример 7. Использование псевдоклассов

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   a:hover { /* Вид ссылки при наведении на неё курсора */
    text-shadow: #5dc8e5 0 0 5px;
    color: #000;
   }
   p:first-letter { /* Первая буква абзаца */
    font-size: 2em;
    text-shadow: red 1px 1px 0, red -1px -1px 0, 
                 red -1px 1px 0, red 1px -1px 0;
   }
  </style>
 </head>
  <body>
   <p>Нишевый проект тормозит <a href="1.  html">традиционный канал</a>, не считаясь с 
      затратами. Структура рынка, отбрасывая подробности, стабилизирует 
      департамент маркетинга и продаж, используя опыт предыдущих кампаний. 
      Построение бренда, безусловно, спонтанно отталкивает конвергентный 
      PR, отвоевывая рыночный сегмент. Инвестиция синхронизирует ролевой 
      социальный статус, повышая конкуренцию. Торговая марка естественно 
      обуславливает план размещения, используя опыт предыдущих кампаний.</p>
 </body>
</html>

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

Для разнообразия можно рассмотреть использование 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>

Используйте 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>

Можно использовать 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>

Ваш ответ

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

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

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

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

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

Почта

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

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

Почта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Переходите на страницу сервиса
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.

Добавление контура к тексту с помощью CSS

С помощью CSS вы можете оформлять текст различными способами. Вы можете добавить различные цвета, тени, подчеркивания или стиль несколькими способами. В этом посте вы рассмотрите различные методы, с помощью которых к тексту можно добавить контур или обводку текста.

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

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

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

HTML

Этот текст имеет обводку

CSS

 #example1{
белый цвет;
размер шрифта: 40px;
-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: черный;
}

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

CSS

 #example2{
белый цвет;
размер шрифта: 40px;
-webkit-text-stroke: черный 2px;
}

Этот текст имеет обводку

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

HTML

Обводка текста не будет отображаться в некоторых браузерах

УС

 #пример3{
черный цвет;
размер шрифта: 34px;
-webkit-text-stroke: 1px черный;
-webkit-text-fill-color: белый;
}

Обводка текста не будет видна в некоторых браузерах

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

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

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

Поскольку text-stroke не имеет широкой поддержки браузеров, вы можете использовать свойство text-shadow , которое сравнительно широко поддерживается браузерами.

HTML

Обводка с использованием тени текста

CSS

 #example4{
белый цвет;
размер шрифта: 40px;
тень текста: -1px 1px 0 #000,
1px 1px 0 #000,
1px -1px 0 #000;
-1px -1px 0 #000;
}

Обводка с использованием тени текста

В приведенной выше демонстрации четыре текстовые тени (вверху справа, внизу справа, внизу слева и вверху слева) задаются с радиусом размытия 0. Этот эффект аналогичен эффекту, создаваемому первым методом.

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

HTML

Обводка с радиусом размытия

CSS

 #example5{
белый цвет;
размер шрифта: 40px;
тень текста: -1px 1px 2px #000,
1px 1px 2px #000,
1px -1px 0 #000,
-1px -1px 0 #000;
}

Обводка с радиусом размытия

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

Больше с обводкой текста

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

HTML

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

CSS

 #example6{
белый цвет;
размер шрифта: 40px;
-webkit-text-stroke: 1px #23430C;
тень текста: -1px 1px 2px #23430C,
1px 1px 2px #23430C,
1px -1px 0 #23430C,
-1px -1px 0 #23430C;
}

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

HTML

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

CSS

 #example7{
белый цвет;
размер шрифта: 47px;
-webkit-text-stroke: 3px #E21F03;
}
#пример8{
белый цвет;
размер шрифта: 47px;
-webkit-text-stroke: 5px #E21F03;
}

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

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

Взгляните на другие эффекты обводки текста

HTML

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

CSS

 #example9{
белый цвет;
размер шрифта: 47px;
-webkit-text-stroke: 1px #F8F8F8;
тень текста: 0px 1px 4px #23430C;
}
#пример10{
белый цвет;
размер шрифта: 47px;
-webkit-text-stroke: 1px #F8F8F8;
тень текста: 0px 2px 4px синий;
}
#пример11{
цвет: #333;
цвет фона: черный;
размер шрифта: 56px;
-webkit-text-stroke: 1px #282828;
тень текста: 0px 4px 4px #282828;
}

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

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

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

Как обсуждалось ранее, свойство text-stroke поддерживается браузерами на основе WebKit с префиксом -webkit- . Это поддерживается Chrome , Safari , Opera и Android . С другой стороны, text-shadow поддерживается почти всеми браузерами.

Существует также третье свойство text-outline для добавления контура к тексту, но в настоящее время оно не поддерживается ни одним браузером.

Заключение

Легкий штрих может придать вашему тексту живой вид. Хотя text-stroke служит цели, равномерно добавляя плавный контур, я предпочитаю использовать text-shadow из-за хорошей поддержки браузерами. Последний не предназначен для добавления контуров, но является очень хорошим CSS-хаком, который дает вам эффект, который вы ищете. Более того, вы можете придать эффект размытия тенями, которые добавят глубины вашему макету. Хотя text-shadow не дает хороших результатов, если длина тени больше 1 пикселя, вы всегда можете использовать комбинацию text-shadow и text-stroke .

Текстовый штрих CSS | Полное руководство по работе со свойством text-stroke CSS

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

Работа свойства CSS text-stroke

В CSS есть свойство, помогающее в оформлении текста и обводке текста, и это делается с помощью свойства text-stroke. Это свойство, в свою очередь, обеспечивает сокращение для двух других свойств, таких как text-stroke-width и text-stroke-color. Это свойство используется для добавления штрихов к тексту и поддерживается только браузерами на базе webkit с использованием префикса –webkit. Немногие браузеры не поддерживают это свойство и могут использовать свойство text-fill-color, которое переопределяет свойство цвета.

Обычно это свойство используется реже, так как оно выравнивает текст по центру и в этом свойстве нет текущего параметра выравнивания. И это свойство также изменяет форму штриха по сравнению с исходной формой. Следовательно, он обычно используется с -webkit-, который является анимируемым или более удобным для использования свойством text-shadow. Свойство text-stroke может указывать как ширину, так и цвет одновременно, что можно показать в приведенном ниже примере, что с помощью –webkit-prefix мы можем указать свойства text-stroke-width и text-stroke-color в одном свойстве. Это свойство имеет два сокращенных свойства, такие как свойства text-stroke-width и text-stroke-color, которые можно использовать отдельно каждое в одной строке.

Синтаксис:

 -webkit-text-stroke: значение ширины значение цвета;

Пример:

Код:

 

<голова>
Образование
<стиль>
п {
размер шрифта: 2em;
-webkit-text-stroke: 1px #1c57c9;
}


<тело>
 Свойство обводки текста CSS 
Это пример свойства text-stroke

Вывод:

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

Два сокращенных свойства text-stroke:

Поскольку это свойство поддерживается только префиксом –webkit-, ниже приведены примеры с использованием префикса webkit.

1. Text-stroke-width

Это свойство, как следует из самого названия, задает толщину отображаемой обводки и принимает единичное значение. Это свойство используется, когда мы хотим указать толщину или размер шрифта предложения или символов в макете элемента. Это свойство можно использовать с text-stroke-color или отдельно. Нет необходимости в этом подсвойстве, когда свойство text-stroke можно использовать отдельно для одновременного указания ширины и цвета. Это свойство также выполняется с поддержкой префикса –webkit-.

Пример:

Теперь давайте рассмотрим пример использования text-stoke-width.

Синтаксис:

 text-stroke-width: значения в пикселях;

Код:

 

<голова>
<название>
Обучение

<стиль>
п {
-webkit-text-stroke-width: 1px;
}


<тело>
Свойство CSS text-stroke-width

Вывод:

В приведенной выше программе мы видим, что печатаем текст в абзаце шириной 1 пиксель. Эта программа отображает вывод, показывающий текст внутри абзаца, к которому мы применили свойство CSS, используя префикс –webkit-, такой как –webkit-text-stroke-width, а также значение 1px для отображения текста.

2. Цвет обводки текста

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

Пример:

Теперь давайте посмотрим на примере, как –webkit-text –stroke-color используется для отображения цвета текста. Это может использовать либо имена цветов напрямую, либо значения цветов с использованием символа «#» в начале значения цвета.

Синтаксис:

 -webki-text-stroke-color: название цвета или значение цвета;

Код:

 

<голова>
<название>
Обучение

<стиль>
п {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: фиолетовый;
}


<тело>
Пример цвета обводки текста в CSS

Вывод:

В приведенной выше программе мы видим, что мы использовали свойство –webkit-text-stroke-color, в котором мы указали значение «фиолетовый», где будет отображаться текст в абзац фиолетового цвета. Мы также можем использовать значения цвета вместо имен цветов, где мы можем использовать их, используя символ «#» в начале значения, например, для черного цвета значение равно #000000, а для белого цвета значение #ffffff.

Мы увидели, что это свойство text-stroke поддерживается не всеми браузерами, поэтому мы можем использовать свойство text-fill-color, поскольку оно поддерживает все браузеры на основе webkit. Это также можно показать, как показано ниже, используя префикс –webkit-.

Код:

 

<голова>
Образование
<стиль>
п {
размер шрифта: 2.5em;
-webkit-text-stroke: 3px #1c87c9;
-webkit-text-fill-color: синий;
}


<тело>
 Свойство обводки текста в CSS  
Это пример свойства text-fill-color.

Вывод:

Заключение

В этой статье мы делаем вывод, что свойство CSS text-stroke используется для добавления штрихов к тексту, таких как ширина и цвет. Это свойство предоставляет два сокращенных свойства, таких как text-stroke-width, которое определяет ширину или толщину текста, и text-stroke-color, предоставляющее цвет текста с использованием имен цветов или значений цвета. Все эти свойства используются с префиксом –webkit-, так как это свойство поддерживается не всеми браузерами. Таким образом, чтобы поддерживать это свойство во всех браузерах, мы должны использовать свойство text-fill-color, которое поддерживает все браузеры на основе webkit.

CSS обводка и заливка текста | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

Текстовый штрих CSS и текстовая заливка

— ВЫКЛ

Глобальное использование
97,74% + 0% знак равно 97,74%

Метод объявления ширины и цвета контура (штриха) для текста.

Хром

4–105: Поддерживается
29% — Supported, requires this prefix to work: -webkit-«> 106: Поддерживается
107–109: Supported

Edge

12 — 14: Not supported
15 — 18: Supported
79 — 105: Supported
106: Supported

Safari

3.1 — 15.6: Supported
16.0: Поддерживается
16.1 — TP: Поддерживается

Firefox

31% — Not supported»> 2 — 47: не поддерживается
48: отключен по умолчанию
49 — 104: поддержал
737375
5
5
5
28% — Supported, requires this prefix to work: -moz-«>5
49 — 104: поддержал
7373737375
49 — 104: поддержал
7373737375
49-104: поддержал
73737373715

Opera

9 — 12,1: не поддерживается
15 — 90: поддержано
04% — Supported, requires this prefix to work: -webkit-«> 91: поддержано

IE

5,5 -10: не поддерживает
IE
1. .
  1. 105: поддержан
  Safari на iOS
  1. 3,2: Частичная поддержка
  2. 4 — 15,6: поддержан
  3. 16.0: поддержан
  4. 16.1: Подпонима
  5. 16.0: поддержан
  6. 16. 1: поддержан
  7. 16.0.0221
    1. 4 — 17.0: Supported
    2. 18.0: Supported
    Opera Mini
    1. all: Not supported
    Opera Mobile
    1. 10 — 12.1: Not supported
    2. 64: Supported
    UC Browser for Android
    1. 13,4: Поддерживается
    Browser Android
    1. 2.1 — 2,3: Поддержанный
    2. 00% — Not supported»> 3: Не поддерживается
    3. 4 — 4.4.4: Поддержал
    4. 105: Подпоход
    5. 10510505 9049 4 — 4.40220 Firefox for Android
      1. 104: Supported
      QQ Browser
      1. 13.1: Supported
      Baidu Browser
      1. 13.18: Supported
      KaiOS Browser
      1. 2.
        No related posts.

Обводка текста html: Текст и тень | htmlbook.ru

Текст и тень | htmlbook.ru

Использование text-shadow

Контурный текст

Трёхмерный текст

Тиснение текста

Свечение

Размытие

Тень и псевдоклассы

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

+SVG Filter

Ваш ответ

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

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

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

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

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

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

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

Инструкция

Инструкция

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

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

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

Как добавить обводку с помощью text-shadow

Добавление контура к тексту с помощью CSS

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

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

Больше с обводкой текста

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

Заключение

Текстовый штрих CSS | Полное руководство по работе со свойством text-stroke CSS

Работа свойства CSS text-stroke

Свойство обводки текста CSS

1. Text-stroke-width

2. Цвет обводки текста

Свойство обводки текста в CSS

Заключение

Рекомендуемые статьи

CSS обводка и заливка текста | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Текстовый штрих CSS и текстовая заливка

Глобальное использование

Хром

Edge

Safari

Firefox

Opera

IE

IE

Safari на iOS

Opera Mini

Opera Mobile

UC Browser for Android

Browser Android

QQ Browser

Baidu Browser

KaiOS Browser

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

Рубрики

Рубрики