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

236
14 апреля 2022, 12:20

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

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

.box-design {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: $boxGray;
  font-family: GBold;
  font-size: 150px;
}
<div class="box-first">
  <p class="box-design">DES</p>
</div>

Answer 1

Для разнообразия можно рассмотреть использование SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="200" viewBox="0 0 330 200" >
    <rect width="100%" height="100%" fill="#111111" />
    <text x="10" y="150" font-size="150px" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES </text>
</svg>

Добавляем буквально одну строчку и можно сделать анимацию обводки

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="200" viewBox="0 0 330 200" >
    <rect width="100%" height="100%" fill="#111111" />
    <text x="10" y="150" font-size="150px" stroke-dasharray="25" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES 
         <!-- Анимация обводки -->
      <animate attributeName="stroke-dashoffset" dur="2s" values="300;0" repeatCount="indefinite" />
    </text>
</svg>

+SVG Filter

Для обводки используются SVG фильтры: feColorMatrix и feMorphology

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="200" viewBox="0 0 330 200" >
    <filter id="outText" 
            x="-20%" y="-20%" width="300%" height="300%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="4" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="1" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 0.2
                             0 0 0 0 0.1
                             0 0 0 0 0.5
                             0 0 0 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
    <rect width="100%" height="100%" fill="#111111" />
    <text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="0" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES 
        
    </text>
</svg>

Тот же вариант + анимация строки

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="200" viewBox="0 0 330 200" >
    <filter id="outText" 
            x="-20%" y="-20%" width="300%" height="300%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="5" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="1" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 0.2
                             0 0 0 0 0.1
                             0 0 0 0 0.9
                             0 0 1 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
    <rect width="100%" height="100%" fill="#111111" />
    <text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="20" font-family="sans-serif" fill="none" stroke="silver" stroke-width="4"  > DES 
         <!-- Анимация обводки -->
       <animate attributeName="stroke-dashoffset" dur="5s" values="300;0" repeatCount="indefinite" />
    </text>
</svg>

Answer 2

Используйте text-shadow

.box-design {
  text-shadow: 
    -1px 0 0 red, /* Тень влево */
    0 -1px 0 red, /* Тень вверх */
    1px 0 0 red, /* Тень вправо */
    0 1px 0 red; /* Тень вниз */
  font-size: 150px;
  color: #fff;
  margin: 0;
}
<div class="box-first">
  <p class="box-design">DES</p>
</div>

Answer 3

Можно использовать text-shadow, как в соседнем ответе, но тогда не будет прозрачности у самих букв. Поэтому, всё таки -webkit-text-stroke:

body { background: radial-gradient(#d808, #000f) no-repeat; }
.box-design {
  margin: 0;
  font: 150px Arial;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 2px white;
}
<div class="box-first">
  <p class="box-design">DES</p>
</div>

READ ALSO
На мобильном устройстве код не работает
CSS

На мобильном устройстве код не работает

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

 181
Cпособы закрытия окна [закрыт]
CSS

Cпособы закрытия окна [закрыт]

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение

 248
Фильтр SVG: шириной 100% высотой 100% не полностью обрабатывает изображение
CSS

Фильтр SVG: шириной 100% высотой 100% не полностью обрабатывает изображение

У меня есть простой фильтр SVGЕсли вы щелкните на примере ниже, этот фильтр появится / исчезнет:

 102
Последний элемент flex-box
CSS

Последний элемент flex-box

Можно ли с помощью flex-box сделать так, что бы последний элемент был в конце а все предыдущие с левой стороны?

 104