Как добавить градиент текста с помощью css?

Question

<div class="firstname"> 
<a href="index.html"><p class="names">DANIEL</p></a> 
</div> 

Вышесказанное является html.

h1.method1 { 
background: -webkit-linear-gradient(top, #878787, #000); 
background: linear-gradient(top, #878787, #000); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;} 

h1.method2 { 
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1)); 
-webkit-mask-image: linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1));} 

Выше, что я пытался сделать, используя .names селектор, и селектор .firstname .names, и я попытался селектор a.names, я не уверен, что если работа метод оленьей кожи или я использую неправильный селектор. Но в целом я просто хочу, чтобы текст имел немного градиента, чтобы хорошо выглядеть.

Answer 1

Используйте свойство text-shadow css со вставкой в ​​конце правила. Это самый кросс-браузерный способ сделать это. IE9 может не поддерживать его, но все.

Использование RGBA цвет для большего контроля и редактировать альфа-канал в браузере (как поджигатель)

Answer 2

Источник: http://css-tricks.com/snippets/css/gradient-text/

Это только WebKit, но это самый чистый способ сделать это как текст остается редактируемым и выбираемым веб-текстом.

h1 { 
    font-size: 72px; 
    background: -webkit-linear-gradient(#eee, #333); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}