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

Обводка текста и поворот на CSS (text outline + rotate CSS)

В одном новом проекте нужно сделать интересный эффект для текста. Такой, как часто делают на рекламных плакатах (выпуклый текст, обводка и поворот)
Дизайнер-то сделал (чё ему делать-то) 🙂
С вёрсткой проблема была в том, как сделать так, чтобы текст был текстом, а не картинкой, со всей своей выпуклостью и обводкой.

Пример

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

text-outline нам поможет

Для начала отметим, что как таковой более-менее кроссбраузерной обводки текста нет. Есть, конечно, text-outline:

Но он не работает ни в одном из современных браузеров (очевидно только в браузерах будующего).

Сделаем обводку

Давай подумаем, что в CSS есть такого, что работает в большинстве браузеров?
text-shadow!
Сделаем сразу несколько (конкретно 4) однопиксельных тени, по всем сторонам текста, и будет нам обводка.

Получится вот так вот:

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

Осталась выпуклость текста:

Выпуклость текста

Если уж мы сделали обводку на text-shadow, то почему бы не сделать и выпуклость? Тем более, что это реально!

Добавит выпуклость текста (свет падает справа-сверху), и угол естественно можно менять. Размер тени, для моего текста максимальный (3px) но возможно для другого кегля и шрифта всё будет работать по-другому.

Поворот текста

Да, тут, конечно, обойдёмся без text-shadow 🙂
Работать будет на WebKit’e, за то интереснее, чем обычный текст:

Угол, естественно, можно поставить свой.

Кстати, о тексте в примере 🙂 Ну пусть бросит камень в свой монитор тот, кто скажет, что не любит эротику!
эротика — это источник вдохновения, радости и жизненной энергии.

Добавить обводку текста — снаружи — с помощью CSS?

Изображение 33437

Я хочу добавить обход вокруг него, что означает черную рамку вокруг этого текста.
I Googled и нашел -webkit-text-stroke , и придумал:

Однако эффект не тот, который я хочу:

Изображение 33438

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

Как я могу сделать штрих вне текста?

PS: требуется поддержка только webkit

7 ответов

-webkit-text-stroke не поддерживает размещение штриха на внешней стороне текста

поскольку этот CSS-Tricks atricle объясняет:

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

Что относительно SVG?

Ну, похоже, он также помещает штрих внутрь —

Однако

вы можете смоделировать этот эффект (в зависимости от того, что вам нужно):

Добавить обводку вокруг текста-снаружи-с помощью css?

enter image description here

Я хочу добавить обводку вокруг него, то есть черную рамку вокруг этого текста.
Я погуглил, нашел -webkit-text-stroke и придумал:

Однако эффект-это не то, чего я хочу:

enter image description here

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

Как я могу сделать обводку вне текста?

PS: требуется только поддержка webkit

9 ответов

Пожалуйста, посмотрите здесь с помощью Chrome: http://jsfiddle.net/u8BdB / Почему webkit-text-stroke покрывает также и цвет шрифта? Я хотел бы поместить обводку снаружи текста, похоже, что она предполагается внутри, поэтому она покрывает цвет шрифта :/. любая помощь была оценена с благодарностью.

Для плавного внешнего штриха, эмулируемого текстовой тенью, используйте следующую 8-осевую тень:

Для настройки вы можете использовать вместо этого SASS mixin (хотя изменение размера имеет побочные эффекты при рендеринге):

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

Один из вариантов-использовать text-shadow для имитации инсульта. Пример:

Firefox и Safari теперь поддерживают новое свойство CSS под названием paint-order , которое можно использовать для имитации внешнего штриха :

Скриншот:

CSS paint-order screenshot

-webkit-text-stroke не поддерживает размещение штриха снаружи текста

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

А как насчет SVG?

Ну, похоже, что он также помещает удар изнутри —

Однако,

возможно, вы сможете смоделировать этот эффект (в зависимости от того, что вам нужно) с помощью:

1) Измените шрифт на без засечек, как verdana, и

2) Сделайте размер шрифта текста, к которому вы добавляете штрих, немного больше

set mytexts to make new text frame with properties , width:(checkValue3 — checkValue1), name:notes> Приведенный выше код используется для создания текста в Illustrator с помощью Applescript. Как.

Вопрос У меня есть изображение CGImageRef . На самом деле это изображение, которое будет использоваться в качестве маски. Итак, alpha layer-это то, что меня действительно волнует. Я хочу thicken непрозрачную часть изображения, как если бы я добавил обводку вокруг непрозрачной части. Как это.

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

Кроме того, другой вариант-использовать :after для создания этого второго элемента. Недостатком является то, что вы не можете программно изменить ход

Это может неправильно работать при больших значениях хода.

Я также пробовал text-shadow и -webkit-text-stroke, но безуспешно во всех отношениях. Я мог получить результат, только сделав два дива(фон и передний план), т. Е.,

фоновый div с -webkit-text-stroke и передний div без -webkit-text-stroke.

Bt единственная проблема с html, генерируемым через, — это удвоенный размер(размер в памяти), поскольку div повторяется дважды.

У кого-нибудь есть лучшее решение?

я знаю, что это старый вопрос, но взгляните на это:

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

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

Миксин

Пример использования

(Делает текст полупрозрачным черным с белым контуром)

Для достижения этого результата можно использовать текстовую тень http://css3generator.com

Похожие вопросы:

Есть ли простой способ нарисовать обводку внутри круга (без рисования 2 кругов и подобных обходных путей)? Если я сделаю это таким образом: context.beginPath(); context.arc(200, 200, 93, Math.PI /.

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

Как применить обводку (контур вокруг текста)к текстовому блоку в xaml в WPF?

Пожалуйста, посмотрите здесь с помощью Chrome: http://jsfiddle.net/u8BdB / Почему webkit-text-stroke покрывает также и цвет шрифта? Я хотел бы поместить обводку снаружи текста, похоже, что она.

Вопрос У меня есть изображение CGImageRef . На самом деле это изображение, которое будет использоваться в качестве маски. Итак, alpha layer-это то, что меня действительно волнует. Я хочу thicken.

Я могу нарисовать обводку вокруг текста в sharpDX, но это очень медленно. Вот мой код: d2dRenderTarget.DrawTextLayout(new Vector2(298, 300), textLayout0, textBrush1,DrawTextOptions.NoSnap);.

Учитывая UIImage, содержащий непрозрачные (Альфа < 1) пиксельные данные, как мы можем нарисовать контур / границу / обводку вокруг непрозрачных пикселей (Альфа > 0) с пользовательским цветом и.

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

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

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