Css обводка букв: Контур вокруг каждой буквы (свойство text-stroke)

CSS Magic #3. Обводка для текста (text-stroke effect)

Итак, обводка для текста на css в целом несложно делается, однако прежде чем начнем — стоит понимать, что данный метод не сработает в IE. Если Вам не особо нужен IE — либо игнорим проблему, либо выкручиваемся (я покажу как это можно сделать). Поехали!

Разметка

1
2

<div>Text with stroke.</div>
<div>Text with stroke.</div>

<div>Text with stroke.</div>
<div>Text with stroke.</div>

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

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.no-ie {
  font-size: 4em;
  -webkit-text-stroke: 1px darkgrey;
  -webkit-text-fill-color: transparent;
  margin-bottom: 2em;
}
 
.  ie {
  font-size: 4em;
  color: #fff;
  text-shadow: -0   -1px 0   #000000,
         0   -1px 0   #000000,
        -0    1px 0   #000000,
         0    1px 0   #000000,
        -1px -0   0   #000000,
         1px -0   0   #000000,
        -1px  0   0   #000000,
         1px  0   0   #000000,
        -1px -1px 0   #000000,
         1px -1px 0   #000000,
        -1px  1px 0   #000000,
         1px  1px 0   #000000,
        -1px -1px 0   #000000,
         1px -1px 0   #000000,
        -1px  1px 0   #000000,
         1px  1px 0   #000000;
}

.no-ie {
  font-size: 4em;
  -webkit-text-stroke: 1px darkgrey;
  -webkit-text-fill-color: transparent;
  margin-bottom: 2em;
}

.ie {
  font-size: 4em;
  color: #fff;
  text-shadow: -0   -1px 0   #000000,
		 0   -1px 0   #000000,
		-0    1px 0   #000000,
		 0    1px 0   #000000,
		-1px -0   0   #000000,
		 1px -0   0   #000000,
		-1px  0   0   #000000,
		 1px  0   0   #000000,
		-1px -1px 0   #000000,
		 1px -1px 0   #000000,
		-1px  1px 0   #000000,
		 1px  1px 0   #000000,
		-1px -1px 0   #000000,
		 1px -1px 0   #000000,
		-1px  1px 0   #000000,
		 1px  1px 0   #000000;
}

Используем два -webkit-свойства -webkit-text-stroke

Определять браузер можно любым доступным способом (благо их полно в интернете), но если нужно — я расскажу в отдельной статье как)

 
И по традиции пен:

Вот собственно и все. Простой, но полезный эффект. К сожалению, не лишенный недостатков, но ничего в мире не бывает идеально.

До скорых встреч!)

Метки: css, css magic, text-stroke

text-shadow — CSS | MDN

CSS-свойство text-shadow добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам decorations. Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.

Исходный код этого интерактивного примера размещён в репозитории на GitHub. Если Вы желаете внести вклад в проект интерактивных примеров, пожалуйста создайте клон https://github.com/mdn/interactive-examples и пришлите нам запрос на извлечение (pull request).

text-shadow: 1px 1px 2px black;


text-shadow: #fc0 1px 0 10px;


text-shadow: 5px 5px #558abb;


text-shadow: white 2px 5px;


text-shadow: 5px 10px;


text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

Это свойство определено как разделённый запятыми список теней.

Каждая тень определена как два или три значения <длина>, за которыми следует необязательное значение <цвет>. Первые два значения <длина> определяют параметры <смещение-x> и <смещение-y>. Третье необязательное значение

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

Это свойство можно применить к псевдо-элементам ::first-line и ::first-letter.

Значения

<цвет>

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

<смещение-x> <смещение-y>

Обязательные. Эти величины <длина> задают расстояние тени от текста. <смещение-x> определяет горизонтальное расстояние; отрицательное значение размещает тень левее от текста. <смещение-y> определяет вертикальное растояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в 0, тень будет располагаться прямо за текстом, она может быть видна из-за эффекта <радиус-размытия> .

<радиус-размытия>

Необязательный. Это величина <длина>. Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию 0, в случае когда параметр не определён.

Формальный синтаксис

none | <shadow-t>#
где 
<shadow-t> = [ <length>{2,3} && <color>? ]
где 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
где 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
где 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Простая тень

. red-text-shadow {
  text-shadow: red 0 -2px;
}

<p>Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore.</p> 

Множественные тени

.white-text-with-blue-shadow {
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, serif;
}

<p>Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>

BCD tables only load in the browser

Примечание Quantum CSS

• В движке Gecko есть программная ошибка в результате которой метод перехода (transition) не будет производить переход от элемента со свойством text-shadow с заданным цветом к элементу со свойством text-shadow без заданного цвета  (баг 726550). Данная ошибка была исправлена в параллельной ветке движка CSS для Firefox (так же известном как Quantum CSS или Stylo, выпуск которого запланирован уже в версии Firefox 57).

SVG. Работаем с текстом

Выводим текст

Текст задаётся с помощью тега text. Основные атрибуты — x и y. Нужно не забывать указывать базовую линию для текста, за которую отвечает атрибут y. Если её не указать, то по умолчанию она окажется в точке с координатой 0, и текст станет невидимым, так как он рисуется над базовой линией. Значение атрибута должно быть больше размера шрифта. Размер

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

<svg xmlns="http://www. w3.org/2000/svg"  viewBox="0 0 500 80">
    <text y="50" font-size="32" font-weight="bold" 
    font-family="Avenir, Helvetica, sans-serif">
        Этот кот в SVG
    </text>
</svg>
 

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

Как и в HTML, лишние пробелы игнорируются.

Чтобы сдвинуть текст по горизонтали, можно использовать атрибут x в text. Если атрибут не указан, то используется значение по умолчанию 0.

Атрибуты

• direction — Направление текста. В некоторых языках (например, в арабском) принято писать текст справа налево. Для задания написания справа налево необходимо дополнительно включать атрибут unicode-bidi. Возможные значения: rtl | ltr (по умолчанию)
• dominant-baseline — Выравнивание текста относительно горизонтальной линии. Возможные значения: auto (по умолчанию) | hanging | mathematical
• fill — Цвет текста. Поддерживаются именованные значения, а также RGB-код в десятичной и шестнадцатеричной формах. Значение по умолчанию — black
• font-family — Шрифт текста. Все шрифты, доступные на компьютере. При отсутствии заданного шрифта будет использован подобный (например, при отсутствии шрифта Arial будет использован Arial Bold). Значение по умолчанию — Arial
• font-size — Размер шрифта. Значение по умолчанию 12 пт.
• font-size-adjust — Значение по умолчанию — none
• font-stretch — Сжатие и растяжение текста. Возможные значения: normal (по умолчанию) | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
• font-style — Начертание текста. Возможные значения: normal (по умолчанию) | italic | oblique
• font-weight — Вес шрифта. От 100 до 900 — Эти значения формируют упорядоченную последовательность, где каждый номер обозначает вес, который темнее своего предшественника. normal — то же, что «400». bold — то же, что «700». bolder — Определяет вес шрифта, более темный, чем наследуемый. Если такого веса нет, результатом будет более «темное» числовое значение (а шрифт не изменяется), если только наследуемое значение не «900», в этом случае результат будет также «900». lighter — Определяет вес шрифта, назначаемый шрифту, который светлее, чем наследуемый. Если такого веса нет, результатом будет более «светлое» числовое значение (а шрифт не изменяется), если только наследуемое значение не «100», в этом случае результат будет также «100». Возможные значения: normal (по умолчанию) | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
• glyph-orientation-horizontal — Горизонтальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (и значения со знаком минус). По умолчанию — auto или 0
• glyph-orientation-vertical — Вертикальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (И значения со знаком минус). По умолчанию — auto или 0
• kerning — Интервал между буквами. Возможные значения: auto (по умолчанию) | число
• letter-spacing — Интервал между буквами. Возможные значения: normal | число
• text-anchor — Выравнивание текста относительно начала строки. Возможные значения: start (по умолчанию), middle, end
• text-decoration — Подчеркивание, надчеркивание, перечеркивание текста. Возможные значения: none (по умолчанию) | underline | overline | line-through
• unicode-bidi — Для работы атрибута direction со значением ltr необходимо наличие в коде свойства unicode-bidi со значением embed или override. Возможные значения: normal (по умолчанию) | embed | bidi-override
• word-spacing — Интервал между словами. Возможные значения: normal (по умолчанию) | число
• writing-mode — Устанавливает расположение текстового фрагмента как единого целого относительно исходной точки. Возможные значения, например, слева направо — сверху вниз ( left to right top to bottom ) не изменяют порядок самих букв в словах. Возможные значения: lr-tb (по умолчанию) | rl-tb | tb-rl | lr | rl | tb
• x — Абсцисса верхней левой точки текстового блока. Значение по умолчанию: 0
• y — Ордината верхней левой точки текстового блока. Значение по умолчанию: 0

