0

Есть макет

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

Вот 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 пикселя?

1 ответ 1

2

Для браузеров на движке для отображения веб-страниц 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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