Как мне объединить CSS text-shadow и "background-image: -webkit-градиент" - PullRequest
Новая
       28

Как мне объединить CSS text-shadow и "background-image: -webkit-градиент"

15 голосов
/ 27 сентября 2010

Я пытаюсь добиться эффекта градиент + тень текста в Chrome / Safari, используя CSS text-shadow и комбинацию text-shadow и background-image: -webkit-Gradient, см. Пример blw. Я могу только применить один из эффектов (если я добавлю тень, градиент исчезнет. Что я делаю не так? 

h1 {
font-size: 100px;
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 1px #fff;
}

Ответы [ 3 ]

17 голосов
/ 27 сентября 2010

Градиент «исчезает», потому что text-shadow находится на уровне выше фона.

  1. Текст (который прозрачный)
  2. Тень
  3. Фон.

Мы можем обойти это, скопировав текст и поместив его под исходный слой, а затем применим тень там, например : 

  h1 {
    position: relative;
    font-size: 100px;
    text-align: center;
  }

  h1 div {
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute; 
    width: 100%;
}
  h1:after {
    text-shadow: 10px 10px 11px #fff;
    color: transparent;
  }

  #hello:after {
        content: 'Hello World';
  }

  <h1 id="hello"><div>Hello World</div></h1>
3 голосов
/ 06 апреля 2014

Этот ответ аналогичен ответу @ KennyTM выше, за исключением того, что его ответ жестко закодирован в CSS, что не подходит для динамического текста, такого как в CMS. Кроме того, его метод требует отдельного идентификатора для каждого экземпляра, что было бы очень утомительно, если вы планируете часто использовать этот эффект. В приведенном ниже примере вместо этого используется класс, и допускается динамический текст.

Попробуйте это: 

h1 {
    position: relative;
    font-size: 100px;
    text-align: center;
}

h1 div {
    background-image: -webkit-gradient(linear, left top, left bottom, from(teal), to(black));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute; 
    width: 100%;
}
h1:after {
    text-shadow: 2px 2px 2px #000000;
    color: transparent;
}

.gradient-shadow:after {
    content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */
}

А потом в вашем HTML: 

<h1 class="gradient-shadow" title="Hello World"><div>Hello World</div></h1>

Просто убедитесь, что текст в <div> соответствует тексту в атрибуте title.

С некоторым дополнительным форматированием (я использовал Helvetica Neue Ultralight и темный фон), вы можете получить эффект примерно так: http://cl.ly/image/2C0k0I3W271D

0 голосов
/ 12 февраля 2018

Без дополнительной разметки HTML или псевдоэлементов вы можете добиться этого эффекта, используя свойство filter и функцию drop-shadow.Этот метод также работает с фоновым изображением против градиента. 

h1 {
  font:54px 'Open Sans', 'Helvetica', Arial, sans-serif;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#787878), to(#484848));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-filter: drop-shadow(2px 2px #333);
          filter: drop-shadow(2px 2px #333);
}

Fiddle: https://jsfiddle.net/eywda89g/

...