Стилизация

Текст может быть стилизован с помощью свойств CSS, таких как font-weight, font-style, text-decoration, text-transform и т.д.

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 20">
  <text x="0" y="15">Подчеркнутый кот средствами SVG</text>
</svg>

Частичная стилизация через <tspan>

Если нужно применить стили или атрибуты только для определенной части, то можно использовать элемент <tspan> к разным частям текста в строке.

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 20">
  <text x="0" y="15">
  <tspan>Жирный кот</tspan>, 
  <tspan>наклонный кот</tspan> и <tspan>подчеркнутый кот</tspan>. </text>
</svg>

Цвет

Цвет текста задаётся через свойство fill.

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 52">
    <text y="50" font-size="40" font-weight="bold" font-family="Avenir, Helvetica, sans-serif" fill="red">Цветной кот</text>
</svg>

Режим вывода текста

Японская письменность использует режим сверху вниз. Этот режим можно включить через атрибут writing-mode со значением tb (top-to-bottom). Я не знаю японских иероглифов, поэтому вставлю русские символы.

<svg xmlns="http://www.w3.org/2000/svg">
  <text x="70" y="20">Неко - японский кот</text>
</svg>

Добавление текста в заголовок страницы

Можно сделать красивый заголовок на странице, используя CSS:

header { 
  width: 80%;
  margin: 0 auto;
}
svg text { 
  font-family: sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 90px;
  fill: blue;
}

<header>
    <svg xmlns="http://www. w3.org/2000/svg" viewBox="0 0 285 80">
        <text x="0" y="66">Hawaii</text>
    </svg>
</header>

Посмотреть демо.

SVG будет автоматически подстраиваться под размеры контейнера.

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

SVG-текст можно сделать ссылкой.

<header>
    <img src="waves.svg" alt="Waves"> 
</header>

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

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

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
	<text y="50" fill="#c96" 
    font-size="32px" 
    font-family="Futura Condensed ExtraBold, Arial Black, sans-serif" 
    stroke="yellow" stroke-width="2px">Обведи кота вокруг пальца</text>
</svg>

Присвоим атрибуту fill значение none, чтобы оставить только обводку.

При желании можно вынести код в стили.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
	<defs>
		<style>
		text {  
		  fill: #c96; font-size:32px;
		  font-family: Futura Condensed ExtraBold, Arial Black, sans-serif;
		  stroke: yellow; stroke-width: 2px;
		}
		</style>
	</defs>
	<text y="50">Обведи кота вокруг пальца</text>
</svg>

Градиент

Текст можно сделать градиентным. Задаём цвета градиента при помощи linearGradient и присваиваем ему идентификатор. Связываем идентификатор с свойством fill.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient x1="0%" x2="0%" y1="0%" y2="100%">
      <stop stop-color = "#ddd" offset = "0%"/>
      <stop stop-color = "#FF00ee" offset = "100%"/>
    </linearGradient>
  </defs>
  <text x="0" y="40" font-size="42" font-weight="bold" fill="url(#textgradient)" stroke="none">Градиентный кот</text>
</svg>

Текст вдоль кривой линии

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

Для начала нужно создать траекторию path в элементе defs. Элементу path добавляем атрибут id, чтобы связать текст в элементе textPath через xlink:href:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path fill="none" stroke="#000000"
      d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/>
  </defs>
  
  <use xlink:href="#textpath"/>
  <text x="10" y="100" font-size="24">
  <textPath xlink:href="#textpath">
    Кот вдоль кривой
  </textPath>
  </text>
</svg>

Пример размещения текста вдоль окружности вынесен в отдельную статью.

Вернуться в раздел SVG

Реклама

Карманное руководство по написанию SVG. Глава 5 — CSS-LIVE

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Глава 5. Элемент <text>

Элемент <text> определяет графику, состоящую из текста. Для управления текстом есть специальные атрибуты, а также к нему можно применять градиенты, паттерны, контуры обрезки, маски или фильтры.

Написание и редактирование элемента <text> в SVG предоставляют очень мощные возможности для создания масштабируемого текста в качестве графики, которую можно легко изменять и редактировать в коде SVG.

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

Базовые атрибуты

Текстовые атрибуты SVG располагаются в элементе <text>, который в свою очередь находится в элементе <svg>. При помощи этих атрибутов мы можем управлять некоторым базовым оформлением для нашего текста, а также описывать тонкости его отображения на холсте, дающее возможность полного контроля для его размещения на экране.

x, y, dx, dy

Первый символ в элементе <text> отображается в соответствии с установленными значениями x и y. Значение x определяет начало текста по оси x, а y — горизонтальное положение нижнего края текста.

x и y устанавливают координаты в абсолютных единицах, а dx и dy — относительные координаты. Это особенно удобно при использовании в связке с элементом <tspan>, который будет рассмотрен в следующем разделе.

<svg>
    <text x="30" y="90" fill="#ED6E46" font-size="100" font-family="'Leckerli One', cursive">Watermelon</text>
</svg>

Посмотреть демо можно здесь

На изображении выше текст начинается с 30px от левого края области просмотра SVG, а нижний край текста установлен в 90px от верхней границы этой области просмотра: x="30" y="90".

rotate

Поворот может быть установлен для определённой буквы/символа и/или для элемента в целом.

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

У текста на изображении ниже для всей графики задан поворот элементом transform, но каждому символу тоже установлено своё значение: rotate="20,0,5,30,10,50,5,10,65,5".

<svg>
    <text x="30" y="80" fill="#ED6E46" font-size="100" rotate="20,0,5,30,10,50,5,10,65,5" transform="rotate(8)" font-family="'Leckerli One', cursive">Watermelon</text>
</svg>

Посмотреть демо можно здесь

textLength & lengthAdjust

Атрибут textLength указывает длину текста. Изменяя интервал между символами, длина текста регулируется таким образом, чтобы в итоге соответствовать длине, указанной в этом атрибуте.

textLength следующего примера установлен в 900px. Заметьте, как интервалы между символами увеличились, чтобы заполнить это пространство.

<svg>
    <text x="30" y="90" fill="#ED6E46" font-size="100" textLength="900" font-family="'Leckerli One', cursive">Watermelon</text>
</svg>

Посмотреть демо можно здесь

При использовании атрибутов textLength и lengthAdjust вместе, межсимвольный интервал и размер символа будут отрегулированы таким образом, чтобы соответствовать этим новым значениям длины.

Значение «spacing» приведёт к виду, который напоминает пример выше, где интервалы между символами увеличены, чтобы заполнить пространство: «lengthAdjust=»spacing»».

Значение «spacingAndGlyphs» приказывает интервалу и размеру символа отрегулироваться соответственно: lengthAdjust="spacingAndGlyphs".

Посмотреть демо можно здесь

Элемент tspan

Элемент <tspan> очень важен, потому что в настоящее время SVG не поддерживает автоматические разрывы строк или перенос слов. <tspan> позволяет рисовать множественные линии текста путём выделения определённых слов или символов, чтобы затем манипулировать ими независимо друг от друга.

Вместо определения новой системы координат для дополнительных линий, элемент <tspan> позиционирует эти новые линии текста относительно предыдущей.

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

В примере ниже слова «are» и «delicious» находятся в раздельных элементах <tspan> в элементе <text>. Используя атрибут dy в каждом из этих <tspan>,мы позиционируем слово по оси y относительно слова перед ним.

«are» спозиционированно в -30px от «Watermelons», а «delicious» в 50px от «are».

