Сочетание Box Shadow и Text Gradient - PullRequest
Новая
       12

Сочетание Box Shadow и Text Gradient

1 голос
/ 06 марта 2020

Есть ли возможность объединить градиент текста с тенью блока? См. Пример-изображение, чтобы понять, чего именно я хочу достичь. Пример-изображения

Я достиг Градиента, но тень от блока, добавленная после, появляется на переднем плане. Как я могу решить это? 

h2 {
    display: inline-block;
    background-image:linear-gradient(90deg,#c93718 0%,#035b34 30%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    box-shadow: inset 0px 30px white;
}

Хотел бы получить помощь!

Спасибо! (Извините за мой английский sh)

Ответы [ 2 ]

0 голосов
/ 06 марта 2020

Вы можете попробовать несколько фонов: 

h2 {
    display: inline-block;
    font-size:50px;
    color:transparent;
    background-image:
      linear-gradient(90deg,#c93718 0%,#035b34 30%),
      linear-gradient(#ccc,#ccc);
    -webkit-background-clip: 
      text,
      padding-box;
    background-clip: 
      text,
      padding-box;
    -webkit-text-fill-color: transparent; 
}
<h2>A title here</h2>

Это не сработает на Firefox из-за ошибки: https://bugzilla.mozilla.org/show_bug.cgi?id=1571244

Как альтернатива для Firefox, рассмотрим псевдоэлемент: 

h2 {
  display: inline-block;
  font-size: 50px;
  color: transparent;
  background-image: linear-gradient(90deg, #c93718 0%, #035b34 30%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: #ccc;
}
<h2>A title here</h2>
0 голосов
/ 06 марта 2020

Попробуйте добавить div, и тогда вы сможете поиграть с позицией, которая решит ваши проблемы. 

h2 {
    display: inline-block;
    background-image:linear-gradient(90deg,#c93718 0%,#035b34 30%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 999999;
    position: absolute;
    
}
div{
    background-color: gray;
    height: 30px;
    width: 140px;
    position: absolute;
    top: 22px;
}
<h2>This is Demo</h2>
<div></div>
...