Мне нужен совет по градиентному курсиву - PullRequest
Новая
       39

Мне нужен совет по градиентному курсиву

0 голосов
/ 29 июня 2019

Я нашел способ применить градиент к тексту.Это работает, но когда я применил стиль шрифта курсивом, шрифт немного обрезается до крайности 

h2 {
  font-family: 'FMono';
  text-transform: uppercase;
  font-style: normal;
  font-weight: 900;
  font-size: 5rem;
  line-height: 0rem;
  color: #000;
}

h2 > span {
  font-family: 'FMono';
  text-transform: uppercase;
  font-style: italic;
  font-weight: 900;
  font-size: 5rem;
  line-height: 15rem;
  background: linear-gradient(152.36deg, #FF1053 26.66%, #AF19E4 89.65%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<h2>sport your <br> <span>creativity</span> </h2>

1 Ответ

1 голос
/ 29 июня 2019

Просто добавьте padding-left: 10px к диапазону ... 

h2 {
  font-family: 'FMono';
  text-transform: uppercase;
  font-style: normal;
  font-weight: 900;
  font-size: 5rem;
  line-height: 0rem;
  color: #000;
}

h2 > span {
  font-family: 'FMono';
  text-transform: uppercase;
  font-style: italic;
  font-weight: 900;
  font-size: 5rem;
  line-height: 15rem;
  background: linear-gradient(152.36deg, #FF1053 26.66%, #AF19E4 89.65%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 10px;
}
<h2>sport your <br> <span>creativity</span> </h2>
...