<svg>
    <text x="15" y="90" fill="#ED6E46" font-size="60" font-family="'Leckerli One', cursive"> Watermelons
        <tspan dy="-30" fill="#bbc42a" font-size="80">are</tspan>
        <tspan dy="50">delicious</tspan>
    </text>
</svg>

Посмотреть демо можно здесь

Вы также можете передвигать каждый символ отдельно при помощи списка значений, как показано в примере ниже. Буква/символ затем передвинутся в соответствии с позицией буквы/символа перед ними, и «delicious» теперь отпозиционирован в соответствии с «e» в слове «are».

Посмотреть демо можно здесь

tspan, содержащий «are», имеет следующий список значений атрибута dy: dy="-30 30 30".

Свойства интервалов

Существует ряд свойств, доступных при использовании элемента <text> во встроенном SVG, которые управляют интервалами слов и букв, подобно возможностям программ для встроенной векторной графики.

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

kerning & letter-spacing

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

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

В примере ниже свойство kerning установлено в значение auto, что в данном случае не имеет визуального эффекта, поскольку это значение по умолчанию.

<svg>
    <text x="2" y="50%" fill="#ef9235" font-size="100" font-family="'Raleway', sans-serif" font-weight="bold" kerning="auto">Oranges</text> 
</svg>

Отрегулировать расстояние между символами можно путём простого включения числовых значений: kerning="30".

Также допускается и значение inherit.

letter-spacing позволяет выбрать одно из трёх значений: normal, <length> или inherit. Числовые значения здесь имеют точно такой же эффект с интервалом, как и в случае с kerning. Свойство letter-spacing предназначено служить добавкой к интервалам, получившимся благодаря свойству kerning.

word-spacing

Свойство word-spacing определяет интервал между словами.

<svg>
    <text x="2" y="50%" fill="#ef9235" font-size="70" font-family="'Raleway', sans-serif" word-spacing="30">Oranges are Orange</text> 
</svg>

Другие допустимые значения здесь — normal (по умолчанию) и inherit.

text-decoration

Свойтсво text-decoration позволяет использовать underline, overline и line-through в тексте SVG.

В то время как порядок рисования не всегда оказывает эффект на визуальный вывод, тем не менее порядок имеет значение в случае с text-decoration. Все значения для декорирования текста, кроме line-through, должны быть применены до того, как текст будет закрашен и/или обведён; таким образом текст отобразится поверх декорирования.

line-through должно быть применено после того, как текст будет закрашен и/или обведён, тем самым декорирование отобразится поверх текста.

Вот так выглядят результаты применения text-decoration="underline" и text-decoration="line-through".

Текст по контуру

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

Продвигаясь в этой манипуляции еще дальше, <text> в SVG можно настроить так, чтобы он следовал за элементом <path>.

Элемент textPath

Элемент textPath – вот где находится вся магия этой функции. Хотя обычно SVG-текст размещается в элементе <text>, в данном случае он будет располагаться в элементе <textPath>, который как раз уже находится в элементе <text>.

Затем <textPath> обратится по id к выбранному контуру, который болтается в элементе <defs> и готов к использованию.

Базовый синтаксис:

<svg>
    <defs>
        <path d="<....>"/>
    </defs>
    <text>
        <textPath xlink:href="#testPath">Place text here</textPath> 
    </text> 
</svg>

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

После создания этого контура в программе для векторной графики сам SVG-код элемента <path> (который не будет включать в себя цвет, как показано выше) можно скопировать и вставить в элемент <defs> в <svg>, который также размещается в коде выше.

<svg>
    <defs>
        <path d="M3.858,58.607 c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628 c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449" />
    </defs>
    <text x="2" y="40%" fill="#765373" font-size="30" font-family="'Lato', sans-serif">
        <textPath xlink:href="#testPath">There are over 8,000 grape varieties worldwide.</textPath> 
    </text> 
</svg>

xlink:href

Атрибут xlink:href в <textPath> позволяет ссылаться на контур, по которому будет отображаться текст.

startOffset

Атрибут startOffset представляет величину смещения текста от начала контура. Значение «0%» указывает начальную точку контура, а значение «100%» — конечную.

Значение startOffset в примере ниже установлено в «20%», что заставляет текст начаться с 20% вдоль контура. Размер шрифта был специально уменьшен, чтобы предотвратить частичное выпадение текста из области просмотра при перемещении.

Если добавить цвет к обводке контура при помощи элемента <use>, станет понятнее, что именно здесь происходит.

<svg>
    <defs>
        <path d="M3.858,58.607 c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628 c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449" />
    </defs>
    <use xlink:href="#testPath" fill="none" stroke="#7aa20d" stroke-width="2"/>
    <text x="2" y="40%" fill="#765373" font-size="20" font-family="'Lato', sans-serif">
        <textPath xlink:href="#testPath" startOffset="20%">There are over 8,000 grape varieties worldwide.              
        </textPath> 
    </text> 
</svg>

Посмотреть демо можно здесь

Публикуется под лицензией Attribution-NonCommercial-ShareAlike 4. 0

P.S. Это тоже может быть интересно:

Обтекание элементов. как с помощью CSS отключить обтекание картинок текстом

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

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

Рассмотрим, как можно добиться такого эффекта в PowerPoint 2010 и Word 2016, чтобы буквы не скрывали находящийся за ними фон:

Прозрачные буквы в PowerPoint

Как известно, при обычных задачах для добавления текста используют установки шаблона презентации. Если же нужно добавить текст в другом месте, то незаменимым помощником является кнопка «Надпись» во вкладке «Вставка».

Первым делом нужно добавить стандартным способом, в том числе и используя картинки или изображения.
Далее в группе «Текст» находим кнопку добавления декоративного текста «Word Art» и выбираем один из стилей. В наборе присутствуют стили, которые изначально не имеют заливки. Но для демонстрации процесса будет выбран стиль с непрозрачной заливкой

После этого начинаем работать над содержанием и расположением объекта:

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

Активированный объект с текстом позволяет работать во вкладке «Формат», группе «Стили Word Art». Чтобы добиться эффекта прозрачности букв, нужно в «Заливка текста» выбрать «Нет заливки».

На этом этапе нужно отрегулировать толщину контура букв и их цвет. Сделать это можно с помощью кнопки «Контур текста», расположенной ниже «Заливка текста».

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

Как в ворде сделать прозрачные буквы

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

Вкладка «Дизайн» — группа «Фон страницы» — кнопка «Цвет страницы»

Финальное изображение, которое мы будем создавать:

В этом небольшом уроке вы узнаете, как создать стеклянный текст, используя стили слоя в Фотошоп. Давайте начнем!

Используемые материалы

Шаг 1 — Подготовка материалов и создание документа

Создайте новый PSD документ, 600 х 400 пикселей в RGB режиме разрешением 72 точки на дюйм с белым фоном. Теперь подготовим наши материалы. Установите шрифт TheNautiGal на ваш компьютер и при необходимости откройте.PAT файл для создания фона или используйте готовое фоновое изображение, чтобы не создавать фон. Вы можете пропустить создание фона и перейти сразу к шагу 3 этого урока.

Шаг 2 — Создание фона

Идём в Menu>Layer> Layer Styles> Blending Options (Меню>Слой>Стиль слоя>Параметры наложения) и используем настройки ниже. Вы также можете получить доступ к Параметрам наложения двумя более быстрыми способами. Первый и самый быстрый способ это дважды щелкнуть на слое в меню слоев.

Другой способ: Нажмите правой кнопкой мыши на слое в меню слоев и выберите Режимы наложения. Когда вы закончите со всеми настройками ниже, не забудьте нажать «OK» в окне настроек наложения! Если вы скачали шаблоны файлов — используйте шаблон № 31. Вы также можете оставить фон без наложения текстуры или использовать любую другую текстуру, которая подойдёт для светлого фона.

Внутренняя тень: Режим наложения — Линейный затемнитель, цвет #171718, непрозрачность 34%, угол -90, использовать глобальное освещение, смещение 96 пикс., стягивание 30%, размер 250 пикс., шум 8%.

Внутреннее свечение: Режим наложения: Осветление основы, непрозрачность 19%, шум 0%, цвет #ffffff, метод-мягкий, источник — из центра, стягивание 24%, размер 250 пикс., диапазон 50%, колебание 0%.

