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

Question

Есть макет

Вот html

<h2>РАСПРОДАЖА</h2>

Вот css

.double_text h2 {
    font-family: 'Playfair Display', serif;
    font-size: 104px;
    line-height: 110px;
    font-weight: 700;
    background: #503012;
    background: -webkit-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
    background: -moz-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
    background: linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Как этому тексту можно сделать обводок белого цвета толщиной в 3 пикселя?

Answer 1

Для браузеров на движке для отображения веб-страниц WebKit подходит такой вариант с использованием '-webkit-text-stroke`

body {
  background: black;
}
h2 {
    font-family: 'Playfair Display', serif;
    font-size: 104px;
    line-height: 110px;
    font-weight: 700;
    background: #503012;
    background: -webkit-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
    background: -moz-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
    background: linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@supports (-webkit-text-stroke: 3px white) {
  h2 {
    -webkit-text-stroke: 3px white
  }
}

<h2>РАСПРОДАЖА</h2>

Возможно вам подойдет вариант с text-shadow для поддержки других браузеров, где свойтсва -webkit не поддерживаются:

body {
  background: black;
}
h2 {
    font-family: 'Playfair Display', serif;
    font-size: 104px;
    line-height: 110px;
    font-weight: 700;
    color: gold;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

<h2>РАСПРОДАЖА</h2>

БЛОГ НА HUSL

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

Ответы (1 шт):