Как получить Text-Shadow с градиентом Webkit - PullRequest
Новая
       5

Как получить Text-Shadow с градиентом Webkit

0 голосов
/ 04 июня 2018

Когда я использую Text-Shadow с градиентом Webkit, он появляется сверху текста, а не сзади.Я увеличил непрозрачность тени, чтобы показать это. 

#title {
  font-size: calc(15px + 9vw);
  text-align: center;
  background: linear-gradient(to right, red 0%, blue 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 8vh;
  text-shadow: -10px 15px 5px rgba(0,0,0,0.1),
                 -10px 20px 5px rgba(0,0,0,1),
                 -10px 20px 5px rgba(0,0,0,1);
}
<h3 id="title">Example</h3>

1 Ответ

0 голосов
/ 04 июня 2018

И идея состоит в том, чтобы создать еще один слой с псевдоэлементом, который вы поместите позади. 

#title {
  font-size: calc(15px + 9vw);
  text-align: center;
  background: linear-gradient(to right, red 0%, blue 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 8vh;
  position:relative;
}
#title:before {
  content:attr(data-text);
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
    text-shadow: -10px 15px 5px rgba(0,0,0,0.1),
                 -10px 20px 5px rgba(0,0,0,1),
                 -10px 20px 5px rgba(0,0,0,1);
  z-index:-1
}
<h3 id="title" data-text="Example">Example</h3>

А если вы не хотите дублировать текст, вы можете использовать оба псевдоэлемента и определять текст только в атрибуте: 

#title {
  position: relative;
  text-align: center;
  margin-top: 8vh;
  font-size: calc(15px + 9vw);
  z-index: 0;
}

#title:before {
  content: attr(data-text);
  position: relative;
  background: linear-gradient(to right, red 0%, blue 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 1;
}

#title:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  text-shadow: 
    -10px 15px 5px rgba(0, 0, 0, 0.1), 
    -10px 20px 5px rgba(0, 0, 0, 1), 
    -10px 20px 5px rgba(0, 0, 0, 1);
  z-index: -1;
}
<h3 id="title" data-text="Example"></h3>
...