Наложение градиента: Режим наложения — Умножение, непрозрачность 100%, от #80b2a7 до #c7c8a2, стиль — радиальный, галочка «выровнять по слою», угол 0, масштаб 74%.

Наложение узора: Режим наложения — Нормальный, непрозрачность 100%, используйте текстуру из набора 72 Subtle Web Patterns, масштаб 100%.

Шаг 3 — Приступим к созданию первого слоя с текстом

Теперь мы можем начать делать наш текстовый эффект. Сначала выберите инструмент «текст» и измените шрифт на TheNautiGal, размером около 255 пунктов и метод сглаживания — резкий. Теперь введите текст где-то в центре изображения. Вы можете написать любое слово, но в этом уроке мы будем использовать слово «Wow».

Шаг 4

Этот первый слой с текстом будет расположен ниже всех текстовых слоев. Идём в Menu>Layer> Layer Styles> Blending Options (Меню>Слой>Стиль слоя>Параметры наложения) и используем настройки ниже для нашего текста.

Тень: Режим наложения — Линейный затемнитель, цвет #171718, непрозрачность 19%, угол — 52, снять галочку с «использовать глобальное освещение», смещение 11 пикс., стягивание 0%, размер 16 пикс., шум 0%.

Тиснение: Стиль-внутренний скос, метод-плавный, глубина 83%, направление — вверх, размер 3 пикс., смягчение 0 пикс., угол 0, снять галочку с «использовать глобальное освещение», высота 26, галочка на «сглаживание», режим подсветки — линейный осветлитель, цвет #ffffff, непрозрачность 28%, режим тени — линейный затемнитель, цвет #000000, непрозрачность 0%.

Шаг 5 — Создание и настройка 2-го слоя с текстом

