Эффект контура к тексту

Question

Есть ли в CSS какие-либо способы придания контурам текста разных цветов?Я хочу выделить некоторые части моего текста, чтобы сделать его более интуитивно понятным - например, имена, ссылки и т. Д. Изменение цвета ссылок и т. Д. В настоящее время является обычным делом, поэтому я хочу что-то новое.

Answer 1

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

Вместо этого используется уже поддерживаемое свойство text-shadow (поддерживается в Chrome, Firefox, Opera и IE 9, я считаю).

Используйте четыре тени для имитации штрихованного текста:

.strokeme {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

<div class="strokeme">
  This text should have a stroke in some browsers
</div>

Я сделал демо для вас здесь

И пример для поиска доступен здесь

---

Как отметил в комментариях Джейсон С. CSS-свойство text-shadow теперь поддерживается всеми основными браузерами, за исключением Opera Mini. Где это решение будет работать для обратной совместимости (на самом деле проблема не касается браузеров, которые автоматически обновляются), я считаю, что text-stroke CSS следует использовать.

Answer 2

Редактировать: text-stroke теперь достаточно развито и реализовано в большинстве браузеров . Это проще, острее и точнее. Если ваша браузерная аудитория может это поддержать, вы должны сначала использовать text-stroke вместо text-shadow.

---

Вы можете и должны делать это только с помощью эффекта text-shadow без каких-либо смещений:

.outline {
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

Почему? Когда вы смещаете несколько теневых эффектов, вы начинаете замечать неровные, неровные углы:


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

text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;

Вот пример только одного эффекта (вверху) и того же эффекта, повторенного 14 раз (внизу):

Также обратите внимание: из-за того, что линии становятся такими тонкими, очень полезно отключить субпиксельный рендеринг, используя
-webkit-font-smoothing: antialiased.

Answer 3

Легко!SVG на помощь.

Это упрощенный метод:

svg{
  font: bold 50px 'Arial';
  width: 50%;
  height: 50px;
}

text{
  fill: none;
  stroke: red;
  stroke-width:2px;
  // stroke-dasharray: 2,2;
  stroke-linejoin: round;
}

<svg viewBox="0 0 350 50">
  <text y="40">Scalable Title</text>
</svg>

    

Вот еще сложная демоверсия .

Answer 4

Вы можете попробовать сложить несколько размытых теней, пока тени не станут похожими на штрихи, например:

.shadowOutline {
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

Вот скрипка: http://jsfiddle.net/GGUYY/

Я упоминаю об этом на всякий случай, если кому-то интересно, хотя я бы не назвал это решением, потому что оно терпит неудачу различными способами:

• это не работает в старом IE
• он отображается совершенно по-разному в каждом браузере
• применение такого количества теней очень тяжело для обработки: S

Answer 5

Я искал кросс-браузерное решение для обработки текста, которое работает при наложении на фоновые изображения. Мне кажется, у меня есть решение для этого, которое не требует дополнительной разметки, js и работает в IE7-9 (я не тестировал 6), и не вызывает проблем с наложением.

Это комбинация использования CSS3 text-shadow, которая имеет хорошую поддержку, кроме IE (http://caniuse.com/#search=text-shadow),, а затем использование комбинации фильтров для IE. CSS3 текстовая поддержка в данный момент слабая.

IE Фильтры

Светящийся фильтр (http://www.impressivewebs.com/css3-text-shadow-ie/) выглядит ужасно, поэтому я этим не пользовался.

Ответ Дэвида Хьюитта включал добавление фильтров с тенями в комбинации направлений. Затем, к сожалению, ClearType удаляется, поэтому мы получаем плохо псевдоним.

Затем я скомбинировал некоторые элементы, предложенные в useragentman , с фильтрами drophadow.

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

Этот пример будет черным текстом с белым штрихом. Я использую условные HTML-классы, кстати, для целевой IE (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/).

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}

Answer 6

Просто добавив этот ответ. «Поглаживание» текста не совпадает с «Outlining»

Схема выглядит великолепно. Поглаживание выглядит ужасно.

Решение SVG, указанное в другом месте, имеет ту же проблему. Вы хотите контур , вам нужно поместить текст дважды. Один раз погладил и снова не погладил.

Поглаживание НЕ Изложение

body {
  font-family: sans-serif;
  margin: 20px;
}

.stroked {
  color: white;
  -webkit-text-stroke: 1px black;
}

.thickStroked {
  color: white;
  -webkit-text-stroke: 10px black;
}

.outlined {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}

.thickOutlined {
  color: white;
text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000
}

svg {
  font-size: 40px;
  font-weight: bold;
  width: 450px;
  height: 70px;
  fill: white;
}

.svgStroke {
  fill: white;
  stroke: black;
  stroke-width: 20px;
  stroke-linejoin: round;
}

<h1 class="stroked">Properly stroked!</h1>
<h1 class="outlined">Properly outlined!</h1>

<h1 class="thickStroked">Thickly stroked!</h1>
<h1 class="thickOutlined">Thickly outlined!</h1>

<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Stroked!</text>
</svg>
<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Outlined!</text>
  <text class="svgText" x="10" y="45">SVG Thickly Outlined!</text>
</svg>

PS: Я бы хотел знать, как сделать SVG правильным размером любого произвольного текста. У меня есть ощущение, что это довольно сложно, включая генерацию SVG, запрос его с помощью JavaScript, чтобы получить экстенты, а затем применить результаты. Если бы был более простой способ не-я, я бы хотел знать.

Answer 7

Этот миксин для SASS даст плавные результаты, используя 8 осей:

@mixin stroke($size: 1px, $color: #000) {
  text-shadow:
    -#{$size} -#{$size} 0 $color,
     0        -#{$size} 0 $color,
     #{$size} -#{$size} 0 $color,
     #{$size}  0        0 $color,
     #{$size}  #{$size} 0 $color,
     0         #{$size} 0 $color,
    -#{$size}  #{$size} 0 $color,
    -#{$size}  0        0 $color;
}

И обычный CSS:

text-shadow:
  -1px -1px 0 #000,
   0   -1px 0 #000,
   1px -1px 0 #000,
   1px  0   0 #000,
   1px  1px 0 #000,
   0    1px 0 #000,
  -1px  1px 0 #000,
  -1px  0   0 #000;

Answer 8

h1 {
   color: black;
   -webkit-text-fill-color: white; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

<h1>Properly stroked!</h1>

Answer 9

Я получил лучшие результаты с 6 различными тенями:

.strokeThis{
    text-shadow:
    -1px -1px 0 #ff0,
    0px -1px 0 #ff0,
    1px -1px 0 #ff0,
    -1px 1px 0 #ff0,
    0px 1px 0 #ff0,
    1px 1px 0 #ff0;
}

Answer 10

Работа с более толстыми мазками становится немного беспорядочной, если у вас есть удовольствие от sass, попробуйте этот миксин, но он не идеален, и в зависимости от веса хода он генерирует достаточное количество CSS.

 @mixin stroke($width, $colour: #000000) {
      $shadow: 0 0 0 $colour; // doesn't do anything but I couldn't work out how to create a blank string and maintain commas
      @for $i from 0 through $width {
          $shadow: $shadow,
          -$i + px -$width + px 0 $colour,
          $i + px -$width + px 0 $colour,
          -$i + px $width + px 0 $colour,
          $i + px $width + px 0 $colour,
          -$width + px -$i + px 0 $colour,
          $width + px -$i + px 0 $colour,
          -$width + px $i + px 0 $colour,
          $width + px $i + px 0 $colour,
      }
      text-shadow: $shadow;
}