Этот ответ аналогичен ответу @ 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