Теперь дублируем слой с текстом. Выделите слой с текстом и перейдите Menu > Layer > Duplicate layer (Меню>Слой> Menu> Layer> Layer Style> Clear Layer Style (Меню>Слой>Стиль слоя> Menu> Layer> Layer Style> Blending Options (Меню>Слой>Стиль слоя>

Опять же, вы можете использовать быстрый доступ к параметрам наложения из шага 2 этого урока. Когда вы закончите со всеми настройками ниже, не забудьте нажать «OK» в окне настроек наложения! Этот слой с текстом будет в середине всех слоев. Так что сейчас он должна быть расположен выше первого слоя с текстом.
Установите непрозрачность заливки-0%.

Внутренняя тень: Режим наложения — Линейный затемнитель, цвет #171718, непрозрачность 24%, угол 180, снять галочку с «использовать глобальное освещение», смещение 1 пикс., стягивание 0%, размер 0 пикс., шум 0%.

Тиснение: Стиль-внутренний скос, метод-плавный, глубина 1000%, направление — вверх, размер 4 пикс. , смягчение 1 пикс., угол 0, снять галочку с «использовать глобальное освещение», высота 26, галочка на «сглаживание», режим подсветки-осветление основы, цвет #ffffff, непрозрачность 4%, режим тени — линейный затемнитель, цвет #000000, непрозрачность 10%.

Шаг 6

Создание и настройка последнего 3-го слоя с текстом. Мы почти у цели. Теперь нам нужно дублировать наш 2-ой слой с текстом. Выделите слой с текстом и перейдите Menu > Layer > Duplicate layer (Меню>Слой>Создать дубликат слоя) и назовите его как хотите. Теперь перейдите Menu> Layer> Layer Style> Clear Layer Style (Меню>Слой>Стиль слоя>Очистить стиль слоя), так как мы будем применять другой стиль для этого слоя. Наконец идите в Menu> Layer> Layer Style> Blending Options (Меню>Слой>Стиль слоя>Параметры наложения) и используйте настройки ниже для вашего текста.

Опять же, вы можете использовать быстрый доступ к параметрам наложения из шага 2 этого урока. Когда вы закончите со всеми настройками ниже, не забудьте нажать «OK» в окне настроек наложения! Это — главный слой с текстом и он должен быть расположен выше всех других слоев с текстом.

Установите непрозрачность заливки — 0%.

Тень: Режим наложения — Умножение, цвет #171718, непрозрачность 82%, угол -0, снять галочку с «использовать глобальное освещение», смещение 2 пикс., стягивание 0%, размер 8 пикс., шум 0%.

Внутренняя тень: Режим наложения — Линейный осветлитель, цвет #ffffff, непрозрачность 22%, угол — 90, снять галочку с «использовать глобальное освещение», смещение 1 пикс., стягивание 0%, размер 0 пикс., галочка на «сглаживание», шум 0%.

Тиснение: Стиль — внутренний скос, метод-плавный, глубина 1000%, направление — вверх, размер 16 пикс., смягчение 0 пикс., угол 0, снять галочку с «использовать глобальное освещение», высота 40, галочка на «сглаживание», режим подсветки — линейный осветлитель, цвет #ffffff, непрозрачность 18%, режим тени — линейный затемнитель, цвет #000000, непрозрачность 8%.

Обводка: Размер 1 пикс., положение — внутри, режим наложения-перекрытие, непрозрачность 27%, тип обводки — цвет, цвет #999999.

Окончательное изображение

Float — это свойство CSS для позиционирования элементов. Для того чтобы понять его назначение и происхождение, можно обратиться к полиграфическому дизайну. В компоновке при печати, изображения могут располагаться на странице так, чтобы текст «обтекал» их. Обычно это так и называется: «обтекание текстом».

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

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

Установка свойства float происходит следующим образом:

#sidebar { float: right; }

Всего есть 4 значения для свойства float . Left и right используются для соответствующих направлений. None (по умолчанию) — обеспечивает, что элемент не будет «плавать». И inherit , которое говорит, что поведение должно быть такое же, как и у родительского элемента.

Для чего можно использовать float?

Помимо обтекания текстом изображений, float может использоваться для создания макета всего сайта.

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

Такое же расположение объектов может быть достигнуто путём использования позиционирования. Объекту-контейнеру присваивается относительное (relative) позиционирование, а объекту с изображением — абсолютное (absolute). В этом случае аватар не повлияет на положение текста.

Отмена свойства float

Для float , родственное свойство — clear . Любой элемент, у которого установлено свойство clear , не будет поднят вверх, как от него ожидается, а отобразится ниже, после float-элементов. Возможно, пример на картинке объяснит лучше, чем слова.

В примере, сайд-бар прижат к правому краю (float: right;), а его высота меньше, чем область основного контента. Поэтому footer будет поднят выше, поскольку для него хватает высоты и этого требует поведение float . Чтобы исправить ситуацию, ему необходимо установить свойство clear , которое гарантирует, что элемент выведется ниже float-элементов.

#footer { clear: both; }

Свойство clear может принимать четыре значения. Both , наиболее используемое, применяется для отмены float каждого из направлений. Left и Right — используются для отмены float одного из направлений. None — по умолчанию, обычно не используется, за исключением случаев, когда необходимо отменить значение clear . Значение inherit было бы пятым значением, но оно странным образом не поддерживается в Internet Explorer. Отмена только левого или правого float , встречается гораздо реже, но, безусловно, имеет свои цели.

Большой коллапс

Ещё одна удивительная вещь при работе со свойством float — это то, что его использование может влиять на родительский элемент. Если такой элемент содержит только float-элементы, то он буквально схлопывается, то есть его высота равна нулю. Это не всегда заметно, если у родительского элемента не установлен какой-либо видимый фон.

Такое схлопывание выглядит нелогичным, однако альтернатива ещё хуже. Рассмотрим такой пример:

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

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

Способы отмены float

Если вам известно, что следом после float-элементов, всегда будет выводится какой-либо другой элемент (например футер), то вам достаточно ему установить свойство clear: both; , как в примере выше, и заниматься дальше своими делами. Это идеальный вариант, поскольку он не требует каких-либо хаков, или дополнительных элементов. Конечно не всё в нашей жизни так гладко и бывают случаи когда такого способа не достаточно. Поэтому необходимо иметь несколько дополнительных способов в своём арсенале.

• Метод пустого div -а. Используется, в буквальном смысле, пустой div . . Иногда на его месте может использоваться элемент
  или какой-нибудь другой, но div используется чаще всего, потому что по умолчанию у него нет никакого стиля, нет особого назначения и вряд ли к нему применён общий стиль через CSS. Этот метод может не нравится любителям семантически чистой разметки, поскольку присутствие пустого div -а не имеет контекстного значения и размещён на странице только из соображений дизайна. Конечно, строго говоря, они правы, но он делает свою работу и никому не вредит.
• Метод overflow . Основан на том, что родительскому элементу необходимо установить свойство overflow . Если значение этого свойства установлено в auto или hidden , то родительский элемент увеличится, чтобы вместить в себя все float-элементы. Этот метод выглядит более семантически правильным, поскольку не требует дополнительных элементов. Однако, если вы соберётесь использовать ещё один div , только для того чтобы использовать этот подход (имеется в виду родительский div), то это будет то же самое, что предыдущий пример с добавлением пустого div -а. Кроме того, помните, что свойство overflow предназначено для других целей. Будьте аккуратны и не допустите, что часть контента у вас пропадёт, либо появятся никому не нужные скролл-бары.
• Метод простой очистки. Этот метод использует замечательный псевдо селектор CSS — :after. Гораздо лучше чем использование overflow для родительского элемента. Вы просто устанавливаете ему дополнительный класс, объявленный, например, так: .clearfix:after { content: «.»; visibility: hidden; display: block; height: 0; clear: both; } Этот способ добавляет незаметное для глаз содержимое и отменяет float . И, кстати, это не вся история о том как дополнительный код должен быть использован в старых браузерах.

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

Для более лучшего визуального представления было бы неплохо объединить подобные блоки. Например мы хотим, чтобы каждый тип начинался с новой строки, в нашем случае тип элемента определяется цветом. Мы можем использовать метод с overflow или «метод простой очистки», если у каждой группы есть свой элемент-контейнер. Или же мы можем использовать метод пустого div -а между каждой из групп. Три элемента-контейнера, или три пустых div -а, что лучше для вашей задачи — решать вам.

Проблемы с float

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

Альтернативы float

Если вам необходимо обтекание картинки текстом, то альтернатив нет. Но для макета страницы, определённо есть выбор. Существуют очень интересные подходы, в которых комбинируется гибкость float с мощью абсолютного позиционирования. В CSS3 есть, так называемый, Модуль разметки шаблона (Template Layout Module) , который в будущем предоставит достойную альтернативу float.

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

Слева правильно, справа — нет

Дополнительное условие: ширина ни текста, ни картинки строго не определена. При отсутствии картинки текст занимает всю отведенную ширину.

Решение

Текстовый блок

Пробуем написать стили. С левой колонкой все ясно:

Photo { float: left; /* задаем обтекание */ margin:10px; /* отступ для красоты */ display:inline; /* для IE6, чтоб отступ слева не удвоился */ }

Теперь рисунок стал слева, а текст обошел его справа. Но если текста больше, он будет «подныривать» под рисунок (см. картинку выше), а этого-то нам и не нужно.

Первое, что приходит в голову — «зафлоатить» и текст. Но в этом случае, если не прописать ширину текст упадет под рисунок!

float:left/right будет требовать ширину — иначе ничего не получиться!

Думаем дальше… Хорошим решением может показаться.description{ : XXXpx}. Действительно, в некоторых ситуациях такой вариант проходит. Например, если размер картинки все-таки задан. Предположим, это резиновый блок новостей. Картинка не может быть шире, скажем 200px, а уже текст тянется и занимает всю оставшуюся ширину.

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

Запретить обтекание можно просто добавив :hidden; для текстовой колонки. Тем самым мы установим для нее новый контекст форматирования (подробнее эта тема скоро будет раскрыта).

Единственный браузер, который среагирует на это неправильно — это конечно IE6. Специально для него колонке устанавливаем , например «флоатим» (ширину при этом задавать не понадобится).

Итак, решение поставленной задачи выглядит так:

Photo { float: left; /* задаем обтекание */ margin:10px; /* отступ для красоты */ display:inline; /* для IE6, чтоб отступ слева не удвоился */ } .description{ overflow:hidden; } * html .description{ float:left; }

Как всегда, в боевых условиях вместо используем .

Последнее обновление: 21.04.2016

Как правило, все блоки и элементы на веб-странице в браузере появляются в том порядке, в каком они определены в коде html. Однако CSS предоставляет специальное свойство float , которое позволяет установить обтекание элементов, благодаря чему мы можем создать более интересные и разнообразные по своему дизайну веб-страницы.

Это свойство может принимать одно из следующих значений:

left: элемент перемещается влево, а все содержимое, которое идет ниже его, обтекает правый край элемента

right: элемент перемещается вправо

none: отменяет обтекание и возвращает объект в его обычную позицию

При применении свойства float для стилизуемых элементов, кроме элемента img, рекомендуется установить свойство width.

Итак, представим, что нам надо на странице вывести слева от основного текста изображение, справа должен быть сайдбар, а все остальное место должно быть занято основным текстом статьи. Определим интерфейс страницы сначала без свойства float:

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

«Нет, жизнь не кончена в 31 год, – вдруг окончательно, беспеременно решил князь Андрей…

В данном случае мы получим последовательное размещение элементов на странице:

Теперь на той же странице применим свойство float , изменив стили следующим образом:

Image { float:left; /* обтекание слева */ margin:10px; margin-top:0px; } .sidebar{ border: 2px solid #ccc; background-color: #eee; width: 150px; padding: 10px; margin-left:10px; font-size: 20px; float: right; /* обтекание справа */ }

Соответственно изменится и размещение элементов на странице:

Элементы, к которым применяется свойство float , еще называют floating elements или плавающими элементами.

Запрет обтекания. Свойство clear

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

Для запрета обтекания элементов в CSS применяется свойство clear , которое указывает браузеру, что к стилизуемому элементу не должно применяться обтекание.

Свойство clear может принимать следующие значения:

left: стилизуемый элемент может обтекать плавающий элемент справа. Слева же обтекание не работает

right: стилизуемый элемент может обтекать плавающий элемент только слева. А справа обтекание не работает

both: стилизуемый элемент может обтекать плавающие элементы и относительно них смещается вниз

none: стилизуемый элемент ведет себя стандартным образом, то есть принимает участие в обтекании справа и слева

Например, пусть на веб-странице будет определен футер:

Наличие обтекания будет создавать некорректное отображение, при котором футер смещается вверх:

Изменим стиль футера:

Footer{ border-top: 1px solid #ccc; clear: both; }

Теперь футер не будет обтекать изображение, а будет уходить вниз.

Эксперименты с обводкой в CSS. Как сделать несколько границ border у элемента html

3.5 из 5

Как вы думаете, можно ли с помощью пары тегов и чистого CSS сделать масштабируемый треугольник? А пятиугольник? А вот такую звезду? Думаю, многие считают, что нет. На самом деле можно.

Так вот, сегодня у нас пост-эксперимент. Мы будет играть с известным всем свойством CSS — border (и все, которые к нему относятся). В ходе эксперимента мы посмотрим, как сделать несколько простых многоугольников, звезду и рассмотрим один случай, где на практике можно использовать эти техники. Поехали!

Простые геометрические фигуры

Итак, начнем с простых примеров. Знаете, как нарисовать треугольник только средствами HTML и CSS? А вот так:

HTML

CSS

Trapezoid,
.polygon { display: -moz-inline-block; }

Polygon,
.trapezoid { margin:0; padding: 0; background: none; }

Polygon { width: 10em; height: 10em; border: none; display: inline-block; text-align: center; }
. trapezoid {
display: inline-block; width: 1px; height: 0; margin: 0 auto;
border-left: 5em solid transparent; border-right: 5em solid transparent;
}

Polygon .aa { border-bottom: 10em solid; border-top: none; }

Polygon.r2 { height: 0em; }

Polygon.r3 { height: 8.66em; }
.polygon.r3 .trapezoid { border-width: 8.66em 5em; }

div.eg { width: 10em; background: #FFF; margin: 0 0; padding: 1em; }
div.eg .polygon { display: block; margin: 0 auto; }

R3 { color: red; font-size: 0.5em; }

Звезда

HTML

CSS

#star span,
#star{
display: block;
}

#top{
width: 0;
height: 0;
margin: auto;
border-right: 4.64em solid transparent;
border-left: 4.64em solid transparent;
border-bottom: 14.27em solid;
}

#center{
width: 5.7em;
border-right: 4.65em solid transparent;
border-left: 4. 65em solid transparent;
border-top: 3.36em solid;
height: 0;
position: absolute;
top: 5.46em;
left: 0;
z-index: 100;
text-align: center;
}

#bottom{
position: absolute;
bottom: 0;
left: 2.852em;
border-right: 4.635em solid transparent;
border-left: 4.635em solid transparent;
border-bottom: 3.4em solid #fff;
width: 0;
height: 0;
}

#center span{
margin-top: -2em;
color: #000;
font-weight: bold;
}

a#star:hover #center span{
color: #fff;
background-color: transparent;
}

