6

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

введите сюда описание изображения

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

.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>

1
  • 1
    а где картинка?
    – Zhihar
    26 окт 2020 в 10:02

3 ответа 3

10

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

5
  • 2
    Хороший вариант, спасибо!
    – Purple Pig
    26 окт 2020 в 12:59
  • 1
    @VadimChorniy сейчас ещё добавлю с SVG filter 26 окт 2020 в 13:00
  • @VadimChorniy Хотите добавлю ещё ответ с интересными вариантами анимаций уже самих .букв. Мне кажется, что текстовый эффекты, если они конечно, "не вырви глаз", могут оживить веб страничку 26 окт 2020 в 13:27
  • Очень хочу! Заранее спасибо
    – Purple Pig
    27 окт 2020 в 6:16
  • @VadimChorniy это будет дополнительный ответ, так как совершенно другие эффекты, не обводка, а сами буквы. 27 окт 2020 в 6:34
8

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

1
  • Спасибо, ваш вариант помог!)
    – Purple Pig
    26 окт 2020 в 12:59
8

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

1
  • 1
    по поводу className.. проект на Реакте, забыл изменить тут.
    – Purple Pig
    26 окт 2020 в 12:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.