a#star{
color: #f90;
background-color: transparent;
}
a#star:hover{
color: #fc3;
background-color: transparent;
}

Еще немного примеров

• Елка и необычная верстка от Эрика Мейера;
• Плитка и менюшка от главного технолога Технократи;

Влад Мержевич

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство 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. Контурный текст

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

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

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

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

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

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

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

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

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

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

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

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

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

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

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

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

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

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

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

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

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

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

Свечение

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

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

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

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Размытие

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

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

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

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

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

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

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

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

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

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

Приветствую всех читателей текущей публикации! Сегодня мы разберем с вами, как создается обводка текста css-средствами. Я расскажу вам, какие на данный момент существуют инструменты для реализации обводки вокруг текстового контента, как все это работает в различных браузерах и конечно же приведу конкретные примеры. А теперь давайте приступать к делу!

Обратимся к привычным инструментам

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

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

Преимущество текущего инструмента состоит в том, что:

• он привычен девелоперам в использовании;
• корректно отображается во без исключения;
• прост в использовании;
• позволяет создавать различные эффекты для контента.

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

Однако в таком случае обводку практически не видно. Поэтому приготовьтесь к тому, что в данном придется создавать несколько слоев:

text-shadow: 0 0 2px #010010, 0 0 3px #010010, 1px 1px 2px #010010, 2px 2px 2px #010010, 3px 3px 1px #010010;

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

Новый инструмент для решения поставленной задачи

Среди свойств стилевых таблиц css3 появилось новое, имя которому -webkit-text-stroke . Названное свойство работает только в браузерах, созданных на движке Webkit . А значит, к сожалению, оно не будет отображаться в Firefox и Internet Explorer.

Хочу вас сразу предупредить, что текущий инструмент находится в так называемой экспериментальной стадии. Его вы не найдете даже в спецификациях W3C. Хотя ранее он был описан под наименованием text-outline, а после удален из документации.

Работать с -webkit-text-stroke достаточно просто, так как он функционирует как и border . Для установки определенного цвета к указанному выше названию добавляется -color, а для определения толщины – -width. Однако, как и в border, можно использовать сокращенный вид описания стилей. Т.е. указать вначале толщину обводки, а после – ее цвет. Для лучшего понимания материала давайте разберем пример.

Как вы видите, в этом случае обводка выглядит аккуратно и создается намного проще.

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

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

Несколько слов о генераторах

Если вы не знаете какой код стоит писать для реализации того или иного дизайна, то воспользуйтесь онлайн-генераторами. В качестве примера могу привести ссылку http://protocoder.ru/css/strokeTextGen . Перейдя по ней, вы сможете сгенерировать определенный вид контура для текста, а также в конструкторе ниже посмотреть полученный код css.

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

С уважением, Роман Чуешов

Прочитано: 79 раз

Приветствую вас, дорогие читатели. Сегодня я вам расскажу и покажу, как можно сделать в css обводку текста. Все манипуляции мы будем проводить исключительно со свойством text-shadow .

Тонкая четкая обводка

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

Текст с обводкой

Тут видно, что блок с текстом имеет класс text-dec. Именно по нему мы будем обращаться к нашему элементу в css, применяя к нему нужные свойства. Итак, как же делается тоненькая обводка:

Text-dec{ font-size: 50px; color: yellow; text-shadow: 1px 1px 0 black, -1px -1px 0 black }

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

Свойство text-shadow позволяет добавить к тексту тень, теней можно добавлять сколько угодно, через запятую. Синтаксис свойства таков:

Text-shadow: смещение по горизонтали | по вертикали | размытие | цвет

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

Размытая обводка

Другой подход заключается в том, чтобы вообще не задавать смещение, но определить размытие – тогда текст тоже будет как бы обведен, но не четко. Добавим такой же точно текст в html, но только стилевой класс задайте другой – text-dec2:

Text-dec2{ font-size: 50px; color: blue; text-shadow: 0 0 7px red; }

Это выглядит так:

Жирная обводка

Это реализовать труднее, так как слишком сильное смещение теней может привести к нечитаемости текста. И все же определенного эффекта добиться можно, хотя для этого придется добавить гораздо больше теней, чем в предыдущих случаях. Соответственно, добавьте в html новые текстовые фрагменты с классами text-dec3 и text-dec4 . И вот такие для них стили:

Text-dec3{ font-size: 50px; color: yellow; text-shadow: 1px 1px 0 black, -1px -1px 0 black, 2px 2px 0 black, -2px -2px 0 black, 3px 3px 0 black, -3px -3px 0 black, 4px 4px 0 black, -4px -4px 0 black } .text-dec4{ font-size: 50px; color: yellow; text-shadow: -1px 1px 0 black, 1px -1px 0 black, -2px 2px 0 black, 2px -2px 0 black, -3px 3px 0 black, 3px -3px 0 black, -4px 4px 0 black, 4px -4px 0 black }

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

Еще более жирная обводка со всех сторон

Дальше — сложнее. Я лично не знал, как нормально реализовать обводку со всех сторон, но тут наткнулся в интернете на генератор text-shadow, который позволяет в визуальном режиме настроить тень, а потом нужно просто скопировать ее код. Вот ссылка на генератор.
С его помощью я смог сделать вот такую тень:

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

CSS пока не всесилен

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

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

Рекомендуем также

Урок 08. Обводка контуров объекта в CorelDraw (Scale with image, обводка, контур, Outline Pen Dialog, обводка текста)

Как правило, обводка присутствует при начальном создании объекта, фигуры или просто прямой линии. На первых шагах работы создаётся контур задуманного элемента, который не имеет заливки, но рисуется уже с обводкой. Изначально она имеет стандартную толщину 0,216pt (пункта) или «Hairline», но её можно менять по своему усмотрению. Обводку можно использовать для подчеркивания текста, для увеличения толщины создаваемого объекта и т.д.

Оглавление

1. Настройка параметров обводки
2. Рисуем фигуры
3. Меняем толщину обводки
4. Масштабирование
5. Обводка за контуром
6. Обводка как самостоятельный объект

Настройка параметров обводки

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

1.1 Создаем новый документ (File > New). Выбираем Outline Pen Dialog (F12) в левой панели инструментов.

1.2 На экране появится окошко, в котором мы должны поставить галочку напротив пункта Graphic и нажать OK.

1.3 Теперь в окошке Outline Pen мы должны установить все настройки так, как показано на рисунке. Не забывайте поставить галочку около пункта Scale with image, это позволит вам избежать проблем с обводкой при масштабировании нашего рисунка.

Рисуем фигуры

2.1 Теперь мы можем изобразить то, что нам хочется. Нарисуем большой чёрный прямоугольник инструментом Rectangle Tool(F6). Затем поверх него создадим круг при помощи инструмента Ellipse Tool (F7). Закрасим наш круг оранжевым цветом, а контур сделаем белым (для этого нам нужно щелкнуть правой кнопкой мыши на палитре с цветами).

2.2 После этого напишем большую букву А при помощи инструмента Text Tool (F8). Сделаем букву белой, а контур для неё черным.

Меняем толщину обводки

3.1 Теперь мы можем изменить толщину нашей обводки. Это можно сделать для всех объектов сразу и одинаково, а можно сделать для каждого в отдельности и разную. В первом случае нам нужно выделить все объекты при помощи мышки и открыть меню Outline Pen (см. пункт 1.1 — 1. 3). В следующем примере мы рассмотрим второй вариант. Выделим круг, щелкнув на нем мышкой, и в верхнем меню выберем подходящую толщину линии, например 2,0 mm.

3.2 Зададим толстую обводку нашему тексту, то есть букве А. Изначально текст не имеет контурной обводки, однако же мы сделали ее черной и хотим увеличить ее толщину. Для этого нам нужно выделить нашу букву, кликнув на нее, и открыть меню Outline Pen (см.пункт 1.1 — 1.3). В настройках обводки зададим ей толщину 2,5 mm (значение можно вписать от руки). Мы получили толстый черный контур вокруг нашей буквы.

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

Масштабирование

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

4.2 Уменьшим наш рисунок в несколько раз. Картина изменилась. Наш круг остался правильным, так как мы указали для него в самом начале работы правильное масштабирование, а вот буква А изменилась неправильно. Ее обводка осталось такой же, как при большом изображении 2,5 mm.

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

Выделяем нашу букву А, опять идем в меню Outline Pen (см. пункт 1.1) и ставим галочку около пункта Scale with image.

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

Обводка за контуром

5.1 Мы научились правильно масштабировать наши объекты, теперь попробуем сделать обводку буквы А очень толстой. Не меняя размеров нашей уменьшенной картинки, зададим обводку буквы 2,0 mm или больше. Мы видим, что большая часть буквы или даже вся она целиком скрылась за обводкой.

5.2 Выделяем нашу букву А и опять идём в настройки обводки (см.пункт 1.1). В меню ставим галочку рядом с пунктом Behind fill. Обводка с атрибутом Behind fill (заливка выше абриса) на половину толщины скрылась за заливкой контура нашей буквы А. Буква стала выделенной на фоне, а форма ее осталась правильной.

Обводка как самостоятельный объект

6.1 Видоизменять обводку мы научились, но ее можно также сделать отдельным объектом, то есть отделить от контура рисунка. Возьмем для примера наш круг, который рисовали в самом начале урока. Он уже имеет очень толстую обводку. Выделяем его и идем в пункт меню (Arrange > Convert Outline to Object) (Ctrl+Shift+Q).

6.2 Кликните на пустом месте экрана, а затем щелкните на белом контуре нашего круга. Вы можете перетащить его и увидеть, что он стал самостоятельным объектом.

Свойство схемы CSS

Пример

Установите контур вокруг элемента

и элемента

:

h3 {
контур: 5 пикселей, пунктирный зеленый;
}

div. a {
контур: синий пунктир 2 пикселя;
}

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

---

Определение и использование

Контур — это линия, которая проводится вокруг элементов за пределами границ, чтобы сделать элемент «выделяющимся».

Контур Свойство является сокращенным свойством для:

Если контур-цвет опущен, применяемый цвет будет цветом текста.

Примечание: Очертания отличаются от границ! В отличие от границы, контур рисуется за пределами границы элемента и может перекрывают другой контент. Кроме того, контур НЕ является частью элемента размеры; общая ширина и высота элемента не зависит от ширины наброски.

Значение по умолчанию:	средний инверт цветной
Унаследовано:	нет
Анимируемое:	да, посмотреть отдельные свойства .Прочитать о animatable Попытайся
Версия:	CSS2
Синтаксис JavaScript:	объект . style.outline = «# 0000FF, пунктирная 5px» Попытайся

---

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Объект
контур	1.0	8,0	1,5	1,2	7,0

---

---

Синтаксис CSS

контур: ширина контура стиль контура цвет контура | начальный | наследование;

Стоимость недвижимости

---

Связанные страницы

Учебник

CSS: Схема CSS

Ссылка на HTML DOM: свойство схемы

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

нестандартный

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

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

 
-webkit-text-stroke: темно-синий 4px;
text-stroke: темно-синий 4px;


-webkit-text-stroke: наследовать;
-webkit-text-stroke: начальный;
-webkit-text-stroke: не задано;
текстовый штрих: наследовать;
text-stroke: начальный;
text-stroke: не задано;  

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

Значения

  <длина> || <цвет>, где <цвет> =  |  |  |  |  | <имя-цвета> | текущий цвет | <цвет устаревшей системы> где  = rgb (<процент> {3} [/ <альфа-значение>]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, <альфа-значение>?)  = hsl (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?), где <альфа-значение> = <число> | <процент> <оттенок> = <число> |   

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

HTML

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

CSS

  #example {
  размер шрифта: 3em;
  маржа: 0;
  -webkit-text-stroke: 2px красный;
}  

Результат

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

CSS | Граница шрифта — GeeksforGeeks

CSS | Граница шрифта

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

Метод 1: Использование свойства text-shadow: Свойство text-shadow используется для добавления границы шрифта или тени к тексту.
Синтаксис:

 тень текста: h-тень v-тень радиус размытия цвет | нет | начальный | наследование;
 

Значения собственности:

• h-shadow: Устанавливает горизонтальную тень вокруг шрифта.
• v-shadow: Устанавливает вертикальную тень вокруг шрифта.
• blur-radius: Устанавливает радиус размытия вокруг шрифта.
• цвет: Устанавливает цвет вокруг шрифта.
• нет: Ничего не ставит вокруг шрифта.
• initial: Устанавливает для границы шрифта значение по умолчанию.
• наследовать: Он наследует значения свойств от своих родительских значений.

Возвращаемое значение: Возвращает границу / тень шрифта вокруг текста.
Пример 1: В этом примере свойство text-shadow используется для создания тени к тексту.

HTML

< html > < Головка > < титул > CSS свойство text-shadow название > < стиль > h2 { тень текста: 0 0 3px # FF0000, 0 0 5px # 0000FF; } стиль > Головка > < корпус > < h2 > GeeksforGeeks h2 > корпус > html >

Выход:

Пример 2: В этом примере свойство text-shadow используется для создания текста с рамкой.

HTML

< html > < Головка > < титул > CSS свойство text-shadow название > < стиль > .GFG { цвет: белый; размер шрифта: 50 пикселей; тень текста: -1px 1px 0 # 000, 1 пикс. 1 пикс. 0 # 000, 1 пикс. -1 пикс. 0 # 000, -1px -1px 0 # 000; } стиль > Головка > < корпус > < p class = "GFG" > GeeksforGeeks p > корпус > html >

Выход:

Метод 2: Использование свойства text-stroke: Свойство text-stroke используется для добавления обводки к тексту. Это свойство можно использовать для изменения ширины и цвета текста. Это свойство поддерживается с помощью префикса -webkit-.
Пример: В этом примере свойство text-stroke используется для создания текста с рамкой.

HTML

< html > < Головка > < титул > CSS свойство text-stroke название > < стиль > .GFG { цвет: белый; размер шрифта: 50 пикселей; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: черный; } стиль > Головка > < корпус > < p class = "GFG" > GeeksforGeeks p > корпус > html >

Выход:

Создание эффекта контура текста

- пользователем Кирупа | 25 марта 2017

За последние несколько лет в CSS было добавлено множество интересных вещей, чтобы текст выделялся и выглядел великолепно. Одна из таких классных вещей - это возможность отображать только текстовый контур, не полагаясь на какие-либо хаки. Взгляните на следующий пример:

Знаете ли вы, что ваш отпечаток пальца уникальный? Конечно, да!

Обратите внимание, что Конечно, вы сделали! Текст не имеет цвета заливки. Его внешний вид целиком состоит из контура. Раньше сделать что-то подобное было невозможно. Это уже не так, и мы рассмотрим, как создать этот эффект в этом уроке.

и далее!

Встречайте свойство CSS text-stroke

Вы создаете этот эффект контура, полагаясь на свойство -webkit-text-stroke, которое принимает в качестве значений ширину и цвет:

 .outline {
-webkit-text-stroke: 2px голубой;
} 

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

.

 .outline {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: голубой;
} 

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

Собираем все вместе

В предыдущем разделе мы рассмотрели свойство -webkit-text-stroke и его использование. В этом разделе мы рассмотрим все это как часть примера ... того же примера, с которого мы начали этот урок!

Для начала создайте новый документ HTML и добавьте следующую разметку:

 





<стиль>
тело {
цвет фона: # 0F1020;
отступ: 100 пикселей;
}

#textContainer p {
семейство шрифтов: без засечек;
размер шрифта: 64px;
font-weight: 100;
цвет: # E6E8E6;
маржа: 0;
}





 Знаете ли вы, что ваш
отпечаток пальца уникальный?
 Конечно!  
 

 

После того, как вы добавили всю эту разметку, просмотрите, что у вас есть в браузере. Вы должны увидеть что-то вроде следующего:

Посмотрите на разметку, отвечающую за текст, который мы видим:

 

 Знаете ли вы, что ваш
отпечаток пальца уникальный?
 Конечно!  
 

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

 #textContainer .outline {
-webkit-text-stroke-width: 1px;
-webkit-текст-обводка-цвет: # AFFC41;
} 

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

Если вы хотите отображать только контур текста, все, что вам нужно сделать, это установить свойство цвета CSS нашего текста на прозрачный :

 #textContainer. контур {
-webkit-text-stroke-width: 1px;
-webkit-текст-обводка-цвет: # AFFC41;
цвет: прозрачный;
} 

После этого наш Конечно же сделал! Текст будет отображаться только с контуром!

Работа со старыми браузерами

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

 #textContainer .outline {
цвет: # E6E8E6;
-webkit-text-fill-color: прозрачный;
-webkit-text-stroke-width: 1px;
-webkit-текст-обводка-цвет: # AFFC41;
} 

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

Заключение

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

Есть вопрос или просто хотите пообщаться? Оставьте комментарий ниже или загляните на наши форумы (на самом деле это одно и то же!), Где кучка самых дружелюбных людей, с которыми вы когда-либо столкнетесь, будут рады вам помочь!

Когда Кирупа не занят тем, что пишет о себе от третьего лица, он практикует социальное дистанцирование… даже в своих профилях в Twitter, Facebook и LinkedIn.

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

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

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

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

Здесь вы можете выбрать цвета: HTML-цвета.

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

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

Синтаксис¶

  text-stroke: length | цвет | начальная | наследовать;  

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

  

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

Попробуйте сами »

Результат¶

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

  

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

Попробуйте сами »

Values¶

---

Практикуйте свои знания

CSS: тени текста

CSS: тени текста

См. Также указатель всех подсказок.

На этой странице:

Тени текста

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

h4 {тень текста: 0.1em 0.1em # 333}
 

Добавляет темно-серую (# 333) тень немного правее (0,1em) и вниз (0,1em) относительно обычного текста. Результат выглядит так:

Ноак и барсикл

Тень нечеткого текста

Простейшая форма свойства text-shadow состоит из двух частей: цвет (например, # 333 выше) и смещение (0,1 мкм 0,1 мкм в пример выше). Это приводит к резкой тени на указанном компенсировать. Но смещение также можно сделать нечетким, в результате или менее размытая тень.

Величина нечеткости дана как другое смещение. Вот два линии, одна с небольшой размытостью (0,05em) и одна с большим количеством (0.2em):

h4.a {text-shadow: 0.1em 0.1em 0.05em # 333}
h4.b {text-shadow: 0.1em 0.1em 0.2em черный}
 

«Что скажешь?» сказал Великобритания

Чтобы видеть яснее

Читаемый белый текст

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

h4 {цвет: белый}
h4.a {цвет: белый; text-shadow: черный 0.1em 0.1em 0.2em}
 

Без тени:

Что в этом для меня?

С тенью:

С лопатой и апельсинами

Множественные тени

У вас также может быть более одной тени. В общем, это выглядит довольно странно:

h4 {тень текста: 0.2em 0,5em 0,1em # 600,
      -0.3em 0.1em 0.1em # 060,
      0.4em -0.3em 0.1em # 006}
 

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

h4.a {text-shadow: -1px -1px белый, 1px 1px # 333}
h4.b {text-shadow: 1px 1px белый, -1px -1px # 444}
 

Я, Август (вы знаете кто)

Это, конечно, доплата

Это немного опасно, как вы можете видеть, если ваш браузер не поддержка 'text-shadow'.Фактически, цвета фона и текст в этом примере почти такой же (#CCCCCC и # D1D1D1), поэтому без теней почти нет контраста.

Рисование букв в виде контуров

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

h4 {text-shadow: -1px 0 черный, 0 1px черный,
      1px 0 черный, 0 -1px черный}
 

Вы краснеете?

Кот, яблоко и т.

Д.

Это не идеальный план, и в настоящее время (август 2005 г.) обсуждение вопроса о том, должен ли CSS иметь отдельный свойство (или, возможно, значение для 'text-decoration'), чтобы улучшить очертания.

Неоновое свечение

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

h4.a {text-shadow: 0 0 0.2em # 8F7}
h4.b {text-shadow: 0 0 0.2em # F87, 0 0 0.2em # F87}
h4.c {text-shadow: 0 0 0.2em # 87F, 0 0 0.2em # 87F,
        0 0 0.2em # 87F}
 

С изюминкой лучшего

Нет ничего лучше

Действительно, совершенно верно, мистер М

20 лучших бесплатных контурных шрифтов

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

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

Нет недостатка в контурных шрифтах, доступных в Интернете. Что еще лучше, вы можете бесплатно найти высококачественные контурные шрифты и использовать их как в коммерческих, так и в личных проектах.

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

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

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

Библиотека 3am имеет два стиля и в общей сложности 273 символа. Он имеет многоязычную поддержку и содержит прописные буквы, символы и цифры.Шрифт бесплатный для личного и коммерческого использования.

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

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

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

The Fakedes - это более округлый шрифт с засечками, который идеально подходит для логотипов или брендов, которым требуется более смелый вид. Шрифт включает прописные и строчные буквы, символы, числа и поддерживает многоязычный интерфейс.

Семейство шрифтов Gibsons включает 20 шрифтов и три толщины. Он подходит для различных проектов в 4 разных стилях. Этот шрифт входит в вашу подписку на Envato Elements.

The Frontage - это многослойная система шрифтов с 5 различными стилями. Шрифт можно использовать в различных проектах, и вы можете смешивать и сочетать разные стили для создания уникального дизайна.

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

Brixton Sans выпускается в двух вариантах: заливка и контур. Контурная версия - отличный выбор для любого брендового или дизайнерского проекта, который требует уникального и изысканного внешнего вида.Шрифт доступен как часть вашей подписки на Envato Elements.

Шрифт Paralines - это шрифт с заглавными буквами в ретро-футуристическом стиле. Его можно использовать как в коммерческих, так и в личных проектах.

Шрифт Ostrich Sans можно использовать в личных и коммерческих проектах. Шрифт состоит из прописных букв, символов и цифр.

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

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

Шрифт Easy Outline можно использовать в личных и коммерческих проектах. Он тонкий и высокий, поэтому идеально подходит для модных дизайнерских проектов.

Этот шрифт - отличный выбор для неоновых вывесок. Его можно бесплатно скачать как часть вашей подписки на Envato Elements.

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

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

Этот шрифт станет идеальным выбором для любого проекта, требующего деревенского и выдержанного стиля. Вы можете скачать его как часть подписки на Envato Elements. Шрифт включает 20 файлов шрифтов и 3 различных стиля шрифтов.

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

Montana - это округлый шрифт, подходящий для демонстрации. Он имеет как прописные, так и строчные буквы.

Попробуйте шрифт Darling Bloom, если вы ищете контурный шрифт, нарисованный вручную. Он идеально подходит для любого элегантного проекта или женственного бренда. Шрифт является частью подписки Envato Elements.

Если вам нужен простой контурный шрифт, Batter Up подойдет. Он имеет уникальный внешний вид и содержит только прописные буквы.Шрифт бесплатный для личного и коммерческого использования.

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

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

Как следует из названия, этот шрифт имеет геометрический рисунок, нарисованный вручную.Отличный выбор для любого ретро-проекта. Шрифт бесплатный для личного использования.

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

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

The Altero - еще один дуэт шрифтов с однотонным и контурным шрифтом.Это бесплатно для личного и коммерческого использования. Он поставляется с прописными буквами, цифрами и знаками препинания.

---

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

.